.ct-section {
width:100%;
background-size:cover;
background-repeat:repeat;
}
.ct-section>.ct-section-inner-wrap {
display:flex;
flex-direction:column;
align-items:flex-start;
}
.ct-div-block {
display:flex;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.ct-new-columns {
display:flex;
width:100%;
flex-direction:row;
align-items:stretch;
justify-content:center;
flex-wrap:wrap;
}
.ct-link-text {
display:inline-block;
}
.ct-link {
display:flex;
flex-wrap:wrap;
text-align:center;
text-decoration:none;
flex-direction:column;
align-items:center;
justify-content:center;
}
.ct-link-button {
display:inline-block;
text-align:center;
text-decoration:none;
}
.ct-link-button {
background-color: #1e73be;
border: 1px solid #1e73be;
color: #ffffff;
padding: 10px 16px;
}
.ct-image {
max-width:100%;
}
.ct-fancy-icon>svg {
width:55px;height:55px;}
.ct-inner-content {
width:100%;
}
.ct-slide {
display:flex;
flex-wrap:wrap;
text-align:center;
flex-direction:column;
align-items:center;
justify-content:center;
}
.ct-nestable-shortcode {
display:flex;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-comments {
width:100%;
text-align:left;
}
.oxy-comment-form {
width:100%;
}
.oxy-login-form {
width:100%;
}
.oxy-search-form {
width:100%;
}
.oxy-tabs-contents {
display:flex;
width:100%;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-tab {
display:flex;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-tab-content {
display:flex;
width:100%;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-testimonial {
width:100%;
}
.oxy-icon-box {
width:100%;
}
.oxy-pricing-box {
width:100%;
}
.oxy-posts-grid {
width:100%;
}
.oxy-gallery {
width:100%;
}
.ct-slider {
width:100%;
}
.oxy-tabs {
display:flex;
flex-wrap:nowrap;
flex-direction:row;
align-items:stretch;
}
.ct-modal {
flex-direction:column;
align-items:flex-start;
}
.ct-span {
display:inline-block;
text-decoration:inherit;
}
.ct-widget {
width:100%;
}
.oxy-dynamic-list {
width:100%;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
			.ct-div-block,
			.oxy-post-content,
			.ct-text-block,
			.ct-headline,
			.oxy-rich-text,
			.ct-link-text { max-width: 100%; }
			img { flex-shrink: 0; }
			body * { min-height: 1px; }
		}            .oxy-testimonial {
                flex-direction: row;
                align-items: center;
            }
                        .oxy-testimonial .oxy-testimonial-photo-wrap {
                order: 1;
            }
            
                        .oxy-testimonial .oxy-testimonial-photo {
                width: 125px;                height: 125px;                margin-right: 20px;
            }
            
                        .oxy-testimonial .oxy-testimonial-photo-wrap, 
            .oxy-testimonial .oxy-testimonial-author-wrap, 
            .oxy-testimonial .oxy-testimonial-content-wrap {
                align-items: flex-start;                text-align: left;            }
            
                                                            .oxy-testimonial .oxy-testimonial-text {
                margin-bottom:8px;font-size: 21px;
line-height: 1.4;
-webkit-font-smoothing: subpixel-antialiased;
            }
            
                                    .oxy-testimonial .oxy-testimonial-author {
                font-size: 18px;
-webkit-font-smoothing: subpixel-antialiased;
            }
                            

                                                .oxy-testimonial .oxy-testimonial-author-info {
                font-size: 12px;
-webkit-font-smoothing: subpixel-antialiased;
            }
            
             
            
                        .oxy-icon-box {
                text-align: left;                flex-direction: column;            }
            
                        .oxy-icon-box .oxy-icon-box-icon {
                margin-bottom: 12px;
                align-self: flex-start;            }
            
                                                                        .oxy-icon-box .oxy-icon-box-heading {
                font-size: 21px;
margin-bottom: 12px;            }
            
                                                                                    .oxy-icon-box .oxy-icon-box-text {
                font-size: 16px;
margin-bottom: 12px;align-self: flex-start;            }
            
                        .oxy-icon-box .oxy-icon-box-link {
                margin-top: 20px;                            }
            
            
            /* GLOBALS */

                                                            .oxy-pricing-box .oxy-pricing-box-section {
                padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
text-align: center;            }
                        
                        .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-price {
                justify-content: center;            }
            
            /* IMAGE */
                                                                                    .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-graphic {
                justify-content: center;            }
            
            /* TITLE */
                                                            
                                    .oxy-pricing-box .oxy-pricing-box-title-title {
                font-size: 48px;
            }
            
                                    .oxy-pricing-box .oxy-pricing-box-title-subtitle {
                font-size: 24px;
            }
            

            /* PRICE */
                                                .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-price {
                                                flex-direction: row;                                            }
            
                                    .oxy-pricing-box .oxy-pricing-box-currency {
                font-size: 28px;
            }
            
                                    .oxy-pricing-box .oxy-pricing-box-amount-main {
                font-size: 80px;
line-height: 0.7;
            }
            
                                    .oxy-pricing-box .oxy-pricing-box-amount-decimal {
                font-size: 13px;
            }
                        
                                    .oxy-pricing-box .oxy-pricing-box-term {
                font-size: 16px;
            }
            
                                    .oxy-pricing-box .oxy-pricing-box-sale-price {
                font-size: 12px;
color: rgba(0,0,0,0.5);
                margin-bottom: 20px;            }
            
            /* CONTENT */

                                                                        .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-content {
                font-size: 16px;
color: rgba(0,0,0,0.5);
            }
            
            /* CTA */

                                                                        .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-cta {
                justify-content: center;            }
            
        
                                .oxy-progress-bar .oxy-progress-bar-background {
            background-color: #000000;            background-image: linear-gradient(-45deg,rgba(255,255,255,.12) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.12) 75%,transparent 75%,transparent);            animation: none 0s paused;        }
                
                .oxy-progress-bar .oxy-progress-bar-progress-wrap {
            width: 85%;        }
        
                                                        .oxy-progress-bar .oxy-progress-bar-progress {
            background-color: #66aaff;padding: 40px;animation: none 0s paused, none 0s paused;            background-image: linear-gradient(-45deg,rgba(255,255,255,.12) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.12) 75%,transparent 75%,transparent);        
        }
                
                        .oxy-progress-bar .oxy-progress-bar-overlay-text {
            font-size: 30px;
font-weight: 900;
-webkit-font-smoothing: subpixel-antialiased;
        }
        
                        .oxy-progress-bar .oxy-progress-bar-overlay-percent {
            font-size: 12px;
        }
        
        .ct-slider .unslider-nav ol li {border-color: #ffffff; }.ct-slider .unslider-nav ol li.unslider-active {background-color: #ffffff; }.ct-slider .ct-slide {
				padding: 0px;			}
		
                        .oxy-superbox .oxy-superbox-secondary, 
            .oxy-superbox .oxy-superbox-primary {
                transition-duration: 0.5s;            }
            
            
            
            
            
        
        
        
        
            .oxy-shape-divider {
                width: 0px;
                height: 0px;
                
            }
            
            .oxy_shape_divider svg {
                width: 100%;
            }
            .oxy-pro-menu .oxy-pro-menu-container:not(.oxy-pro-menu-open-container):not(.oxy-pro-menu-off-canvas-container) .sub-menu{
box-shadow:px px px px ;}

.oxy-pro-menu .oxy-pro-menu-show-dropdown .oxy-pro-menu-list .menu-item-has-children > a svg{
transition-duration:0.4s;
}

.oxy-pro-menu .oxy-pro-menu-show-dropdown .oxy-pro-menu-list .menu-item-has-children > a div{
margin-left:0px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-open-icon svg{
width:30px;
height:30px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-open-icon{
padding-top:15px;
padding-right:15px;
padding-bottom:15px;
padding-left:15px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-open-icon, .oxy-pro-menu .oxy-pro-menu-mobile-open-icon svg{
transition-duration:0.4s;
}

.oxy-pro-menu .oxy-pro-menu-mobile-close-icon{
top:20px;
left:20px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-close-icon svg{
width:24px;
height:24px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-close-icon, .oxy-pro-menu .oxy-pro-menu-mobile-close-icon svg{
transition-duration:0.4s;
}

.oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-off-canvas-container, .oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-open-container{
background-color:#ffffff;
}

.oxy-pro-menu .oxy-pro-menu-off-canvas-container, .oxy-pro-menu .oxy-pro-menu-open-container{
background-image:url();
}

.oxy-pro-menu .oxy-pro-menu-off-canvas-container .oxy-pro-menu-list .menu-item-has-children > a svg, .oxy-pro-menu .oxy-pro-menu-open-container .oxy-pro-menu-list .menu-item-has-children > a svg{
font-size:24px;
}

.oxy-pro-menu .oxy-pro-menu-dropdown-links-toggle.oxy-pro-menu-open-container .menu-item-has-children ul, .oxy-pro-menu .oxy-pro-menu-dropdown-links-toggle.oxy-pro-menu-off-canvas-container .menu-item-has-children ul{
background-color:rgba(0,0,0,0.2);
border-top-style:solid;
}

.oxy-pro-menu .oxy-pro-menu-container:not(.oxy-pro-menu-open-container):not(.oxy-pro-menu-off-canvas-container) .oxy-pro-menu-list{
                    flex-direction: row;
               }
.oxy-pro-menu .oxy-pro-menu-container .menu-item a{
                    text-align: left;
                    justify-content: flex-start;
                }
.oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-open-container .menu-item, .oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-off-canvas-container .menu-item{
                    align-items: flex-start;
                }

            .oxy-pro-menu .oxy-pro-menu-off-canvas-container{
                    top: 0;
                    bottom: 0;
                    right: auto;
                    left: 0;
               }
.oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-open-container .oxy-pro-menu-list .menu-item a, .oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-off-canvas-container .oxy-pro-menu-list .menu-item a{
                    text-align: left;
                    justify-content: flex-start;
                }

            .oxy-site-navigation {
--oxynav-brand-color:#4831B0;
--oxynav-neutral-color:#FFFFFF;
--oxynav-activehover-color:#EFEDF4;
--oxynav-background-color:#4831B0;
--oxynav-border-radius:0px;
--oxynav-other-spacing:8px;
--oxynav-transition-duration:0.3s;
--oxynav-transition-timing-function:cubic-bezier(.84,.05,.31,.93);
}

.oxy-site-navigation .oxy-site-navigation__mobile-close-wrapper{
text-align:left;
}

.oxy-site-navigation > ul{ left: 0; }
.oxy-site-navigation {
                        --oxynav-animation-name: none; 
                    }

                .oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(1){ 
                    background-color: var(--oxynav-brand-color);
                    transition: var(--oxynav-transition-duration);
                    margin-left: var(--oxynav-other-spacing);
                    border: none;
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2){ 
                    background: transparent;
                    border: 1px solid currentColor;
                    transition: var(--oxynav-transition-duration);
                    margin-left: var(--oxynav-other-spacing);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2):not(:hover) > img{
                    filter: invert(0) !important;
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:hover{
                    background-color: var(--oxynav-activehover-color);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(1) > a{
                    color: var(--oxynav-neutral-color);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2) > a{
                    color: var(--oxynav-brand-color);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:hover > a{
                    color: var(--oxynav-brand-color);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(1) > a::after{
                    color: var(--oxynav-neutral-color);   
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2) > a::after{
                    color: var(--oxynav-brand-color);   
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:hover > a::after{
                    color: var(--oxynav-brand-color);   
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true'] > ul{
                    display: none;
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true'] > button, .oxy-site-navigation > ul:not(.open) > li[data-cta='true'] > ul{
                    display: none;
                }

                .ct-section-inner-wrap, .oxy-header-container{
  max-width: 1440px;
}
body {font-family: 'Open Sans';}body {line-height: 1.6;font-size: 16px;font-weight: 400;color: #404040;}.oxy-nav-menu-hamburger-line {background-color: #404040;}h1, h2, h3, h4, h5, h6 {font-family: 'Source Sans 3';font-size: 36px;font-weight: 700;}h2, h3, h4, h5, h6{font-size: 30px;}h3, h4, h5, h6{font-size: 24px;}h4, h5, h6{font-size: 20px;}h5, h6{font-size: 18px;}h6{font-size: 16px;}a {color: #0074db;text-decoration: none;}a:hover {text-decoration: none;}.ct-link-text {text-decoration: ;}.ct-link {text-decoration: ;}.ct-link-button {border-radius: 3px;}.ct-section-inner-wrap {
padding-top: 75px;
padding-right: 20px;
padding-bottom: 75px;
padding-left: 20px;
}.ct-new-columns > .ct-div-block {
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
}.oxy-header-container {
padding-right: 20px;
padding-left: 20px;
}@media (max-width: 992px) {
				.ct-columns-inner-wrap {
					display: block !important;
				}
				.ct-columns-inner-wrap:after {
					display: table;
					clear: both;
					content: "";
				}
				.ct-column {
					width: 100% !important;
					margin: 0 !important;
				}
				.ct-columns-inner-wrap {
					margin: 0 !important;
				}
			}
.fc-header-section {
}
.fc-wrap {
}
.fc-theme-clinical {
}
.fc-v7 {
}
/* ==========================================================================
   FedCom — Core stylesheet
   Federal Commercialization Partners USA (fedcomusa.com)
   --------------------------------------------------------------------------
   Paste into Oxygen: Manage > Stylesheets > new stylesheet named "fedcom-core".
   Load this FIRST. Page-level sheets (fedcom-v1..v4.css) load after it.

   Everything is prefixed .fc- / --fc- so it can never collide with Oxygen,
   the theme, or a plugin. Subpages reuse these primitives directly.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BRAND TOKENS
   These are constant across the whole site. Change a value here and every
   page — home and subpages — follows.
   -------------------------------------------------------------------------- */
:root {
  /* Medical blue */
  --fc-blue:            #1E558B;
  --fc-blue-deep:       #143A61;
  --fc-blue-tint:       #E8EFF7;

  /* Medical green */
  --fc-green:           #5DA645;
  --fc-green-bright:    #74C255;
  --fc-green-mint:      #B5E5A0;
  --fc-green-deep:      #2F5E21;
  --fc-green-tint:      #EEF7EA;

  /* Navy / ink — the dark ground for hero, dark sections and footer.
     --fc-navy-rgb mirrors --fc-navy for use inside rgba() gradients; keep the
     two in sync if you change either. */
  --fc-navy:            #143A61;
  --fc-navy-rgb:        20, 58, 97;
  --fc-navy-deep:       #0F2B48;
  --fc-ink:             #0D2233;
  --fc-body:            #4E6675;
  --fc-muted:           #8CA2AF;  /* NON-TEXT only (icons, hairlines). 2.66:1 on white — use --fc-body for any copy. */

  /* Surfaces */
  --fc-white:           #FFFFFF;
  --fc-surface:         #F2F7F9;
  --fc-line:            #E4EBF0;
  --fc-line-soft:       #EDF2F5;

  /* Inverse (text on navy) */
  --fc-on-dark:         #FFFFFF;
  /* Accessible green ground: --fc-green is a foreground/accent color and is
     too light to carry body-size text. Use this for green FILL areas that
     contain copy (white text on it measures ~5.3:1). */
  --fc-green-band:      #3D7A2B;
  --fc-on-dark-soft:    #C7DAE7;
  --fc-on-dark-muted:   #9EBDD2;
  --fc-on-dark-line:    rgba(158, 189, 210, 0.24);

  /* Type */
  /* Noto Serif: a neutral institutional serif — sturdier and more matter-of-
     fact than an editorial serif, which suits a federal-channel client. Large
     x-height and generous widths, so it needs slightly TIGHTER tracking than
     Newsreader did (~-0.02em) and reads a touch larger at the same px.
     Headings only; body and UI stay on Public Sans.
     Alternative editorial serif, same token: 'Newsreader'. */
  --fc-font-head:       'Noto Serif', 'Source Serif 4', Georgia, serif;
  --fc-font-head-sans:  'Public Sans', system-ui, -apple-system, sans-serif;
  --fc-font-body:       'Public Sans', system-ui, -apple-system, sans-serif;
  --fc-font-mono:       'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --fc-font-display:    'Instrument Serif', Georgia, serif;

  /* Layout */
  --fc-container:       1280px;
  --fc-gutter:          36px;
  --fc-section-y:       104px;

  /* Scale */
  --fc-s1: 8px;
  --fc-s2: 12px;
  --fc-s3: 16px;
  --fc-s4: 24px;
  --fc-s5: 32px;
  --fc-s6: 48px;
  --fc-s7: 64px;

  /* Shape + motion */
  --fc-radius-sm:       6px;
  --fc-radius:          10px;
  --fc-radius-lg:       14px;
  --fc-radius-pill:     100px;
  --fc-t:               0.2s ease;
  /* Headline-scale only (3.34:1 on white). Never for body copy. */
  --fc-blue-soft:       #6E90B0;
}

/* --------------------------------------------------------------------------
   2. THEME SCOPES
   Put ONE of these on the outermost wrapper of a page or section.

     .fc-theme-clinical   white / navy / blue+green   (v1, v4)
     .fc-theme-editorial  warm off-white, serif accents (v2, v3)

   Subpages: pick the theme that matches the page you are extending.
   -------------------------------------------------------------------------- */
.fc-theme-clinical {
  --fc-page:            var(--fc-white);
  --fc-page-alt:        var(--fc-surface);
  --fc-text:            var(--fc-ink);
  --fc-text-soft:       var(--fc-body);
  --fc-heading-font:    var(--fc-font-head);
  --fc-accent:          var(--fc-green);      /* non-text accents only */
  --fc-accent-ink:      var(--fc-green-band);  /* green text on light grounds */
}

.fc-theme-editorial {
  --fc-page:            #F7F5F1;
  --fc-page-alt:        #F2EFE9;
  --fc-text:            #131A1C;
  --fc-text-soft:       #394346;
  --fc-line:            #DFDAD1;
  --fc-line-soft:       #EFEBE4;
  --fc-muted:           #9AA1A2;
  --fc-navy:            #131A1C;
  --fc-heading-font:    'Inter Tight', system-ui, sans-serif;
  --fc-accent:          #3D7A2B;
  --fc-accent-ink:      #2F5E21;
}

/* --------------------------------------------------------------------------
   3. BASE
   Scoped to .fc-wrap so nothing leaks into the Oxygen builder UI or
   any other content on the page.
   -------------------------------------------------------------------------- */
.fc-wrap {
  font-family: var(--fc-font-body);
  color: var(--fc-text, var(--fc-ink));
  background: var(--fc-page, var(--fc-white));
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.fc-wrap *,
.fc-wrap *::before,
.fc-wrap *::after { box-sizing: border-box; }

/* Zero-specificity reset via :where() so utilities (.fc-mb-*, .fc-mt-*) and
   component margin rules always win. Do not rewrite this as a plain selector
   list — that raises specificity and silently kills the spacing system. */
.fc-wrap :where(p, h1, h2, h3, h4, figure, ul, ol) { margin: 0; }

.fc-wrap img { max-width: 100%; height: auto; display: block; }

/* The negation is load-bearing, and so is :where() around it.
   Without the negation, this descendant rule (0,1,1) outranks every
   .fc-btn--* variant (0,1,0) and repaints buttons link-blue, because every
   button on the site is authored as an <a>. Wrapping it in :where() keeps the
   selector at (0,1,1) so component link rules like .fc-topbar a and
   .fc-footer a still win. A bare :not(.fc-btn) would be (0,2,1) and break them. */
.fc-wrap a:not(:where(.fc-btn)) { color: var(--fc-blue); text-decoration: none; transition: color var(--fc-t); }
.fc-wrap a:not(:where(.fc-btn)):hover { color: var(--fc-green-band); }

/* Same :where() trick as the link reset above. A bare .fc-wrap button is
   (0,1,1) and would outrank the (0,1,0) component rules, stripping the
   background off .fc-btn and the border off .fc-nav-toggle. Wrapping the
   exclusions in :where() keeps this selector at (0,1,1) while letting those
   components win. .fc-nav__trigger needs no exclusion: it declares its own
   background and border. */
.fc-wrap button:not(:where(.fc-btn, .fc-nav-toggle)) {
  font: inherit;
  border: 0;
  background: none;
  cursor: pointer;
  color: inherit;
}

html { scroll-behavior: smooth; }

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.fc-container {
  max-width: var(--fc-container);
  margin: 0 auto;
  padding-left: var(--fc-gutter);
  padding-right: var(--fc-gutter);
}

.fc-section { padding-top: var(--fc-section-y); padding-bottom: var(--fc-section-y); }
.fc-section--tight { padding-top: 72px; padding-bottom: 72px; }
.fc-section--flush-top { padding-top: 0; }

.fc-bg-white   { background: var(--fc-white); }
.fc-bg-surface { background: var(--fc-page-alt, var(--fc-surface)); }
.fc-bg-navy    { background: var(--fc-navy); color: var(--fc-on-dark); }
.fc-bg-blue    { background: var(--fc-blue); color: var(--fc-on-dark); }
.fc-bg-green   { background: var(--fc-green-band); color: var(--fc-on-dark); }

.fc-rule-top    { border-top: 1px solid var(--fc-line); }

/* Anchor targets must clear the sticky header when jumped to, or the heading
   lands underneath it. Applied to any element with an id inside the wrapper. */
.fc-wrap [id] { scroll-margin-top: 120px; }
.fc-rule-bottom { border-bottom: 1px solid var(--fc-line); }

/* Grids */
.fc-grid { display: grid; gap: var(--fc-s4); }
.fc-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fc-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fc-grid--gap-lg { gap: var(--fc-s7); }

/* Asymmetric splits used across the site */
.fc-split        { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--fc-s7); }
.fc-split--wide  { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
.fc-split--narrow{ grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
.fc-split--center{ align-items: center; }
.fc-split--start { align-items: start; }

/* Hairline grid: 1px dividers via background bleed */
.fc-hairline-grid {
  display: grid;
  gap: 1px;
  background: var(--fc-line);
}
.fc-hairline-grid > * { background: var(--fc-page, var(--fc-white)); }
.fc-hairline-grid--dark { background: var(--fc-on-dark-line); }
.fc-hairline-grid--dark > * { background: var(--fc-navy); }

.fc-flex { display: flex; gap: var(--fc-s3); }
.fc-flex--between { justify-content: space-between; }
.fc-flex--center { align-items: center; }
.fc-flex--end { align-items: flex-end; }
.fc-flex--baseline { align-items: baseline; }
.fc-flex--wrap { flex-wrap: wrap; }
.fc-flex--col { flex-direction: column; }

.fc-stack { display: flex; flex-direction: column; gap: var(--fc-s4); }
.fc-stack--sm { gap: var(--fc-s2); }

.fc-measure { max-width: 66ch; }
.fc-measure--sm { max-width: 46ch; }

/* --------------------------------------------------------------------------
   5. TYPE
   -------------------------------------------------------------------------- */
.fc-eyebrow {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fc-accent-ink, var(--fc-green-band)); /* green INK on light grounds: --fc-green is 3.0:1 at this size */
}
.fc-eyebrow--muted { color: var(--fc-body); } /* not --fc-muted: 2.66:1 at 12.5px */
.fc-eyebrow--mint  { color: var(--fc-green-mint); }
.fc-eyebrow--mono  { font-family: var(--fc-font-mono); font-weight: 500; font-size: 11.5px; letter-spacing: 0.14em; }

.fc-h1 {
  font-family: var(--fc-heading-font, var(--fc-font-head));
  font-weight: 600;
  font-size: clamp(44px, 5.4vw, 74px);
  line-height: 1.06;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

.fc-h2 {
  font-family: var(--fc-heading-font, var(--fc-font-head));
  font-weight: 600;
  font-size: clamp(32px, 3.4vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.fc-h3 {
  font-family: var(--fc-heading-font, var(--fc-font-head));
  font-weight: 600;
  font-size: 30px;
  line-height: 1.18;
  letter-spacing: -0.013em;
  text-wrap: balance;
}

.fc-h4 {
  font-family: var(--fc-heading-font, var(--fc-font-head));
  font-weight: 600;
  font-size: 21px;
  line-height: 1.28;
  letter-spacing: -0.01em;
}

.fc-lead {
  font-size: 21px;
  line-height: 1.55;
  color: var(--fc-text-soft, var(--fc-body));
  text-wrap: pretty;
}

.fc-text {
  font-size: 17.5px;
  line-height: 1.65;
  color: var(--fc-text-soft, var(--fc-body));
}
.fc-text--sm { font-size: 16px; line-height: 1.6; }

.fc-serif {
  font-family: var(--fc-font-display);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.01em;
}

.fc-accent-text { color: var(--fc-accent, var(--fc-green)); }
.fc-strong { font-weight: 600; color: var(--fc-text, var(--fc-ink)); }

.fc-pull {
  border-left: 3px solid var(--fc-accent, var(--fc-green));
  padding: 4px 0 4px 22px;
}
.fc-pull p {
  font-family: var(--fc-heading-font, var(--fc-font-head));
  font-weight: 600;
  font-size: 21px;
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: var(--fc-text, var(--fc-ink));
}

/* Inverse text on dark grounds.
   IMPORTANT: .fc-h*, .fc-lead and .fc-text all set their own color, so they do
   NOT inherit a dark component's color — every component that paints its own
   dark background must be listed here, not just the .fc-bg-* utilities.
   Add new dark components to all three selector lists below. */
.fc-bg-navy .fc-h1,
.fc-bg-navy .fc-h2,
.fc-bg-navy .fc-h3,
.fc-bg-navy .fc-h4,
.fc-bg-blue .fc-h2,
.fc-bg-green .fc-h2,
.fc-cta .fc-h2,
.fc-footer .fc-h3,
.fc-footer .fc-h4 { color: var(--fc-on-dark); }

.fc-cta .fc-lead,
.fc-footer .fc-lead { color: var(--fc-on-dark); }

.fc-bg-navy .fc-lead,
.fc-bg-blue .fc-lead { color: var(--fc-on-dark-soft); }

.fc-bg-navy .fc-text,
.fc-bg-navy .fc-text--sm,
.fc-cta .fc-text,
.fc-cta .fc-text--sm,
.fc-footer .fc-text,
.fc-footer .fc-text--sm { color: var(--fc-on-dark-muted); }

/* --------------------------------------------------------------------------
   6. BUTTONS
   -------------------------------------------------------------------------- */
.fc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--fc-font-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  padding: 16px 30px;
  border-radius: var(--fc-radius-sm);
  /* Declared here on purpose: the .fc-wrap link rule excludes .fc-btn (so
     buttons keep their variant color), which also excludes them from its
     text-decoration:none. The component must own this itself. */
  text-decoration: none;
  border: 1px solid transparent;
  transition: background var(--fc-t), color var(--fc-t), border-color var(--fc-t);
  text-align: center;
}

.fc-btn--primary { background: var(--fc-blue); color: var(--fc-white); }
.fc-btn--primary:hover { background: var(--fc-green-band); color: var(--fc-white); }

/* Green buttons use --fc-green-band, not --fc-green: white on the accent
   green is only 3.46:1. Hover goes deeper, never lighter. */
.fc-btn--green { background: var(--fc-green-band); color: var(--fc-white); }
.fc-btn--green:hover { background: var(--fc-green-deep); color: var(--fc-white); }

.fc-btn--ink { background: var(--fc-navy); color: var(--fc-white); }
.fc-btn--ink:hover { background: var(--fc-green-band); color: var(--fc-white); }

.fc-btn--white { background: var(--fc-white); color: var(--fc-navy); }
.fc-btn--white:hover { background: var(--fc-green-band); color: var(--fc-white); }

.fc-btn--ghost { border-color: var(--fc-line); color: var(--fc-text, var(--fc-ink)); }
.fc-btn--ghost:hover { border-color: var(--fc-green); color: var(--fc-green-band); }

.fc-btn--ghost-light { border-color: rgba(199, 218, 231, 0.45); color: var(--fc-white); }
.fc-btn--ghost-light:hover { border-color: var(--fc-white); background: rgba(255, 255, 255, 0.08); color: var(--fc-white); }

.fc-btn--pill { border-radius: var(--fc-radius-pill); }
.fc-btn--sm { font-size: 15px; padding: 12px 22px; }
.fc-btn--block { width: 100%; }

.fc-link-arrow {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--fc-blue);
  border-bottom: 2px solid var(--fc-green);
  padding-bottom: 4px;
  display: inline-block;
  /* A flex or grid parent blockifies this child, stretching the underline
     border across the whole container. Keeps it sized to the text. */
  align-self: flex-start;
  justify-self: start;
}
.fc-link-arrow:hover { color: var(--fc-green-band); }

/* Inline body-text link with a leading arrow. Unlike .fc-link-arrow this
   carries no underline rule, so it sits inside a paragraph without breaking
   the line rhythm. The arrow is a CSS chevron, so no icon font is needed. */
.fc-link-lead {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  font-weight: 600;
  color: var(--fc-blue);
}
.fc-link-lead::before {
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  border-top: 2px solid var(--fc-green);
  border-right: 2px solid var(--fc-green);
  transform: rotate(45deg) translateY(1px);
  transition: transform var(--fc-t), border-color var(--fc-t);
}
.fc-link-lead:hover { color: var(--fc-green-band); }
.fc-link-lead:hover::before { transform: rotate(45deg) translate(2px, -1px); }

/* On dark grounds. */
.fc-link-lead--light { color: var(--fc-white); }
.fc-link-lead--light::before { border-color: var(--fc-green-mint); }
.fc-link-lead--light:hover { color: var(--fc-green-mint); }

/* --------------------------------------------------------------------------
   7. CARDS, MEDIA, BADGES
   -------------------------------------------------------------------------- */
.fc-card {
  background: var(--fc-white);
  border: 1px solid var(--fc-line);
  border-radius: var(--fc-radius);
  padding: 34px 30px 36px;
  display: flex;
  flex-direction: column;
  gap: var(--fc-s2);
  transition: border-color var(--fc-t);
}
.fc-card:hover { border-color: var(--fc-green); }
.fc-card--flush { padding: 0; overflow: hidden; }
.fc-card--flush .fc-card__body { padding: 30px 28px 34px; display: flex; flex-direction: column; gap: var(--fc-s2); flex: 1; }
.fc-card--pad-lg { padding: 44px; }
.fc-card--top-blue  { border-top: 3px solid var(--fc-blue); }
.fc-card--top-green { border-top: 3px solid var(--fc-green); }

.fc-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(158, 189, 210, 0.4);
  border-radius: var(--fc-radius-pill);
  padding: 8px 16px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fc-green-mint);
}
.fc-badge--light { border-color: var(--fc-line); color: var(--fc-green-deep); }

.fc-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--fc-green); display: block; flex: none; }

/* Image placeholders — legacy (v5/v6). New work uses .fc-duo below, which
   carries the duotone treatment and a class-swap placeholder. */
.fc-media {
  border-radius: var(--fc-radius-sm);
  overflow: hidden;
  background: var(--fc-navy);
  position: relative;
}
.fc-media > img { width: 100%; height: 100%; object-fit: cover; }
.fc-media--4x3  { aspect-ratio: 4 / 3; }
.fc-media--16x10{ aspect-ratio: 16 / 10; }
.fc-media--5x4  { aspect-ratio: 5 / 4; }
.fc-media--21x8 { aspect-ratio: 21 / 8; }
.fc-media--blue { background: var(--fc-blue); }
.fc-media--green{ background: var(--fc-green-band); }

.fc-media__note {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 20px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--fc-on-dark);
  background-image: repeating-linear-gradient(135deg,
    rgba(255, 255, 255, 0.14) 0px, rgba(255, 255, 255, 0.14) 2px,
    transparent 2px, transparent 12px);
}

/* --------------------------------------------------------------------------
   7b. DUOTONE IMAGES  (.fc-duo)
   Universal primitive — used on every page, so it lives here, not in a page
   sheet. Promoted out of fedcom-v7.css.

   The effect: a grayscale photo blended in luminosity mode over a solid blue
   ground. The blue supplies hue, the photo supplies only light and shade. No
   image editing needed — drop any <img> in and it inherits the treatment.

   isolation:isolate is REQUIRED. Without it the blend mode reaches past the
   container and mixes with whatever sits behind it.

   PLACEHOLDER WORKFLOW
   Every slot ships as a real <img> pointing at its intended WordPress media
   URL, with .is-placeholder on the WRAPPER and the note in data-ph:

     <div class="fc-duo fc-duo--4x3 is-placeholder"
          data-ph="Federal facility exterior · 1600×1200">
       <img src="/wp-content/uploads/fedcom-facilities.jpg" alt="...">
     </div>

   To go live: upload the file to that path and DELETE ` is-placeholder`.
   Nothing else changes — no swapping elements, no markup restructuring.
   -------------------------------------------------------------------------- */
.fc-duo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--fc-duo-ground, var(--fc-navy));
}
.fc-duo > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.06) brightness(1.02);
  mix-blend-mode: luminosity;
  opacity: var(--fc-duo-strength, 0.62);
}
/* Lifts the shadows so the duotone does not read as flat navy. */
.fc-duo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg,
    rgba(30, 85, 139, 0.4) 0%,
    rgba(20, 58, 97, 0.14) 52%,
    rgba(15, 43, 72, 0.5) 100%);
  pointer-events: none;
}
/* Opt out of the duotone and show the photo as shot. Portraits are the main
   case: the blue blend flattens skin tones and reads as a stylised graphic
   rather than a person. Keeps the ratio, radius and placeholder behaviour. */
.fc-duo--plain { background-color: var(--fc-surface); }
.fc-duo--plain > img {
  filter: none;
  mix-blend-mode: normal;
  opacity: 1;
}
.fc-duo--plain::after { display: none; }

.fc-duo--4x3  { aspect-ratio: 4 / 3; }
.fc-duo--16x10{ aspect-ratio: 16 / 10; }
.fc-duo--5x4  { aspect-ratio: 5 / 4; }
.fc-duo--3x4  { aspect-ratio: 3 / 4; }
.fc-duo--1x1  { aspect-ratio: 1 / 1; }
.fc-duo--21x8 { aspect-ratio: 21 / 8; }

/* Placeholder state. Hides the (probably missing) image and draws the striped
   box over it, labelled from data-ph. Delete the class to go live. */
.fc-duo.is-placeholder > img { opacity: 0; }
.fc-duo.is-placeholder::before {
  content: attr(data-ph);
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  padding: 18px;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.88);
  background-color: var(--fc-duo-ground, var(--fc-navy));
  background-image: repeating-linear-gradient(135deg,
    rgba(255, 255, 255, 0.13) 0px, rgba(255, 255, 255, 0.13) 2px,
    transparent 2px, transparent 12px);
}

/* Same idea for hero-style background-image sections. Add .fc-photo-ph to the
   photo layer so it can carry a placeholder state, then .is-placeholder while
   the real file is outstanding — stripes plus the data-ph label, same
   one-class-deletion workflow as the <img> slots above. */
.fc-photo-ph.is-placeholder::before {
  content: attr(data-ph);
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  padding: 18px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.9);
  background-image: repeating-linear-gradient(135deg,
    rgba(255, 255, 255, 0.1) 0px, rgba(255, 255, 255, 0.1) 2px,
    transparent 2px, transparent 14px);
}

/* --------------------------------------------------------------------------
   8. COMPARISON TABLE (used on the homepage, reusable on subpages)
   -------------------------------------------------------------------------- */
.fc-table { border: 1px solid var(--fc-line); border-radius: var(--fc-radius-lg); overflow: hidden; }
.fc-table__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--fc-line-soft); }
.fc-table__row:last-child { border-bottom: 0; }
.fc-table__head { background: var(--fc-surface); border-bottom: 1px solid var(--fc-line); }
.fc-table__head > * {
  padding: 18px 24px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fc-body); /* not --fc-muted: 2.46:1 on --fc-surface */
}
.fc-table__head .fc-table__ours { color: var(--fc-white); background: var(--fc-navy); }
.fc-table__label   { padding: 19px 24px; font-size: 15.5px; font-weight: 600; color: var(--fc-navy); min-width: 0; overflow-wrap: anywhere; }
.fc-table__theirs  { padding: 19px 24px; font-size: 15.5px; color: var(--fc-body); min-width: 0; overflow-wrap: anywhere; } /* --fc-muted is 2.66:1 at this size; --fc-body still reads as the secondary column */
.fc-table__ours    { padding: 19px 24px; font-size: 15.5px; font-weight: 600; color: var(--fc-green-deep); background: var(--fc-green-tint); display: flex; align-items: center; gap: 10px; min-width: 0; overflow-wrap: anywhere; }

/* --------------------------------------------------------------------------
   9. HEADER / TOP BAR / FOOTER
   -------------------------------------------------------------------------- */
/* Opaque, not translucent: the top bar sits in normal flow ABOVE the hero, so
   any alpha would composite against the white wrapper and turn grey.
   position/z-index keep it above the z-index:60 absolute overlay header. */
.fc-topbar {
  position: relative;
  z-index: 70;
  background: var(--fc-navy-deep);
  color: var(--fc-on-dark-muted);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.fc-topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--fc-s4); flex-wrap: wrap;
  padding-top: 10px; padding-bottom: 10px;
  font-size: 13px; font-weight: 500; letter-spacing: 0.03em;
  padding-top: 9px;
  padding-bottom: 9px;
}
.fc-topbar a { color: var(--fc-white); }
.fc-topbar a:hover { color: var(--fc-green-mint); }

.fc-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--fc-line);
}
.fc-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--fc-s5); padding-top: 18px; padding-bottom: 18px;
}
.fc-logo { display: flex; align-items: center; gap: 13px; color: inherit; }
.fc-logo:hover { color: inherit; }
.fc-logo__mark {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 8px;
  background: linear-gradient(140deg, var(--fc-blue) 0%, var(--fc-green) 100%);
  color: var(--fc-white);
  font-family: var(--fc-font-head-sans); font-weight: 700; font-size: 15px; letter-spacing: -0.02em;
}
.fc-logo__text { display: flex; flex-direction: column; line-height: 1; }
.fc-logo__name { font-family: var(--fc-font-head-sans); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; color: var(--fc-navy); }
.fc-logo__sub  { font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fc-body); margin-top: 5px; }

/* Image logo. Replaces the .fc-logo__mark + .fc-logo__text lockup entirely:
   use ONE or the other, not both.

   Height drives the size; width:auto keeps the aspect ratio whatever the file
   is. --fc-logo-h lets a page or breakpoint override it without a new rule.

   The overlay header sits on a dark hero at rest and turns white when
   scrolled, so a single-colour logo can only be legible in one of the two
   states. Two ways to handle it:
     a) supply two files and swap them (.fc-logo__img--light / --dark below)
     b) supply one dark-ink logo and let the rest state brighten it
   Option (a) is sharper; (b) needs no second export. */
.fc-logo__img {
  display: block;
  height: var(--fc-logo-h, 46px);
  width: auto;
  max-width: 100%;
}

/* (a) Two files. Both ship in the markup; CSS shows whichever fits the state. */
.fc-logo__img--light { display: block; }   /* for the transparent/dark state */
.fc-logo__img--dark  { display: none; }    /* for the white/scrolled state  */
.fc-header--overlay.is-stuck .fc-logo__img--light,
.fc-light-header .fc-header--overlay .fc-logo__img--light { display: none; }
.fc-header--overlay.is-stuck .fc-logo__img--dark,
.fc-light-header .fc-header--overlay .fc-logo__img--dark { display: block; }

/* (b) One dark-ink file. Knocks it to white while the header is transparent,
   then restores the original once the header goes solid. brightness(0) first
   flattens any colour so invert lands on a clean white. */
.fc-logo__img--invert-on-dark {
  filter: brightness(0) invert(1);
  transition: filter 0.2s ease;
}
.fc-header--overlay.is-stuck .fc-logo__img--invert-on-dark,
.fc-light-header .fc-header--overlay .fc-logo__img--invert-on-dark {
  filter: none;
}

@media (max-width: 600px) {
  .fc-logo__img { height: var(--fc-logo-h-sm, 38px); }
}

.fc-nav { display: flex; align-items: center; gap: 30px; }
.fc-nav a:not(:where(.fc-btn)) { font-size: 15px; font-weight: 600; color: #33495A; }
.fc-nav a:not(:where(.fc-btn)):hover { color: var(--fc-green-band); }

/* --------------------------------------------------------------------------
   DROPDOWN MENU
   Desktop: opens on hover AND on :focus-within, so it is keyboard reachable
   with no JS. JS only adds click-toggle behaviour for touch and mobile.

   The panel is positioned against .fc-nav__group, not .fc-nav, so it aligns
   under its own trigger. The group keeps a transparent bridge (::after) so
   the pointer can cross the gap to the panel without it closing.
   -------------------------------------------------------------------------- */
.fc-nav__group { position: relative; display: flex; align-items: center; }

.fc-nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: #33495A;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: color var(--fc-t);
}
.fc-nav__trigger:hover { color: var(--fc-green-band); }

/* Caret drawn in CSS so it can rotate on open: no icon font, no SVG. */
.fc-nav__caret {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.7;
  transition: transform 0.22s ease, opacity 0.22s ease;
}
.fc-nav__group:hover .fc-nav__caret,
.fc-nav__group:focus-within .fc-nav__caret,
.fc-nav__group.is-open .fc-nav__caret { transform: rotate(180deg); opacity: 1; }

/* Hover bridge across the gap below the trigger. */
.fc-nav__group::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 16px;
}

.fc-nav__panel {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 306px;
  padding: 10px;
  background: var(--fc-white);
  border: 1px solid var(--fc-line);
  border-radius: var(--fc-radius);
  box-shadow: 0 18px 44px rgba(15, 43, 72, 0.16);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  z-index: 80;
}
/* Green hairline along the top edge, the accent the cards already use. */
.fc-nav__panel::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 18px;
  right: 18px;
  height: 2px;
  background: var(--fc-green);
  border-radius: 2px;
}
.fc-nav__group:hover .fc-nav__panel,
.fc-nav__group:focus-within .fc-nav__panel,
.fc-nav__group.is-open .fc-nav__panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Each item is a title plus one line of description. */
.fc-nav__panel a.fc-nav__item {
  display: block;
  padding: 13px 15px;
  border-radius: var(--fc-radius-sm);
  transition: background var(--fc-t);
}
.fc-nav__panel a.fc-nav__item:hover { background: var(--fc-surface); }
.fc-nav__item-title {
  display: block;
  font-family: var(--fc-font-head);
  font-weight: 600;
  font-size: 16.5px;
  letter-spacing: -0.01em;
  color: var(--fc-navy);
  margin-bottom: 3px;
  transition: color var(--fc-t);
}
.fc-nav__panel a.fc-nav__item:hover .fc-nav__item-title { color: var(--fc-blue); }
.fc-nav__item-desc {
  display: block;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--fc-body);
}

/* Mobile nav toggle — hidden until the 992px breakpoint */
/* Excluded from the .fc-wrap button reset above, so it must declare its own
   background and font or it falls through to UA button chrome (a grey box in
   MS Shell Dlg). */
.fc-nav-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: var(--fc-radius-sm); border: 1px solid var(--fc-line); background: none; font: inherit; cursor: pointer; appearance: none; -webkit-appearance: none; }
.fc-nav-toggle span { display: block; width: 20px; height: 2px; background: var(--fc-navy); position: relative; }
.fc-nav-toggle span::before,
.fc-nav-toggle span::after { content: ''; position: absolute; left: 0; width: 20px; height: 2px; background: var(--fc-navy); }
.fc-nav-toggle span::before { top: -6px; }
.fc-nav-toggle span::after  { top: 6px; }

.fc-footer { background: var(--fc-navy); color: var(--fc-on-dark-muted); }
.fc-footer a { color: var(--fc-on-dark-muted); font-size: 15px; }
.fc-footer a:hover { color: var(--fc-white); }
.fc-footer__top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--fc-s6); padding-top: var(--fc-s7); padding-bottom: 44px; }
.fc-footer__col { display: flex; flex-direction: column; gap: 11px; }
.fc-footer__heading { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fc-white); margin-bottom: 5px; }
.fc-footer__bar { border-top: 1px solid rgba(158, 189, 210, 0.2); }
.fc-footer__bar-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--fc-s4); flex-wrap: wrap; padding-top: 20px; padding-bottom: 20px; font-size: 13.5px; color: var(--fc-on-dark-muted); }
.fc-footer__bar-inner a { font-size: 13.5px; color: var(--fc-on-dark-muted); }

/* --------------------------------------------------------------------------
   7c. TEXTURE — diagonal hairlines, behind content only
   -------------------------------------------------------------------------- */
.fc-texture { position: relative; }
.fc-texture::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(112deg,
    rgba(20, 58, 97, 0.055) 0px, rgba(20, 58, 97, 0.055) 1px,
    transparent 1px, transparent 74px);
  pointer-events: none;
}
.fc-texture > * { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   9b. SECTION HEADS — the v7 pattern: title, one-line subtitle, one link
   -------------------------------------------------------------------------- */
.fc-shead { max-width: 640px; margin-left: auto; margin-right: auto; text-align: center; }
.fc-shead--left { margin-left: 0; margin-right: 0; text-align: left; }
.fc-shead__title {
  font-family: var(--fc-font-head);
  font-weight: 600;
  font-size: 34px;
  line-height: 1.18;
  letter-spacing: -0.014em;
  color: var(--fc-navy);
  margin-bottom: 14px;
  text-wrap: balance;
}
.fc-shead__title em { font-style: normal; color: #6C8093; display: block; }
.fc-shead__sub {
  font-size: 17.5px;
  line-height: 1.58;
  color: var(--fc-body);
  margin-bottom: 26px;
  text-wrap: pretty;
}
.fc-shead--dark .fc-shead__title { color: var(--fc-white); }
.fc-shead--dark .fc-shead__title em { color: rgba(255, 255, 255, 0.58); }
.fc-shead--dark .fc-shead__sub { color: rgba(255, 255, 255, 0.82); }
.fc-shead__actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.fc-shead--left .fc-shead__actions { justify-content: flex-start; }

/* --------------------------------------------------------------------------
   9c. PAGE HERO  (.fc-phero)
   The compact hero every sub-page opens with. Shorter than the homepage's
   .fc-hero and always dark, so the overlay header's white logo and nav stay
   legible without the light-header variant.

   Photo is optional: with no <img> the ground is flat navy, which is the
   right default for pages with no photography yet.
   -------------------------------------------------------------------------- */
.fc-phero {
  position: relative;
  isolation: isolate;
  background: var(--fc-navy);
  color: var(--fc-on-dark);
  overflow: hidden;
}
.fc-phero__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: 70% center;
}
.fc-phero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg,
    rgba(15, 43, 72, 0.96) 0%,
    rgba(15, 43, 72, 0.9) 48%,
    rgba(20, 58, 97, 0.72) 100%);
}
/* Top padding clears the fixed header (top bar + nav) plus breathing room. */
.fc-phero__inner {
  position: relative;
  padding-top: 206px;
  padding-bottom: 88px;
  max-width: 780px;
}
.fc-phero__title {
  font-family: var(--fc-font-head);
  font-weight: 600;
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--fc-white);
  margin-bottom: 20px;
  text-wrap: balance;
}
.fc-phero__lead {
  font-size: 20px;
  line-height: 1.55;
  color: var(--fc-on-dark-soft);
  max-width: 620px;
  text-wrap: pretty;
}
@media (max-width: 1200px) { .fc-phero__inner { padding-top: 188px; padding-bottom: 76px; } }
@media (max-width: 768px) {
  .fc-phero__inner { padding-top: 152px; padding-bottom: 64px; }
  .fc-phero__title { font-size: 32px; }
  .fc-phero__lead { font-size: 16.5px; }
}
@media (max-width: 480px) { .fc-phero__inner { padding-top: 136px; } }

/* --------------------------------------------------------------------------
   9d. OVERLAY HEADER
   -------------------------------------------------------------------------- */
.fc-header--overlay {
  position: absolute;
  top: var(--fc-topbar-h, 41px);
  left: 0; right: 0;
  z-index: 60;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  /* Slow, ease-out crossfade. 0.25s ease read as a snap because the colour
     jump is large (transparent → opaque white); 0.45s on a decelerating curve
     lands softly. The nav/logo colours below transition on the same timing so
     the whole bar changes as one thing rather than the ground easing while the
     text snaps. */
  transition: background 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
              border-color 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
              backdrop-filter 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
              -webkit-backdrop-filter 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.fc-header--overlay .fc-logo__name,
.fc-header--overlay .fc-logo__sub,
.fc-header--overlay .fc-nav a:not(:where(.fc-btn)),
.fc-header--overlay .fc-nav-toggle,
.fc-header--overlay .fc-nav-toggle span,
.fc-header--overlay .fc-nav-toggle span::before,
.fc-header--overlay .fc-nav-toggle span::after {
  transition: color 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
              background 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
              border-color 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.fc-header--overlay .fc-logo__name { color: var(--fc-white); }
.fc-header--overlay .fc-logo__sub { color: rgba(255, 255, 255, 0.72); }
/* The panel is always a white card, so its ink must not inherit the overlay's
   white-on-dark treatment. */
.fc-header--overlay .fc-nav__panel a:not(:where(.fc-btn)) { color: var(--fc-navy); }
.fc-header--overlay .fc-nav__panel .fc-nav__item-desc { color: var(--fc-body); }
.fc-header--overlay .fc-nav a:not(:where(.fc-btn)),
.fc-header--overlay .fc-nav__trigger { color: rgba(255, 255, 255, 0.92); }
.fc-header--overlay .fc-nav a:not(:where(.fc-btn)):hover,
.fc-header--overlay .fc-nav__trigger:hover { color: var(--fc-green-mint); }
.fc-header--overlay .fc-nav-toggle { border-color: rgba(255, 255, 255, 0.4); }
.fc-header--overlay .fc-nav-toggle span,
.fc-header--overlay .fc-nav-toggle span::before,
.fc-header--overlay .fc-nav-toggle span::after { background: var(--fc-white); }

.fc-header--overlay.is-stuck {
  position: fixed;
  top: 0;
  background: rgba(255, 255, 255, 0.96);
  border-bottom-color: var(--fc-line);
  box-shadow: 0 2px 18px rgba(15, 43, 72, 0.09);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.fc-header--overlay.is-stuck .fc-logo__name { color: var(--fc-navy); }
.fc-header--overlay.is-stuck .fc-logo__sub { color: var(--fc-body); }
.fc-header--overlay.is-stuck .fc-nav a:not(:where(.fc-btn)),
.fc-header--overlay.is-stuck .fc-nav__trigger { color: #33495A; }
.fc-header--overlay.is-stuck .fc-nav a:not(:where(.fc-btn)):hover,
.fc-header--overlay.is-stuck .fc-nav__trigger:hover { color: var(--fc-green-band); }
/* Ghost buttons are light-on-transparent over the hero. Once the header goes
   white they must flip to the dark ghost, or they vanish. The is-stuck nav
   rules above exclude .fc-btn, so this needs its own rule. */
.fc-header--overlay.is-stuck .fc-nav .fc-btn--ghost-light {
  border-color: var(--fc-line);
  color: #33495A;
}
.fc-header--overlay.is-stuck .fc-nav .fc-btn--ghost-light:hover {
  border-color: var(--fc-green);
  background: transparent;
  color: var(--fc-green-band);
}

.fc-header--overlay.is-stuck .fc-nav-toggle { border-color: var(--fc-line); }
.fc-header--overlay.is-stuck .fc-nav-toggle span,
.fc-header--overlay.is-stuck .fc-nav-toggle span::before,
.fc-header--overlay.is-stuck .fc-nav-toggle span::after { background: var(--fc-navy); }

/* --------------------------------------------------------------------------
   7d. SIGNPOST CARDS — photo, label, one line, learn-more
   -------------------------------------------------------------------------- */
.fc-signposts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.fc-signpost {
  display: flex;
  flex-direction: column;
  background: var(--fc-white);
  border-radius: 14px;
  padding: 10px 10px 0;
  box-shadow: 0 2px 14px rgba(15, 43, 72, 0.07);
  transition: transform var(--fc-t), box-shadow var(--fc-t);
}
.fc-signpost:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(15, 43, 72, 0.12); }
.fc-signpost .fc-duo { border-radius: 9px; }
.fc-signpost__body { padding: 20px 18px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.fc-signpost__title {
  font-family: var(--fc-font-head);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.008em;
  color: var(--fc-navy);
}
.fc-signpost__text { font-size: 15.5px; line-height: 1.55; color: var(--fc-body); }
/* align-self: the flex column blockifies this child, which would stretch the
   underline border across the whole card. */
.fc-signpost__body .fc-link-arrow { margin-top: auto; padding-top: 12px; align-self: flex-start; }

/* --------------------------------------------------------------------------
   9e. PRINCIPLES — short assertions, set large
   These are claims, not prose, so they are set in the display serif at a size
   that makes them read as statements. Numbered rows rather than bullets: the
   order is an argument that builds.
   -------------------------------------------------------------------------- */
.fc-principles { display: grid; gap: 0; }
.fc-principle {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 20px;
  align-items: baseline;
  padding: 26px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.fc-principle:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.fc-principle__num {
  font-family: var(--fc-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--fc-green-mint);
}
.fc-principle__text {
  font-family: var(--fc-font-head);
  font-weight: 500;
  font-size: clamp(21px, 2.3vw, 28px);
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--fc-white);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   9f. RECEIVE LIST — what a partner gets, as a hairline-divided list
   Deliberately not cards: three items with a short line each read better as a
   list than as three boxes competing with the table above them.
   -------------------------------------------------------------------------- */
.fc-receive { display: grid; gap: 0; border-top: 1px solid var(--fc-line); }
.fc-receive__item {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
  gap: 40px;
  padding: 30px 0;
  border-bottom: 1px solid var(--fc-line);
  align-items: baseline;
}
.fc-receive__title {
  font-family: var(--fc-font-head);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.28;
  letter-spacing: -0.012em;
  color: var(--fc-navy);
}
.fc-receive__text {
  font-size: 17px;
  line-height: 1.62;
  color: var(--fc-body);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   10. CTA PANEL
   -------------------------------------------------------------------------- */
.fc-cta {
  border-radius: var(--fc-radius-lg);
  padding: 80px 64px;
  background: var(--fc-blue);
  background-image: radial-gradient(760px 420px at 88% 10%, rgba(93, 166, 69, 0.5) 0%, rgba(30, 85, 139, 0) 66%);
  color: var(--fc-white);
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: 56px;
  align-items: center;
}
.fc-cta__actions { display: flex; flex-direction: column; gap: var(--fc-s2); }

/* --------------------------------------------------------------------------
   11. FORMS (plain HTML — swap for Gravity Forms when ready)
   -------------------------------------------------------------------------- */
.fc-form { display: grid; gap: var(--fc-s3); }
.fc-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fc-s3); }
.fc-form label { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fc-body); display: block; margin-bottom: 7px; } /* not --fc-muted: 2.66:1 at 13px */
.fc-form input,
.fc-form select,
.fc-form textarea {
  width: 100%;
  font: inherit;
  font-size: 16px;
  color: var(--fc-ink);
  background: var(--fc-white);
  border: 1px solid var(--fc-line);
  border-radius: var(--fc-radius-sm);
  padding: 14px 16px;
  transition: border-color var(--fc-t);
}
.fc-form input:focus,
.fc-form select:focus,
.fc-form textarea:focus { outline: none; border-color: var(--fc-green); }
.fc-form textarea { min-height: 130px; resize: vertical; }

/* --------------------------------------------------------------------------
   12. UTILITIES
   -------------------------------------------------------------------------- */
.fc-sticky { position: sticky; top: 120px; }
.fc-hide { display: none !important; }
.fc-center { text-align: center; }
.fc-mt-0 { margin-top: 0 !important; }
.fc-mt-3 { margin-top: var(--fc-s3); }
.fc-mt-4 { margin-top: var(--fc-s4); }
.fc-mt-5 { margin-top: var(--fc-s5); }
.fc-mt-6 { margin-top: var(--fc-s6); }
.fc-mb-3 { margin-bottom: var(--fc-s3); }
.fc-mb-4 { margin-bottom: var(--fc-s4); }
.fc-mb-5 { margin-bottom: var(--fc-s5); }
.fc-mb-6 { margin-bottom: var(--fc-s6); }

.fc-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   13. BREAKPOINTS — 1200 / 992 / 768 / 480
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  :root { --fc-gutter: 28px; --fc-section-y: 88px; }
  .fc-cta { padding: 64px 48px; gap: 40px; }
  .fc-card--pad-lg { padding: 36px; }
}

@media (max-width: 992px) {
  :root { --fc-section-y: 72px; }

  .fc-nav { display: none; }
  .fc-nav.is-open {
    display: flex;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--fc-white);
    border-bottom: 1px solid var(--fc-line);
    padding: var(--fc-s2) var(--fc-gutter) var(--fc-s4);
  }
  .fc-nav.is-open a { padding: 15px 0; border-bottom: 1px solid var(--fc-line-soft); }
  .fc-nav.is-open .fc-btn { margin-top: var(--fc-s3); border-bottom: 0; }
  .fc-nav-toggle { display: flex; }
  .fc-header__inner { position: relative; }

  .fc-grid--3,
  .fc-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .fc-split,
  .fc-split--wide,
  .fc-split--narrow { grid-template-columns: minmax(0, 1fr); gap: var(--fc-s6); }

  .fc-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fc-s5); }
  .fc-cta { grid-template-columns: minmax(0, 1fr); }
  .fc-sticky { position: static; }
}

@media (max-width: 768px) {
  :root { --fc-gutter: 20px; --fc-section-y: 56px; }

  .fc-h1 { font-size: clamp(34px, 8vw, 46px); }
  .fc-h2 { font-size: clamp(27px, 6vw, 34px); }
  .fc-h3 { font-size: 24px; }
  .fc-lead { font-size: 18px; }
  .fc-text { font-size: 16.5px; }

  .fc-grid--2,
  .fc-grid--3,
  .fc-grid--4 { grid-template-columns: minmax(0, 1fr); }

  .fc-table__row { grid-template-columns: minmax(0, 1fr); }
  .fc-table__head { display: none; }
  .fc-table__label { padding-bottom: 4px; border-bottom: 0; }
  /* Stacked-table labels replace the hidden header row. Override the two
     custom props in the PAGE sheet so the labels match that page's column
     headers — never hardcode a model name here. */
  .fc-table__theirs::before { content: var(--fc-table-theirs-label, 'Standard model — '); font-weight: 600; color: var(--fc-body); }
  .fc-table__theirs { padding-top: 6px; padding-bottom: 6px; }
  .fc-table__ours::before { content: var(--fc-table-ours-label, 'FedCom — '); font-weight: 700; }
  .fc-table__row { padding-bottom: 10px; }

  .fc-cta { padding: 44px 26px; }
  .fc-card--pad-lg { padding: 28px 24px; }
  .fc-form__row { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 480px) {
  .fc-logo__sub { display: none; }
  .fc-btn { width: 100%; }
  .fc-footer__top { grid-template-columns: minmax(0, 1fr); }
  .fc-topbar__inner { font-size: 12px; }
}

/* --------------------------------------------------------------------------
   14. PRINT / MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fc-wrap *,
  .fc-wrap *::before,
  .fc-wrap *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Promoted with .fc-shead from the v7 sheet. */
@media (max-width: 992px) {
  .fc-signposts { grid-template-columns: minmax(0, 1fr); gap: 20px; }

  /* Dropdown becomes an inline accordion: no floating card on a phone. */
  .fc-nav__group { display: block; width: 100%; }
  .fc-nav__group::after { display: none; }
  .fc-nav__trigger {
    width: 100%;
    justify-content: space-between;
    padding: 13px 0;
    border-bottom: 1px solid var(--fc-line-soft);
  }
  .fc-nav__panel {
    position: static;
    transform: none;
    min-width: 0;
    padding: 4px 0 8px 14px;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    display: none;
    opacity: 1;
    visibility: visible;
    z-index: auto;
  }
  .fc-nav__panel::before { display: none; }
  /* Hover and focus must NOT open it on touch; only the explicit class does. */
  .fc-nav__group:hover .fc-nav__panel,
  .fc-nav__group:focus-within .fc-nav__panel { display: none; }
  .fc-nav__group.is-open .fc-nav__panel { display: block; transform: none; }
  .fc-nav__panel a.fc-nav__item { padding: 11px 0; }
  .fc-nav__item-desc { display: none; }

  /* Overlay nav opens on a solid ground so links stay readable. */
  .fc-header--overlay .fc-nav.is-open {
    background: var(--fc-navy-deep);
    border-bottom-color: rgba(255, 255, 255, 0.16);
  }
  .fc-header--overlay .fc-nav.is-open a:not(:where(.fc-btn)) { color: var(--fc-white); border-bottom-color: rgba(255, 255, 255, 0.14); }
  .fc-header--overlay .fc-nav.is-open .fc-nav__trigger { color: var(--fc-white); border-bottom-color: rgba(255, 255, 255, 0.14); }
  .fc-header--overlay .fc-nav.is-open .fc-nav__item-title { color: rgba(255, 255, 255, 0.86); }
  .fc-header--overlay.is-stuck .fc-nav.is-open .fc-nav__trigger { color: #33495A; border-bottom-color: var(--fc-line-soft); }
  .fc-header--overlay.is-stuck .fc-nav.is-open .fc-nav__item-title { color: var(--fc-navy); }
  .fc-header--overlay.is-stuck .fc-nav.is-open { background: var(--fc-white); }
  .fc-header--overlay.is-stuck .fc-nav.is-open a:not(:where(.fc-btn)) { color: #33495A; border-bottom-color: var(--fc-line-soft); }
}

@media (max-width: 768px) {
  .fc-shead__title { font-size: 27px; }
  .fc-shead__sub { font-size: 16.5px; }
  .fc-shead__actions .fc-btn { width: 100%; }
  .fc-texture::before { background-size: 48px 48px; }
}

/* Promoted with .fc-principles and .fc-receive from the why-fedcom sheet. */
@media (max-width: 768px) {
  .fc-principle { grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 20px 0; }
  .fc-principle__text { font-size: 20px; }
  .fc-receive__item { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 24px 0; }
  .fc-receive__title { font-size: 19.5px; }
}


/* ==========================================================================
   16. ADVANTAGE ROWS (.fc-adv)
   Icon + name + description, hairline separated. Three-column grid so names
   and descriptions align across rows regardless of description length.
   ========================================================================== */
.fc-container--narrow { max-width: 1000px; }

.fc-adv__title {
  font-family: var(--fc-font-head);
  font-weight: 600;
  font-size: 34px;
  line-height: 1.18;
  letter-spacing: -0.014em;
  color: var(--fc-navy);
  margin: 0 0 14px;
  text-wrap: balance;
}
/* Second line drops to the soft blue. Headline scale only, hence the token. */
.fc-adv__title em { font-style: normal; color: var(--fc-blue-soft); display: block; }

.fc-adv__lead {
  font-size: 17.5px;
  line-height: 1.58;
  color: var(--fc-body);
  max-width: 62ch;
  margin: 0;
  text-wrap: pretty;
}

.fc-adv__divider { width: 72px; height: 3px; background: var(--fc-green); margin: 28px 0 26px; }

.fc-adv__sub { font-size: 17.5px; line-height: 1.58; color: var(--fc-body); margin: 0 0 14px; }

.fc-adv__row {
  display: grid;
  grid-template-columns: 96px minmax(0, 0.9fr) minmax(0, 1.4fr);
  gap: 36px;
  align-items: start;
  padding: 40px 0;
  border-top: 1px solid var(--fc-line);
}
.fc-adv__row:first-child { border-top: 0; }

.fc-adv__icon {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: var(--fc-surface);
  display: grid;
  place-items: center;
}
.fc-adv__icon svg {
  width: 44px; height: 44px;
  fill: none;
  stroke: var(--fc-navy);
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Bar-chart bars read as solid marks rather than outlines. */
.fc-adv__icon svg rect { fill: var(--fc-navy); stroke: none; }

.fc-adv__name {
  font-family: var(--fc-font-head);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.26;
  letter-spacing: -0.012em;
  color: var(--fc-navy);
  margin: 10px 0 0;
}
.fc-adv__text {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--fc-body);
  margin: 14px 0 0;
  text-wrap: pretty;
}

.fc-adv__cta { text-align: center; margin-top: 48px; }
.fc-adv__cta .fc-btn { padding-inline: 38px; }

/* Arrow built from a rule + rotated corner, so no icon font is needed. */
.fc-btn__arrow {
  width: 18px; height: 2px;
  background: currentColor;
  position: relative;
  margin-left: 4px;
  transition: transform var(--fc-t);
}
.fc-btn__arrow::after {
  content: '';
  position: absolute;
  right: 0; top: -4px;
  width: 9px; height: 9px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}
.fc-btn:hover .fc-btn__arrow { transform: translateX(4px); }

@media (max-width: 900px) {
  .fc-adv__row { grid-template-columns: 72px minmax(0, 1fr); gap: 24px; padding: 32px 0; }
  .fc-adv__icon { width: 72px; height: 72px; }
  .fc-adv__icon svg { width: 34px; height: 34px; }
  .fc-adv__name { margin-top: 6px; }
  .fc-adv__text { grid-column: 2; margin-top: 10px; }
}
@media (max-width: 768px) {
  .fc-adv__title { font-size: 27px; }
  .fc-adv__lead,
  .fc-adv__sub { font-size: 16.5px; }
  .fc-adv__name { font-size: 19px; }
}
@media (max-width: 560px) {
  .fc-adv__name br { display: none; }
}

/* Split variant of .fc-adv: content column plus a standing photo.
   The photo sticks while the rows scroll past, which keeps the tall 3:4
   image from leaving dead space beside the shorter content column. */
.fc-adv-split {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.8fr);
  gap: 72px;
  align-items: start;
}
.fc-adv-split__media { position: sticky; top: calc(var(--fc-header-h, 84px) + 32px); }

/* Rows lose the third column here: the content column is too narrow to keep
   name and description side by side. */
.fc-adv--stack .fc-adv__row { grid-template-columns: 76px minmax(0, 1fr); gap: 26px; padding: 32px 0; }
.fc-adv--stack .fc-adv__icon { width: 76px; height: 76px; }
.fc-adv--stack .fc-adv__icon svg { width: 36px; height: 36px; }
.fc-adv--stack .fc-adv__name { font-size: 20px; margin-top: 3px; }
.fc-adv--stack .fc-adv__text { margin-top: 10px; }

.fc-adv__cta--left { text-align: left; margin-top: 40px; }

@media (max-width: 992px) {
  .fc-adv-split { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  /* Photo above the content once stacked, and no longer sticky. */
  .fc-adv-split__media { position: static; order: -1; max-width: 420px; }
}

/* Inline emphasis inside body copy. Bold italic in the navy so the phrase
   lifts off the surrounding --fc-body grey without changing size or leading.
   Usage: <span class="fc-em">phrase</span> */
.fc-em {
  font-weight: 600;
  font-style: italic;
  color: var(--fc-navy);
}
/* On dark grounds. */
.fc-em--light { color: var(--fc-white); }

/* --------------------------------------------------------------------------
   NAV SUB-ITEMS (third level)
   Rendered as indented children inside the same panel rather than a nested
   flyout: a second-level flyout is unusable on touch and needs hover
   plumbing that fails the moment a finger is involved. The connector rule
   carries the hierarchy visually instead.
   -------------------------------------------------------------------------- */
.fc-nav__sub {
  display: flex;
  flex-direction: column;
  margin: 2px 0 6px 22px;
  padding-left: 16px;
  border-left: 1px solid var(--fc-line);
}
.fc-nav__subitem {
  display: block;
  padding: 9px 12px;
  border-radius: var(--fc-radius-sm, 4px);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--fc-body);
  transition: background var(--fc-t), color var(--fc-t);
}
.fc-nav__subitem:hover { background: var(--fc-surface); color: var(--fc-blue); }

/* The overlay header recolours panel text; sub-items need the same treatment
   or they stay grey against the panel's white ground. */
.fc-header--overlay .fc-nav__panel .fc-nav__subitem { color: var(--fc-body); }
.fc-header--overlay .fc-nav__panel .fc-nav__subitem:hover { color: var(--fc-blue); }

@media (max-width: 992px) {
  /* Mobile panel is a dark accordion; the hairline and hover ground both
     need to flip. */
  .fc-nav__sub { margin-left: 12px; padding-left: 14px; border-left-color: rgba(255, 255, 255, 0.18); }
  .fc-nav__subitem { font-size: 14.5px; padding: 11px 10px; }
  .fc-header--overlay .fc-nav.is-open .fc-nav__subitem { color: rgba(255, 255, 255, 0.78); border-bottom: 0; }
  .fc-header--overlay .fc-nav.is-open .fc-nav__subitem:hover { background: rgba(255, 255, 255, 0.07); color: var(--fc-white); }
  .fc-header--overlay.is-stuck .fc-nav.is-open .fc-nav__sub { border-left-color: var(--fc-line); }
  .fc-header--overlay.is-stuck .fc-nav.is-open .fc-nav__subitem { color: var(--fc-body); }
  .fc-header--overlay.is-stuck .fc-nav.is-open .fc-nav__subitem:hover { background: var(--fc-surface); color: var(--fc-blue); }
}

/* --------------------------------------------------------------------------
   ANNOUNCEMENT BAND (version E: blue-green-blue, drifting)
   Delete the section from the markup when the news is stale; no CSS change
   needed. White text passes 4.5:1 at every gradient stop.
   Markup: <section class="fc-announce fc-announce--flow fc-announce--wave">
   -------------------------------------------------------------------------- */
.fc-announce {
  position: relative;
  background: var(--fc-blue);
  color: var(--fc-white);
  overflow: hidden;
}
.fc-announce::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--fc-green-band);
  pointer-events: none;
}
.fc-announce__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 36px;
  padding-top: 54px;
  padding-bottom: 54px;
}
.fc-announce__tag {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  flex: none;
  padding-right: 36px;
  border-right: 1px solid rgba(255, 255, 255, 0.28);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fc-white);
}
.fc-announce__tag span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--fc-white);
  color: var(--fc-green-deep);
  padding: 6px 11px;
  border-radius: 3px;
}
.fc-announce__tag span:first-child::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fc-green);
}
.fc-announce__text {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-family: var(--fc-font-head);
  font-weight: 500;
  font-size: 23px;
  line-height: 1.32;
  letter-spacing: -0.012em;
  color: var(--fc-white);
  text-wrap: pretty;
}
.fc-announce .fc-btn { flex: none; }
/* The shared white button hovers to green-band, which would vanish into
   this ground. Go navy instead. */
.fc-announce .fc-btn--white:hover { background: var(--fc-navy-deep); color: var(--fc-white); }

/* Motion: the gradient layer is widened and drifted with transform only,
   so the browser animates it without repainting. Honours reduced-motion. */
.fc-announce--flow .fc-announce__inner { padding-top: 64px; padding-bottom: 64px; }
.fc-announce--flow::before {
  left: -25%;
  right: -25%;
  will-change: transform;
  animation: fc-announce-drift 16s ease-in-out infinite alternate;
}
@keyframes fc-announce-drift {
  from { transform: translateX(-12%); }
  to   { transform: translateX(12%); }
}
@media (prefers-reduced-motion: reduce) {
  .fc-announce--flow::before { animation: none; }
}

/* Blue-green-blue gradient with a green hairline on top. */
.fc-announce--wave { border-top: 3px solid var(--fc-green); }
.fc-announce--wave::before {
  background: linear-gradient(100deg, var(--fc-blue) 0%, var(--fc-blue) 6%, var(--fc-green-band) 43%, var(--fc-green-band) 51%, var(--fc-blue) 82%, var(--fc-navy) 100%);
}

@media (max-width: 992px) {
  .fc-announce__inner { flex-wrap: wrap; gap: 20px 28px; }
  .fc-announce__tag { flex-direction: row; align-items: center; padding-right: 0; border-right: 0; width: 100%; }
  .fc-announce__text { flex-basis: 100%; font-size: 21px; }
}
@media (max-width: 768px) {
  .fc-announce__inner { padding-top: 48px; padding-bottom: 48px; }
  .fc-announce--flow .fc-announce__inner { padding-top: 58px; padding-bottom: 58px; }
  .fc-announce__text { font-size: 19px; }
}
/* ==========================================================================
   FedCom — v7 homepage
   Load order: fedcom-core.css → fedcom-v7.css
   Wrapper: class="fc-wrap fc-theme-clinical fc-v7"
   JS: fedcom-v7.js (mobile nav + overlay-header scroll state)

   v7 vs v6: signpost homepage. Every section is a title, a one-line subtitle
   and a link to its future sub-page. No long-form prose anywhere.
   Do NOT load fedcom-v4/v5/v6.css alongside this sheet.
   ========================================================================== */

/* Containing block for the absolutely-positioned overlay header. */
.fc-v7 { position: relative; }

.fc-v7 {
  --fc-table-theirs-label: 'Traditional reseller — ';
  --fc-table-ours-label: 'FedCom — ';
}

/* --------------------------------------------------------------------------
   1. DUOTONE  →  promoted to fedcom-core.css
   .fc-duo, its ratio modifiers and the .is-placeholder state now live in core
   (section 7b) since every page uses them. Only v7-specific tweaks remain in
   this sheet, alongside the components that use them.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   2. TEXTURE — diagonal hairlines, behind content only
   -------------------------------------------------------------------------- */
.fc-texture { position: relative; }
.fc-texture::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(112deg,
    rgba(20, 58, 97, 0.055) 0px, rgba(20, 58, 97, 0.055) 1px,
    transparent 1px, transparent 74px);
  pointer-events: none;
}
.fc-texture > * { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   3. OVERLAY HEADER
   -------------------------------------------------------------------------- */
/* Opaque, not translucent: the top bar sits in normal flow ABOVE the hero,
   so any alpha composites against the white wrapper and turns grey. */
.fc-v7 .fc-topbar {
  position: relative;
  z-index: 70;
  background: var(--fc-navy-deep);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.fc-v7 .fc-topbar__inner { padding-top: 9px; padding-bottom: 9px; }
.fc-v7 .fc-topbar a { color: var(--fc-white); }
.fc-v7 .fc-topbar a:hover { color: var(--fc-green-mint); }

.fc-header--overlay {
  position: absolute;
  top: var(--fc-topbar-h, 41px);
  left: 0; right: 0;
  z-index: 60;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.fc-header--overlay .fc-logo__name { color: var(--fc-white); }
.fc-header--overlay .fc-logo__sub { color: rgba(255, 255, 255, 0.72); }
.fc-header--overlay .fc-nav a:not(:where(.fc-btn)) { color: rgba(255, 255, 255, 0.92); }
.fc-header--overlay .fc-nav a:not(:where(.fc-btn)):hover { color: var(--fc-green-mint); }
.fc-header--overlay .fc-nav-toggle { border-color: rgba(255, 255, 255, 0.4); }
.fc-header--overlay .fc-nav-toggle span,
.fc-header--overlay .fc-nav-toggle span::before,
.fc-header--overlay .fc-nav-toggle span::after { background: var(--fc-white); }

.fc-header--overlay.is-stuck {
  position: fixed;
  top: 0;
  background: rgba(255, 255, 255, 0.96);
  border-bottom-color: var(--fc-line);
  box-shadow: 0 2px 18px rgba(15, 43, 72, 0.09);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.fc-header--overlay.is-stuck .fc-logo__name { color: var(--fc-navy); }
.fc-header--overlay.is-stuck .fc-logo__sub { color: var(--fc-body); }
.fc-header--overlay.is-stuck .fc-nav a:not(:where(.fc-btn)) { color: #33495A; }
.fc-header--overlay.is-stuck .fc-nav a:not(:where(.fc-btn)):hover { color: var(--fc-green-band); }
.fc-header--overlay.is-stuck .fc-nav-toggle { border-color: var(--fc-line); }
.fc-header--overlay.is-stuck .fc-nav-toggle span,
.fc-header--overlay.is-stuck .fc-nav-toggle span::before,
.fc-header--overlay.is-stuck .fc-nav-toggle span::after { background: var(--fc-navy); }

/* --------------------------------------------------------------------------
   4. HERO
   -------------------------------------------------------------------------- */
.fc-hero {
  position: relative;
  isolation: isolate;
  background-color: var(--fc-navy-deep);
  overflow: hidden;
  color: var(--fc-on-dark);
}
.fc-hero__photo {
  position: absolute;
  inset: 0;
  background-image: url('/wp-content/uploads/fc-hero-2.jpg');
  background-size: cover;
  background-position: 72% center;
  background-repeat: no-repeat;
  filter: grayscale(1) contrast(1.05);
  mix-blend-mode: luminosity;
  opacity: 0.56;
}
.fc-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(94deg,
      rgba(15, 43, 72, 0.94) 0%,
      rgba(15, 43, 72, 0.76) 44%,
      rgba(20, 58, 97, 0.3) 74%,
      rgba(30, 85, 139, 0.26) 100%),
    linear-gradient(180deg,
      rgba(15, 43, 72, 0.58) 0%,
      rgba(15, 43, 72, 0) 32%);
}
.fc-hero__inner {
  position: relative;
  z-index: 1;
  padding-top: 296px;
  padding-bottom: 140px;
}
.fc-hero__content { max-width: 660px; }
.fc-hero__title {
  font-family: var(--fc-font-head);
  font-weight: 600;
  font-size: 41px;
  line-height: 1.18;
  letter-spacing: -0.014em;
  margin-bottom: 18px;
  text-wrap: balance;
}
.fc-hero__lead {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 32px;
  max-width: 500px;
  text-wrap: pretty;
}
.fc-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   5. PROOF BAND
   -------------------------------------------------------------------------- */
/* Label-first, not figure-first. The old version led with a big 28px serif
   line, but the four values are not parallel — "One" and "Commission" and
   "VA · DoD · DOL · IHS" cannot share a display size without one of them
   either shouting or wrapping. So the small uppercase label leads, and the
   statement sits beneath it at a size that fits all four. */
.fc-proof {
  background: var(--fc-navy);
  color: var(--fc-on-dark);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.fc-proof__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}
.fc-proof__item {
  position: relative;
  padding: 34px 34px 36px;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}
.fc-proof__item:first-child { border-left: 0; padding-left: 0; }
.fc-proof__item:last-child { padding-right: 0; }

/* Short green rule above each label — the band's only accent. */
.fc-proof__item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 34px;
  width: 26px;
  height: 2px;
  background: var(--fc-green);
}
.fc-proof__item:first-child::before { left: 0; }

.fc-proof__label {
  font-family: var(--fc-font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--fc-green-mint);
  margin-bottom: 12px;
}
.fc-proof__figure {
  font-family: var(--fc-font-head);
  font-weight: 500;
  font-size: 21px;
  letter-spacing: -0.005em;
  line-height: 1.32;
  color: var(--fc-white);
  text-wrap: pretty;
}
/* The channel list is a run of abbreviations, not a sentence — it wants to
   stay on one line and sits better a shade smaller. */
.fc-proof__figure--list {
  font-size: 19px;
  letter-spacing: 0.005em;
}

/* --------------------------------------------------------------------------
   6. SECTION HEADS — the v7 pattern: title, one-line subtitle, one link
   -------------------------------------------------------------------------- */
.fc-shead { max-width: 640px; margin-left: auto; margin-right: auto; text-align: center; }
.fc-shead--left { margin-left: 0; margin-right: 0; text-align: left; }
.fc-shead__title {
  font-family: var(--fc-font-head);
  font-weight: 600;
  font-size: 34px;
  line-height: 1.18;
  letter-spacing: -0.014em;
  color: var(--fc-navy);
  margin-bottom: 14px;
  text-wrap: balance;
}
.fc-shead__title em { font-style: normal; color: #6C8093; display: block; }
.fc-shead__sub {
  font-size: 17.5px;
  line-height: 1.58;
  color: var(--fc-body);
  margin-bottom: 26px;
  text-wrap: pretty;
}
.fc-shead--dark .fc-shead__title { color: var(--fc-white); }
.fc-shead--dark .fc-shead__title em { color: rgba(255, 255, 255, 0.58); }
.fc-shead--dark .fc-shead__sub { color: rgba(255, 255, 255, 0.82); }
.fc-shead__actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.fc-shead--left .fc-shead__actions { justify-content: flex-start; }

/* --------------------------------------------------------------------------
   7. SIGNPOST CARDS — photo, label, one line, learn-more
   -------------------------------------------------------------------------- */
.fc-signposts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.fc-signpost {
  display: flex;
  flex-direction: column;
  background: var(--fc-white);
  border-radius: 14px;
  padding: 10px 10px 0;
  box-shadow: 0 2px 14px rgba(15, 43, 72, 0.07);
  transition: transform var(--fc-t), box-shadow var(--fc-t);
}
.fc-signpost:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(15, 43, 72, 0.12); }
.fc-signpost .fc-duo { border-radius: 9px; }
.fc-signpost__body { padding: 20px 18px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.fc-signpost__title {
  font-family: var(--fc-font-head);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.008em;
  color: var(--fc-navy);
}
.fc-signpost__text { font-size: 15.5px; line-height: 1.55; color: var(--fc-body); }
/* align-self: the flex column blockifies this child, which would stretch the
   underline border across the whole card. */
.fc-signpost__body .fc-link-arrow { margin-top: auto; padding-top: 12px; align-self: flex-start; }

/* --------------------------------------------------------------------------
   8. SERVICE TILES — four capabilities, one line each
   -------------------------------------------------------------------------- */
.fc-services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.fc-service {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--fc-white);
  border: 1px solid var(--fc-line);
  border-radius: var(--fc-radius);
  padding: 30px 30px 32px;
  transition: border-color var(--fc-t), box-shadow var(--fc-t);
}
.fc-service:hover { border-color: var(--fc-green); border-left-color: var(--fc-green); box-shadow: 0 6px 22px rgba(15, 43, 72, 0.08); }
.fc-service__num {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fc-green-band);
}
.fc-service__title {
  font-family: var(--fc-font-head);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.22;
  letter-spacing: -0.008em;
  color: var(--fc-navy);
}
.fc-service__text { font-size: 16px; line-height: 1.55; color: var(--fc-body); }
.fc-service .fc-link-arrow { margin-top: auto; padding-top: 14px; align-self: flex-start; }

/* --------------------------------------------------------------------------
   9. WHY FEDCOM — duotone ground, short reason tiles
   -------------------------------------------------------------------------- */
.fc-why {
  position: relative;
  isolation: isolate;
  background-color: var(--fc-navy-deep);
  color: var(--fc-on-dark);
  overflow: hidden;
}
.fc-why__photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: grayscale(1) contrast(1.05);
  mix-blend-mode: luminosity;
  opacity: 0.3;
}
.fc-why__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(15, 43, 72, 0.9) 0%,
    rgba(15, 43, 72, 0.82) 50%,
    rgba(15, 43, 72, 0.92) 100%);
}
.fc-why__inner { position: relative; z-index: 1; }

.fc-reasons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.fc-reason {
  padding: 26px 24px 28px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 12px;
  transition: background var(--fc-t), border-color var(--fc-t);
}
.fc-reason:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.24); }
.fc-reason__title {
  font-family: var(--fc-font-head);
  font-weight: 600;
  font-size: 17.5px;
  letter-spacing: -0.008em;
  color: var(--fc-white);
  margin-bottom: 8px;
}
.fc-reason__body { font-size: 15.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.8); }
/* --------------------------------------------------------------------------
   10. BREAKPOINTS
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .fc-hero__inner { padding-top: 184px; padding-bottom: 108px; }
}

@media (max-width: 992px) {
  .fc-proof__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fc-proof__item { padding: 30px 26px 32px; }
  .fc-proof__item::before { left: 26px; }
  .fc-proof__item:nth-child(3) { border-left: 0; padding-left: 0; }
  .fc-proof__item:nth-child(3)::before { left: 0; }
  .fc-proof__item:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, 0.14); }
  .fc-proof__item:nth-child(n + 3)::before { top: -1px; }
  .fc-signposts { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .fc-reasons { grid-template-columns: minmax(0, 1fr); }
  .fc-services { grid-template-columns: minmax(0, 1fr); }
  /* Overlay nav opens on a solid ground so links stay readable. */
  .fc-header--overlay .fc-nav.is-open {
    background: var(--fc-navy-deep);
    border-bottom-color: rgba(255, 255, 255, 0.16);
  }
  .fc-header--overlay .fc-nav.is-open a:not(:where(.fc-btn)) { color: var(--fc-white); border-bottom-color: rgba(255, 255, 255, 0.14); }
  .fc-header--overlay.is-stuck .fc-nav.is-open { background: var(--fc-white); }
  .fc-header--overlay.is-stuck .fc-nav.is-open a:not(:where(.fc-btn)) { color: #33495A; border-bottom-color: var(--fc-line-soft); }
}

@media (max-width: 768px) {
  .fc-hero__photo { background-position: 64% center; }
  .fc-hero__scrim {
    background: linear-gradient(180deg,
      rgba(15, 43, 72, 0.9) 0%,
      rgba(15, 43, 72, 0.84) 55%,
      rgba(15, 43, 72, 0.92) 100%);
    .fc-announce__inner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .fc-announce__text { font-size: 17px; }
  }
  .fc-hero__inner { padding-top: 150px; padding-bottom: 76px; }
  .fc-hero__title { font-size: 32px; }
  .fc-hero__lead { font-size: 16.5px; }
  .fc-hero__actions .fc-btn { width: 100%; }
  .fc-proof__grid { grid-template-columns: minmax(0, 1fr); }
  .fc-proof__item { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.14); padding: 24px 0 26px; }
  .fc-proof__item::before { left: 0; top: -1px; }
  .fc-proof__item:first-child { border-top: 0; }
  .fc-proof__item:first-child::before { top: 0; }
  .fc-proof__figure { font-size: 19.5px; }
  .fc-shead__title { font-size: 27px; }
  .fc-shead__sub { font-size: 16.5px; }
  .fc-shead__actions .fc-btn { width: 100%; }
  .fc-service { padding: 24px 22px 26px; }
  .fc-service__title { font-size: 20px; }
  .fc-texture::before { background-size: 48px 48px; }
}

@media (max-width: 480px) {
  .fc-hero__inner { padding-top: 134px; }
  .fc-hero__title { font-size: 29px; }
}
.fc-header-section {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  background: transparent !important;
  /* JS measures the real height into --fc-header-h; 118px covers first paint
     (40px top bar + 78px header). */
  margin-bottom: calc(-1 * var(--fc-header-h, 118px)) !important;
}

/* Sticky fails silently if any ANCESTOR has overflow other than visible.
   Oxygen's own wrappers are the usual culprits. */
#ct-container,
.oxy-inner-content,
body.oxygen-body { overflow: visible !important; }

/* The section is in flow, so the header inside it must NOT position itself —
   v7 absolutely positions it at top:--fc-topbar-h to sit under the top bar,
   which is already handled by normal stacking here. */
.fc-header-section .fc-header--overlay,
.fc-header-section .fc-header--overlay.is-stuck {
  position: relative !important;
  top: auto !important;
  left: auto;
  right: auto;
  box-shadow: none !important;
}

/* Version-agnostic top bar: v6/v7 scope this rule to .fc-v6 / .fc-v7, so it
   silently does nothing if the wrapper class and the loaded sheet disagree.
   Opaque on purpose — alpha over the white page turns grey. */
.fc-header-section .fc-topbar {
  background: var(--fc-navy-deep);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.fc-header-section .fc-topbar a { color: var(--fc-white); }
.fc-header-section .fc-topbar a:hover { color: var(--fc-green-mint); }

/* Oxygen wraps section children in .ct-section-inner-wrap, which carries the
   max-width that would double up on our own .fc-container. */
.fc-header-section > .ct-section-inner-wrap {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  background: transparent !important;
}

/* The code block must not constrain width — and must not paint a background.
   Oxygen gives sections and code blocks an opaque background by default (via
   ID-scoped CSS), which covers the hero the header is meant to sit over. */
.fc-header-section .ct-code-block {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  background: transparent !important;
}

/* --------------------------------------------------------------------------
   DROPDOWN OVERFLOW
   The dropdown panel hangs BELOW the header section. Oxygen sections and
   their wrappers clip or scroll their overflow, so without this the panel is
   cut off at the section's bottom edge and the section grows its own
   scrollbar, which steals the mouse wheel from the page.

   Everything between the panel and the page must stay overflow:visible. The
   one exception is .fc-topbar, which needs overflow:hidden for its collapse
   animation and never contains the panel.
   -------------------------------------------------------------------------- */
.fc-header-section,
.fc-header-section > .ct-section-inner-wrap,
.fc-header-section .ct-code-block,
.fc-header-section .fc-wrap,
.fc-header-section .fc-header,
.fc-header-section .fc-header__inner,
.fc-header-section .fc-container,
.fc-header-section .fc-nav {
  overflow: visible !important;
}

/* The WordPress admin bar is fixed at z-index 99999 and would cover the top
   bar for logged-in users. Only relevant once the section is pinned, handled
   in section 2 above. */

/* The wrapper inside the code block is the containing block for the
   absolutely-positioned .fc-header--overlay. */
.fc-header-section .fc-wrap { position: relative; }

/* --------------------------------------------------------------------------
   2. SCROLLED STATE
   Sticky already handles the pinning, so is-scrolled is purely cosmetic: the
   top bar collapses away and a shadow appears. Added by fedcom-v7.js; if the
   JS is missing the header still pins, just without the polish.
   -------------------------------------------------------------------------- */
.fc-header-section {
  transition: box-shadow 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.fc-header-section.is-scrolled {
  box-shadow: 0 2px 18px rgba(15, 43, 72, 0.12) !important;
}
.admin-bar .fc-header-section { top: 32px !important; }
@media screen and (max-width: 782px) {
  .admin-bar .fc-header-section { top: 46px !important; }
}

/* Top bar collapses away when scrolled, leaving just the nav.
   max-height + opacity on the same decelerating curve as the header's colour
   change, so the bar sinks and fades as one motion. The opacity leads slightly
   (shorter duration, no delay) so it is already faint by the time the height
   finishes collapsing, which hides the fact that max-height cannot ease from
   a content-sized value. */
.fc-header-section .fc-topbar {
  overflow: hidden;
  max-height: 60px;
  opacity: 1;
  transition: max-height 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
              border-color 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.fc-header-section.is-scrolled .fc-topbar {
  max-height: 0;
  opacity: 0;
  border-bottom-color: transparent;
}

/* --------------------------------------------------------------------------
   3. MOBILE MENU
   With the section out of flow the open menu has no height to push against,
   so it needs its own solid ground and a scroll cap on short screens.
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
  .fc-header-section .fc-nav.is-open {
    max-height: calc(100vh - 120px);
    /* Beats the overflow:visible rule above, which exists so the desktop
       dropdown panel can escape the header. The open mobile menu is a tall
       in-flow column and does need its own scroll. */
    overflow-y: auto !important;
  }
}

/* --------------------------------------------------------------------------
   5. HEADER LOGO SWAP
   Duplicated from core (section 11) with !important. Core's plain class rules
   proved unreliable here: Oxygen's compiled universal.css and its own image
   defaults were winning, so both logo files rendered at once. These load last
   and cannot lose.

   Markup: two <img> children of .fc-logo, one per state. Do NOT put an inline
   `display` on either — an inline style beats a stylesheet and freezes the
   swap.
   -------------------------------------------------------------------------- */
.fc-header-section .fc-logo__img {
  display: block !important;
  height: var(--fc-logo-h, 46px) !important;
  width: auto !important;
  max-width: 100% !important;
}
/* At rest: transparent header over the dark hero, so the light logo shows. */
.fc-header-section .fc-logo__img--dark { display: none !important; }
.fc-header-section .fc-logo__img--light { display: block !important; }

/* Scrolled, or a light-header sub-page: solid white header, dark logo. */
.fc-header-section .fc-header--overlay.is-stuck .fc-logo__img--light,
body.fc-light-header .fc-header-section .fc-logo__img--light {
  display: none !important;
}
.fc-header-section .fc-header--overlay.is-stuck .fc-logo__img--dark,
body.fc-light-header .fc-header-section .fc-logo__img--dark {
  display: block !important;
}

@media (max-width: 600px) {
  .fc-header-section .fc-logo__img { height: var(--fc-logo-h-sm, 38px) !important; }
}

/* --------------------------------------------------------------------------
   6. PAGES WITHOUT A DARK HERO
   Inner pages whose first section is light need the header in its solid state
   from the start, plus top spacing to sit below it. Add class fc-page-light
   to the Inner Content section on those pages.
   -------------------------------------------------------------------------- */
.fc-page-light { padding-top: 112px; }

.fc-page-light ~ * .fc-header--overlay,
body.fc-light-header .fc-header--overlay {
  background: rgba(255, 255, 255, 0.96);
  border-bottom-color: var(--fc-line);
  box-shadow: 0 2px 18px rgba(15, 43, 72, 0.09);
}
body.fc-light-header .fc-header--overlay .fc-logo__name { color: var(--fc-navy); }
body.fc-light-header .fc-header--overlay .fc-logo__sub { color: var(--fc-body); }
body.fc-light-header .fc-header--overlay .fc-nav a:not(:where(.fc-btn)) { color: #33495A; }
body.fc-light-header .fc-header--overlay .fc-nav-toggle span,
body.fc-light-header .fc-header--overlay .fc-nav-toggle span::before,
body.fc-light-header .fc-header--overlay .fc-nav-toggle span::after { background: var(--fc-navy); }
/* Release headlines run long, so the hero title steps down from the
   standard sub-page size. */
.fc-phero--release .fc-phero__inner { max-width: 880px; }
.fc-phero--release .fc-phero__title { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.16; }
.fc-phero--release .fc-phero__lead { font-size: 18px; max-width: 760px; }

.fc-release__kicker {
  display: flex;
  gap: 14px;
  margin-bottom: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fc-green-mint);
}
.fc-release__kicker span + span { color: var(--fc-on-dark); }

/* Two columns: the release, and a sticky sidebar with the PDF and facts. */
.fc-release {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 72px;
  align-items: start;
}
.fc-release__body { max-width: 720px; }
.fc-release__meta {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fc-green-band);
  padding-bottom: 20px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--fc-line);
}
.fc-release__body h2 {
  font-family: var(--fc-font-head);
  font-weight: 600;
  font-size: 25px;
  line-height: 1.24;
  letter-spacing: -0.014em;
  color: var(--fc-navy);
  margin: 48px 0 14px;
}
.fc-release__body h3 {
  font-family: var(--fc-font-head);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.3;
  color: var(--fc-navy);
  margin: 28px 0 10px;
}
.fc-release__body p {
  font-size: 17px;
  line-height: 1.74;
  color: var(--fc-body);
  margin: 0 0 18px;
  text-wrap: pretty;
}
.fc-release__links {
  margin-top: 36px !important;
  padding-top: 20px;
  border-top: 1px solid var(--fc-line);
  font-size: 15px !important;
}

.fc-release__aside { position: sticky; top: calc(var(--fc-header-h, 80px) + 24px); }
.fc-release__card {
  background: var(--fc-surface);
  border: 1px solid var(--fc-line);
  border-radius: var(--fc-radius);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.fc-release__facts { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.fc-release__facts div { border-top: 1px solid var(--fc-line); padding-top: 12px; }
.fc-release__facts dt,
.fc-release__label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fc-green-band);
  margin-bottom: 4px;
}
.fc-release__facts dd {
  margin: 0;
  font-family: var(--fc-font-head);
  font-weight: 500;
  font-size: 17px;
  color: var(--fc-navy);
}
.fc-release__contact { border-top: 1px solid var(--fc-line); padding-top: 14px; }
.fc-release__contact p { margin: 0 0 4px; font-size: 15px; line-height: 1.5; color: var(--fc-body); }

@media (max-width: 992px) {
  .fc-release { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .fc-release__aside { position: static; order: -1; }
  .fc-release__facts { flex-direction: row; flex-wrap: wrap; gap: 14px 28px; }
}
@media (max-width: 768px) {
  .fc-release__body h2 { font-size: 22px; margin-top: 38px; }
  .fc-release__body p { font-size: 16.5px; }
}

/* --------------------------------------------------------------------------
   NEWS INDEX (/news/)
   One row per post: date column, then title, excerpt and link. Rows are
   divided by hairlines so the list scales from one post to many.
   -------------------------------------------------------------------------- */
.fc-newslist { max-width: 980px; border-top: 1px solid var(--fc-line); }
.fc-newsitem {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 48px;
  padding: 40px 0;
  border-bottom: 1px solid var(--fc-line);
}
.fc-newsitem__meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14.5px;
  color: var(--fc-body);
  padding-top: 4px;
}
.fc-newsitem__type {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fc-green-band);
}
.fc-newsitem__title {
  font-family: var(--fc-font-head);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.28;
  letter-spacing: -0.015em;
  margin: 0 0 14px;
  text-wrap: pretty;
}
.fc-wrap .fc-newsitem__title a { color: var(--fc-navy); }
.fc-wrap .fc-newsitem__title a:hover { color: var(--fc-blue); }
.fc-newsitem__text {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--fc-body);
  margin: 0 0 18px;
  max-width: 680px;
}
@media (max-width: 768px) {
  .fc-newsitem { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 32px 0; }
  .fc-newsitem__meta { flex-direction: row; gap: 14px; }
  .fc-newsitem__title { font-size: 22px; }
}