/* primary button */
.PrimaryButton,
.UsePrimaryButton .TextButton,
.RadGrid input.PrimaryButton,
.RadGrid.RadGrid input.TextButton.PrimaryButton,
.RadGrid.RadGrid a.TextButton.PrimaryButton {
  background-color: #192A66 !important;
  border-color: #192A66 !important; /* set border to blue as well */
  color: #fff !important; /* ensure text stays readable */
}


/*Dashboard Cover Image*/
.account-banner-short .banner-content:after {
    background-image: url('/images/Hirearchy=secondary 01.png');
}

/* Donut - Engagement Score*/
.large.donut-bite:before, .large.donut-bite:after {
    background-color: #192A66 !important;
}

.account-banner-bg-color-mps-1 .account-banner-short .banner-top-bar {
    background-color: #192A66;
}

html .RadTabStrip_MetroTouch .rtsLevel1 a.rtsLink {
    background-color: #192A66;
    color: #ffffff;
    padding: 8px 10px 8px 10px;
    margin: 0px 5px 0 0;
    border-radius: 4px 4px 0px 0px;
    border: 1px solid #dbdbdb;
    border-bottom: 0px;
    font-weight: 500;
}

.backToTop {
    background: #192A66 url(images/ResponsiveHeaderSprite.png) 5px -223px no-repeat !important;}



/* ============================================================
   IPA Base Elements ???????? Fonts & Colors Only (RiSE / Flat_White)
   Load AFTER the site's main theme.
   ============================================================ */

/* -----------------------------
   1) IPA tokens (from Figma)
   ----------------------------- */
:root{
  /* Brand (primary) */
  --ipa-atlantic-navy: #0D2C6C;
  --ipa-royal:         #0078B3;
  --ipa-ocean:         #48C6EC;

  /* Accent */
  --ipa-warm-plumb:    #992785;
  --ipa-pale-magenta:  #D861A0;

  /* Status */
  --ipa-chili:         #BB1E26;  /* error */
  --ipa-mandarin:      #E85D0E;  /* warning */
  --ipa-orange-peel:   #FF9F00;  /* notice/info accent */
  --ipa-success:       #17A84B;

  /* Neutrals */
  --ipa-white:   #FFFFFF;
  --ipa-grey-50: #F6F7F8;
  --ipa-grey-100:#EDF0F2;
  --ipa-grey-200:#D8DEE3;
  --ipa-grey-400:#9BA8B3;
  --ipa-grey-600:#5B6770;
  --ipa-grey-800:#2B3033;
  --ipa-black:   #0A0B0C;

  /* Core text & backgrounds */
  --ipa-text:      #16202A;
  --ipa-bg:        var(--ipa-white);
  --ipa-surface:   #FAFBFC;
  --ipa-border:    var(--ipa-grey-200);

  /* Links */
  --ipa-link:         var(--ipa-royal);
  --ipa-link-hover:   #006495;  /* 20% darker */
  --ipa-link-visited: #5A92C2;

  /* Focus ring */
  --ipa-focus: #0A66C2;

  /* Typography families & sizes (Apex Serif + DIN Next) */
  --font-sans:  "DIN Next LT Pro", DIN, Inter, "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-serif: "Apex Serif", "Source Serif 4", Georgia, "Times New Roman", serif;

  --fs-base: 1.125rem; /* ~18px base */
  --fs-h1:   clamp(2.2rem, 2.5vw + 1rem, 3.2rem);
  --fs-h2:   clamp(1.9rem, 2vw + .8rem, 2.6rem);
  --fs-h3:   clamp(1.6rem, 1.5vw + .7rem, 1.8rem);
  --fs-h4:   1.25rem;  /* ~20px */
  --fs-h5:   1.125rem; /* ~18px */
  --fs-h6:   1rem;     /* ~16px */
}

/* -----------------------------
   2) Flat_White var shim (keeps
      their few CSS vars in sync)
   ----------------------------- */
:root{
  --nav-color:           var(--ipa-atlantic-navy);
  --aux-link:            var(--ipa-link);
  --aux-link-visited:    var(--ipa-link-visited);
  --aux-focus:           var(--ipa-focus);
  --aux-body-bg:         var(--ipa-bg);
  --aux-surface-bg:      var(--ipa-surface);
  --aux-border-color:    var(--ipa-border);
}

/* -----------------------------
   3) (Optional) font-face
      ???????? replace paths if self-hosted
   ----------------------------- */
@font-face{
  font-family:"DIN Next LT Pro";
  src:url("/fonts/DINNextLTPro-Variable.woff2") format("woff2");
  font-weight:300 800;
  font-display:swap;
}
@font-face{
  font-family:"Apex Serif";
  src:url("/fonts/ApexSerif-Variable.woff2") format("woff2");
  font-weight:300 800;
  font-display:swap;
}

/* -----------------------------
   4) Global text and backgrounds
   ----------------------------- */
html, body{
  background: var(--ipa-bg) !important;
  color:      var(--ipa-text) !important;
  font-family:var(--font-sans) !important;
  font-size:  var(--fs-base);
  line-height:1.6;
}

/* Headings ???????? matches Figma style: serif for display, navy color */
h1, .PageTitle, .page-title{
  font-family: var(--font-serif) !important;
  color: var(--ipa-atlantic-navy) !important;
  font-size: var(--fs-h1);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
h2{ font-family: var(--font-sans); color: var(--ipa-atlantic-navy); font-size: var(--fs-h2); line-height:1.2; }
h3{ font-family: var(--font-sans); color: var(--ipa-atlantic-navy); font-size: var(--fs-h3); line-height:1.25; }
h4{ font-family: var(--font-sans); color: var(--ipa-atlantic-navy); font-size: var(--fs-h4); }
h5{ font-family: var(--font-sans); color: var(--ipa-atlantic-navy); font-size: var(--fs-h5); }
h6{ font-family: var(--font-sans); color: var(--ipa-atlantic-navy); font-size: var(--fs-h6); }

/* Paragraphs & small text */
p, li, dt, dd { color: var(--ipa-text); }
small, .muted, .text-muted { color: var(--ipa-grey-600) !important; }

/* Links */
a{
  color: var(--ipa-link) !important;
  text-underline-offset: 3px;
}
a:hover{   color: var(--ipa-link-hover) !important; }
a:visited{ color: var(--ipa-link-visited) !important; }

/* Focus (color only) */
:where(a,button,input,select,textarea):focus-visible{
  outline: 3px solid var(--ipa-focus) !important;
  outline-offset: 2px;
}

/* -----------------------------
   5) Buttons ???????? color only
   ----------------------------- */
.button, .btn, a.button, a.btn, button, input[type="submit"]{
  background: #192A66 !important;
  border-color: #192A66 !important;
  color: #fff !important;
}
.button:hover, .btn:hover, button:hover, input[type="submit"]:hover, .RadButton:hover{
  border-color: var(--ipa-link-hover) !important;
}
/* Subtle/secondary (if present) */
.btn-secondary, .Button--secondary{
  background: var(--ipa-atlantic-navy) !important;
  border-color: var(--ipa-atlantic-navy) !important;
}

/* -----------------------------
   6) Forms ???????? text, border & focus color only
   ----------------------------- */
input, select, textarea, .RadComboBox .rcbInputCell input{
  /*color: var(--ipa-text) !important;*/
  border-color: var(--ipa-border) !important;
  background: #fff !important;
}
input::placeholder, textarea::placeholder{ color: var(--ipa-grey-600) !important; }
input:focus, select:focus, textarea:focus{
  border-color: var(--ipa-royal) !important;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ipa-royal) 30%, transparent) !important;
}
/* Validation colors */
.field-validation-error, .validation-summary-errors, .RadInput_Error{
  color: var(--ipa-chili) !important;
}
input.input-validation-error, .RadInput_Error input{
  border-color: var(--ipa-chili) !important;
}

/* -----------------------------
   7) Tables ???????? header + borders color only
   ----------------------------- */
table{ border-collapse: collapse; }
table th, table td{
  border: 1px solid var(--ipa-border) !important;
}
table thead th{
  background: var(--ipa-grey-50) !important;
  color: var(--ipa-atlantic-navy) !important;
}

/* -----------------------------
   8) Alerts / badges (color only)
   ----------------------------- */
.alert, .MessagePanel.Info    { background: color-mix(in oklab, var(--ipa-ocean) 12%, #fff);  border-color: var(--ipa-ocean);  color: var(--ipa-atlantic-navy); }
.alert-warning, .MessagePanel.Warning { background: color-mix(in oklab, var(--ipa-mandarin) 12%, #fff); border-color: var(--ipa-mandarin); color: #5C2A06; }
.alert-danger, .MessagePanel.Error   { background: color-mix(in oklab, var(--ipa-chili) 12%, #fff);    border-color: var(--ipa-chili);    color: #5C0E14; }
.alert-success, .MessagePanel.Success{ background: color-mix(in oklab, var(--ipa-success) 12%, #fff);  border-color: var(--ipa-success);  color: #0D4B2A; }

/* -----------------------------
   9) Code / blockquote (color only)
   ----------------------------- */
pre, code, kbd, samp{
  color: var(--ipa-atlantic-navy);
  background: var(--ipa-grey-50);
  border: 1px solid var(--ipa-border);
}
blockquote{
  color: var(--ipa-atlantic-navy);
  border-left: 4px solid var(--ipa-royal);
  background: color-mix(in oklab, var(--ipa-royal) 6%, #fff);
}

/* Only on /Web/Sign_In2.aspx */
form[action*="Sign_In2.aspx"] .container.main-container {
  min-height: 100vh !important;
  background-image: url("/images/Hirearchy=secondary%2001.png") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  max-width: 1915px;
  /* background-attachment: fixed !important; */ /* optional */
}

/* Let your image show through */
form[action*="Sign_In2.aspx"] .body-container,
form[action*="Sign_In2.aspx"] .col-primary,
form[action*="Sign_In2.aspx"] .col-secondary,
form[action*="Sign_In2.aspx"] #mainContentWrapper,
form[action*="Sign_In2.aspx"] .panel,
form[action*="Sign_In2.aspx"] .panel-body-container,
form[action*="Sign_In2.aspx"] .panel-body {
  background: transparent !important;
}

/* ===== Desktop navbar ???????? IPA look & feel ===== */
@media (min-width: 1200px) {

  /* 1) Header bar shell (translucent, blur, shadow, spacing) */
  #hd {
    background: rgba(255,255,255,.9) !important;
    backdrop-filter: blur(2.5px);
    box-shadow: 0 6px 18px rgba(0,0,0,.10);
    padding: 24px 120px 20px; /* top/right/bottom */
  }

  /* keep header pieces in one line */
  #hd .header-background-container,
  #hd .header-logo-container,
  #hd .header-primary-nav-container,
  #hd .header-aux-container {
    align-items: center;
  }

  /* Optional: keep the logo to ~85px high like the comp (you said logo is handled) */
  .header-logo-container img {
    max-height: 85px;
    height: 85px;
    width: auto;
  }

  /* 2) Primary nav (RadMenu) ???????? type, spacing, hover underline */
  /* center the root items and add the 40px gap */
  .RadMenu.MainMenu .rmRootGroup {
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 40px; /* Figma */
  }

  /* root links */
  .RadMenu_Coffee.MainMenu .rmRootGroup > li > a.rmLink,
  .RadMenu_Coffee.MainMenu .rmRootGroup > li > span.rmLink {
    font-family: var(--font-sans, "DIN Next LT Pro", Inter, "Helvetica Neue", Arial, sans-serif);
    font-weight: 600;               /* Figma 600 */
    font-size: 16px;                /* Figma 16 */
    line-height: 1.5;               /* 24px line-height equivalent */
    color: #0D2C6C !important;      /* IPA Atlantic Navy */
    background: transparent !important;
    border: 0 !important;
    padding: 14px 0 0 !important;   /* Figma top padding */
    margin: 0 !important;
  }

  /* remove Telerik hover bg */
  .RadMenu_Coffee .rmLink:hover,
  .RadMenu_Coffee .rmSelected > a.rmLink {
    background: transparent !important;
  }

  /* underline on hover/active (2px) */
  .RadMenu_Coffee.MainMenu .rmRootGroup > li > a.rmLink::after {
    content: "";
    display: block;
    height: 2px;
    width: 0;
    background: #0D2C6C;
    transition: width .2s ease;
  }
  .RadMenu_Coffee.MainMenu .rmRootGroup > li:hover > a.rmLink::after,
  .RadMenu_Coffee.MainMenu .rmRootGroup > li.rmFocused > a.rmLink::after,
  .RadMenu_Coffee.MainMenu .rmSelected > a.rmLink::after {
    width: 100%;
  }

  /* 3) Right-side controls (search + login) */
  /* Search icon button -> 46x46 bordered circle */
  .nav-auxiliary .searchbar-toggle {
    width: 46px; height: 46px;
    display: inline-flex;
    align-items: center; justify-content: center;
    padding: 12px;
    border: 2px solid #0D2C6C;
    border-radius: 9999px;
    background: transparent;
    box-shadow: none;
  }

  /* Login pill */
  .nav-auxiliary .account-menu .sign-in-link,
  .nav-auxiliary .sign-in-link {
    display: inline-flex;
    align-items: center; justify-content: center;
    padding: 14px 20px;
    border: 2px solid #0D2C6C;
    border-radius: 9999px;
    background: transparent !important;
    color: #0D2C6C !important;
    font-family: "DIN Next LT Pro", Inter, Arial, sans-serif;
    font-weight: 500;               /* Label/MD Upper in comp */
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  /* 4) Clean up any default menu tab chrome from Flat_White */
  html .RadTabStrip_MetroTouch .rtsLevel1 a.rtsLink {
    background: transparent !important;
    border: 0 !important;
    color: #0D2C6C !important;
  }
}

.rmIcon {
    display: none !important; }

.header-aux-container {
    background: none !important;
}
/* ===== Mobile / Tablet navbar overrides ===== */

/* Tablet and down */
@media (max-width: 1199px) {

  /* Header bar */
  #hd {
    padding: 14px 16px !important;
    background: rgba(255,255,255,.95) !important;
    backdrop-filter: blur(2.5px);
    box-shadow: 0 4px 14px rgba(0,0,0,.10);
  }

  /* Logo sizing */
  .header-logo-container img {
    max-height: 56px;
    height: 56px;
    width: auto;
  }

  /* Show the toggles in the utility area */
  .nav-auxiliary .navbar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    padding: 10px;
    border: 2px solid #0D2C6C;
    border-radius: 9999px;
    background: transparent;
    box-shadow: none;
    margin-left: 8px;
  }

  /* Right-side actions row (search + login + hamburger) */
  #hd .header-aux-container {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  /* LOGIN pill in header (kept compact on mobile) */
  .nav-auxiliary .account-menu .sign-in-link,
  .nav-auxiliary .sign-in-link {
    padding: 10px 16px;
    font-size: 15px;
    letter-spacing: .04em;
  }

  /* Collapse panel for PRIMARY NAV when opened */
  #ctl01_ciPrimaryNavigation_PrimaryNavigationControl.collapse.in,
  #ctl01_ciPrimaryNavigation_PrimaryNavigationControl.collapsing {
    position: static;
    background: #fff;
    width: 100%;
    margin-top: 12px;
    padding: 8px 0;
    border-top: 1px solid var(--ipa-border, #D8DEE3);
    box-shadow: 0 8px 18px rgba(0,0,0,.08);
  }

  /* Make the RadMenu a vertical list */
  .RadMenu.MainMenu .rmRootGroup {
    display: block !important;
    gap: 0 !important;
  }

  /* Root items: full-width, comfy tap targets */
  .RadMenu_Coffee.MainMenu .rmRootGroup > li > a.rmLink,
  .RadMenu_Coffee.MainMenu .rmRootGroup > li > span.rmLink {
    display: block !important;
    padding: 14px 16px !important;  /* ???????44px height with line-height */
    margin: 0 !important;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    color: #0D2C6C !important;
    border: 0 !important;
  }

  /* Replace the desktop underline with row highlight on hover/focus */
  .RadMenu_Coffee.MainMenu .rmRootGroup > li > a.rmLink::after { display: none; }
  .RadMenu_Coffee.MainMenu .rmRootGroup > li > a.rmLink:hover,
  .RadMenu_Coffee.MainMenu .rmRootGroup > li.rmFocused > a.rmLink {
    background: var(--ipa-grey-50, #F6F7F8) !important;
  }

  /* Submenus: make sure dropdowns render as block lists too */
  .RadMenu_Coffee .rmGroup,
  .RadMenu_Coffee .rmMultiColumn {
    position: static !important;
    float: none !important;
    width: 100% !important;
    box-shadow: none !important;
    border: 0 !important;
    background: transparent !important;
  }
  .RadMenu_Coffee .rmGroup .rmItem > .rmLink {
    padding: 12px 24px !important;
    color: #0D2C6C !important;
  }

  /* SEARCH collapse panel (keeps things neat) */
  #ctl01_ciUtilityNavigation_search-collapse.searchbar-collapse.collapse.in,
  #ctl01_ciUtilityNavigation_search-collapse.searchbar-collapse.collapsing {
    background: #fff;
    margin-top: 10px;
    padding: 10px 12px;
    border-top: 1px solid var(--ipa-border, #D8DEE3);
    box-shadow: 0 8px 18px rgba(0,0,0,.08);
  }
  .search-container .header-search input[type="text"] {
    height: 44px;
  }

  /* Hide any desktop-only tab chrome that may sneak in */
  html .RadTabStrip_MetroTouch .rtsLevel1 a.rtsLink {
    background: transparent !important;
    border: 0 !important;
  }
}

/* Small phones: tighter paddings */
@media (max-width: 480px) {
  #hd { padding: 12px !important; }
  .nav-auxiliary .account-menu .sign-in-link,
  .nav-auxiliary .sign-in-link { padding: 10px 14px; font-size: 14px; }
  .RadMenu_Coffee.MainMenu .rmRootGroup > li > a.rmLink { padding: 12px 14px !important; }
}

/* =====================================
   IPA Dropdown Styling ???????? Second Level
   ===================================== */

/* Target sub-menu links inside the RadMenu dropdowns */
.RadMenu_Coffee .rmGroup .rmItem > .rmLink,
.RadMenu_Coffee .rmGroup .rmItem > .rmText {
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  line-height: 150% !important;
  color: #595959 !important; /* medium grey */
  text-decoration: none !important;
  padding: 8px 18px !important;
  background: transparent !important;
}

/* Hover / focus state (optional, subtle highlight) */
.RadMenu_Coffee .rmGroup .rmItem > .rmLink:hover,
.RadMenu_Coffee .rmGroup .rmItem > .rmText:hover {
  color: #0D2C6C !important; /* your IPA blue */
  background: #F5F5F5 !important;
}

.nav-text {
color: #192A66 !important;}

.nav-aux-cart {
color: #192A66 !important;}

@media (min-width: 1380px) {
    header.header .header-logo-container {
        max-width: 380px;
        justify-self: auto !important;
    }
}

/* Panel header font size */
.panel-header, 
.panel-title {
    font-size: 1.25rem; /* change this to whatever size you want */
    font-family: var(--font-sans); /* optional: keep consistent font */
    color: var(--ipa-atlantic-navy); /* optional: header color */
    font-weight: 600; /* optional: make it bold */
}

/*clear query text*/

.clearQ .rgHeader{
	display:none!important;
}

.clearQ .RadGrid_MetroTouch{
	border:none;
}

.clearQ .RadGrid_MetroTouch .rgAltRow {
    background: #fff;
}

.clearQ .RadGrid_MetroTouch .rgAltRow td,
.clearQ .RadGrid_MetroTouch .rgRow td {
    border:none;
}


.clearQ .RadGrid.RadGrid_MetroTouch .rgMasterTable .rgSelectedCell, 
.clearQ .RadGrid.RadGrid_MetroTouch .rgSelectedRow, 
.clearQ .RadGrid.RadGrid_MetroTouch td.rgEditRow .rgSelectedRow, 
.clearQ .RadGrid.RadGrid_MetroTouch .rgSelectedRow td.rgSorted, 
.clearQ .RadGrid.RadGrid_MetroTouch th.rgSorted, 
.clearQ .RadGrid.RadGrid_Metro .rgMasterTable .rgSelectedCell, 
.clearQ .RadGrid.RadGrid_Metro .rgSelectedRow, 
.clearQ .RadGrid.RadGrid_Metro td.rgEditRow .rgSelectedRow, 
.clearQ .RadGrid.RadGrid_Metro .rgSelectedRow td.rgSorted, 
.clearQ .RadGrid.RadGrid_Metro th.rgSorted {
    background-color: transparent;
    border-color:transparent;
}

.clearQ .RadGrid.RadGrid_MetroTouch .rgMasterTable .rgSelectedCell a, 
.clearQ .RadGrid.RadGrid_MetroTouch .rgSelectedRow a, 
.clearQ .RadGrid.RadGrid_MetroTouch td.rgEditRow .rgSelectedRow a, 
.clearQ .RadGrid.RadGrid_MetroTouch .rgSelectedRow td.rgSorted a, 
.clearQ .RadGrid.RadGrid_MetroTouch th.rgSorted a, 
.clearQ .RadGrid.RadGrid_Metro .rgMasterTable .rgSelectedCell a, 
.clearQ .RadGrid.RadGrid_Metro .rgSelectedRow a, 
.clearQ .RadGrid.RadGrid_Metro td.rgEditRow .rgSelectedRow a, 
.clearQ .RadGrid.RadGrid_Metro .rgSelectedRow td.rgSorted a, 
.clearQ .RadGrid.RadGrid_Metro th.rgSorted a {
    color: transparent!important;
}

.clearQ .RadGrid.RadGrid_MetroTouch .rgMasterTable, 
.clearQ .RadGrid.RadGrid_Metro .rgMasterTable {
    background-color: transparent!important;
}

.clearQ .RadGrid_MetroTouch {
    background-color: transparent!important;
}

.clearQ .RadGrid.RadGrid_MetroTouch .rgRow td, 
.clearQ .RadGrid.RadGrid_MetroTouch .rgRow td:first-child,
.clearQ .RadGrid.RadGrid_MetroTouch .rgAltRow td, 
.clearQ .RadGrid.RadGrid_MetroTouch .rgAltRow td:first-child{
   padding:0px;
}

.clearQ .panel-body, 
.clearQ .PanelBody {
    padding: 0px;
}

.clearQ .GridTitlePanel, .clearQ .GridFooterPanel {
    margin-top: 0px;
    margin-bottom: 0px;
}

.hideIQAHeader thead{
	display:none;
}

.hideThis{
	display:none;	
}

.SignInButton.TextButton {
    background-color: #192A66 !important;
}

.nav-auxiliary .nav-aux-button.nav-aux-cart .nav-text:before {
    background: #192A66 !important;
}

.stacked-tabs .select-tab {
    background: #192A66 !important;
}

.RadGrid.RadGrid_MetroTouch .rgMasterTable .rgSelectedCell a, .RadGrid.RadGrid_MetroTouch .rgSelectedRow a, .RadGrid.RadGrid_MetroTouch td.rgEditRow .rgSelectedRow a, .RadGrid.RadGrid_MetroTouch .rgSelectedRow td.rgSorted a, .RadGrid.RadGrid_MetroTouch th.rgSorted a, .RadGrid.RadGrid_Metro .rgMasterTable .rgSelectedCell a, .RadGrid.RadGrid_Metro .rgSelectedRow a, .RadGrid.RadGrid_Metro td.rgEditRow .rgSelectedRow a, .RadGrid.RadGrid_Metro .rgSelectedRow td.rgSorted a, .RadGrid.RadGrid_Metro th.rgSorted a {
     color: var(--ipa-link) !important; 
}
/* ==========================================================================
   IPA Overrides for Flat White
   Place AFTER 99-Flat_White.css
   ========================================================================== */

/* --- Root tokens remap to IPA palette --- */
:root {
    /* IPA brand palette */
    --ipa-atlantic-navy: #0D2C6C;
    --ipa-royal-blue:    #1F4FA8;
    --ipa-sky-blue:      #4E7DD9;
    --ipa-grey-100:      #F4F4F4;
    --ipa-grey-400:      #999999;

    /* Wire into Flat White’s existing tokens */
    --aux-bg: var(--ipa-atlantic-navy);
    --aux-link-color: #ffffff;
    --nav-color: var(--ipa-atlantic-navy);
    --system-icon-color: var(--ipa-atlantic-navy);
    --system-icon-color-hover: var(--ipa-royal-blue);
}

/* --- Global typography & body copy --- */
body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 18px;
    line-height: 1.6;
    color: #333333;
}

/* Headings */
h1, .h1, .PageTitle {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 700;
    color: var(--ipa-atlantic-navy);
    margin-top: 0;
}

h2, .h2, .PanelTitle {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 600;
    color: var(--ipa-atlantic-navy);
}

h3, .SectionTitle {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 600;
    color: var(--ipa-atlantic-navy);
}

h4, .h4, .SectionLabel,
h5, .h5, .SectionLabelSmaller,
h6, .h6 {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 500;
    color: #333333;
}

/* --- Links (global, grids, tooltips) --- */
a, .Link,
.RadGrid.RadGrid .rgRow a,
.RadGrid.RadGrid .rgAltRow a,
.RadGrid.RadGrid .rgEditForm a,
.k-grid.k-grid a,
.RadToolTip.RadToolTip a {
    color: var(--ipa-royal-blue);
    text-decoration: none;
}

a:visited, .Link:visited,
.RadGrid.RadGrid .rgRow a:visited,
.RadGrid.RadGrid .rgAltRow a:visited,
.RadGrid.RadGrid .rgEditForm a:visited,
.k-grid.k-grid a:visited,
.RadToolTip.RadToolTip a:visited {
    color: var(--ipa-sky-blue);
}

a:hover, a:focus, a:active,
.Link:hover, .Link:focus, .Link:active,
.RadGrid.RadGrid .rgRow a:hover,
.RadGrid.RadGrid .rgRow a:focus,
.RadGrid.RadGrid .rgRow a:active,
.RadGrid.RadGrid .rgAltRow a:hover,
.RadGrid.RadGrid .rgAltRow a:focus,
.RadGrid.RadGrid .rgAltRow a:active,
.RadGrid.RadGrid .rgEditForm a:hover,
.RadGrid.RadGrid .rgEditForm a:focus,
.RadGrid.RadGrid .rgEditForm a:active,
.k-grid.k-grid a:hover,
.k-grid.k-grid a:focus,
.k-grid.k-grid a:active,
.RadToolTip.RadToolTip a:hover,
.RadToolTip.RadToolTip a:focus,
.RadToolTip.RadToolTip a:active {
    color: var(--ipa-atlantic-navy);
    text-decoration: underline;
}

/* Disabled links */
a.aspNetDisabled,
a.aspNetDisabled:hover,
a.aspNetDisabled:focus,
a.aspNetDisabled:active,
a.aspNetDisabled:visited,
a:disabled,
a:disabled:hover,
a:disabled:focus,
a:disabled:active,
a:disabled:visited,
.Link.aspNetDisabled,
.Link.aspNetDisabled:hover,
.Link.aspNetDisabled:focus,
.Link.aspNetDisabled:active,
.Link.aspNetDisabled:visited,
.Link:disabled,
.Link:disabled:hover,
.Link:disabled:focus,
.Link:disabled:active,
.Link:disabled:visited,
.RadGrid.RadGrid .rgRow a.aspNetDisabled,
.RadGrid.RadGrid .rgRow a:disabled,
.RadGrid.RadGrid .rgAltRow a.aspNetDisabled,
.RadGrid.RadGrid .rgAltRow a:disabled,
.RadGrid.RadGrid .rgEditForm a.aspNetDisabled,
.RadGrid.RadGrid .rgEditForm a:disabled,
.k-grid.k-grid a.aspNetDisabled,
.k-grid.k-grid a:disabled,
.RadToolTip.RadToolTip a.aspNetDisabled,
.RadToolTip.RadToolTip a:disabled {
    color: var(--ipa-grey-400);
    text-decoration: none;
}

/* --- Header background / home header fallback --- */
.header-bg {
    background-color: #ffffff;
}

.Wrapper-HomePage .header-background-container {
    background-color: var(--ipa-atlantic-navy);
}

/* --- Auxiliary nav / account / sign-in links --- */
.header-aux-container .UtilityAuthentication a,
.header-aux-container a.NavigationLink,
.header-aux-container .UtilityNavigation .account-menu > li > a.sign-in-link,
.header-aux-container .account-toggle .nav-text {
    color: var(--aux-link-color);
    font-size: 75%;
    font-weight: 700;
    text-decoration: none;
}

.header-aux-container .UtilityAuthentication a:hover,
.header-aux-container .UtilityAuthentication a:focus,
.header-aux-container a.NavigationLink:hover,
.header-aux-container a.NavigationLink:focus,
.header-aux-container .UtilityNavigation .account-menu > li > a.sign-in-link:hover,
.header-aux-container .UtilityNavigation .account-menu > li > a.sign-in-link:focus,
.header-aux-container .account-toggle .nav-text:hover,
.header-aux-container .account-toggle .nav-text:focus {
    color: var(--aux-link-color);
    text-decoration: underline;
}

/* Keep dark header variant white-on-navy */
.header-dark .header-aux-container .UtilityAuthentication a,
.header-dark .header-aux-container a.NavigationLink,
.header-dark .header-aux-container .UtilityNavigation .account-menu > li > a.sign-in-link,
.header-dark .header-aux-container .account-toggle .nav-text {
    color: #ffffff;
}

/* --- Primary navigation / secondary nav (left tree & top tabs) --- */
.RadTreeView.RadTreeView_Coffee a.rtIn {
    color: #333333;
    transition: all 0.2s ease-in;
}

.RadTreeView.RadTreeView_Coffee a.rtIn:hover,
.RadTreeView.RadTreeView_Coffee a.rtIn:focus {
    background-color: transparent;
    color: var(--ipa-royal-blue);
}

.RadTreeView.RadTreeView_Coffee .rtSelected > a.rtIn,
.RadTreeView.RadTreeView_Coffee .child-is-selected.rtIn,
.RadTreeView.RadTreeView_Coffee .child-is-selected-wrapper .rtIn {
    background-color: transparent;
    color: var(--ipa-atlantic-navy);
    font-weight: 600 !important;
}

/* Secondary nav block header */
.nav-secondary .sub-nav-head {
    background-color: var(--ipa-grey-100);
    color: var(--ipa-atlantic-navy);
    font-weight: 700;
    font-size: 120%;
    padding: 10px 15px;
    text-transform: uppercase;
}

/* Selected item in secondary tree */
.nav-secondary .rtSelected > a.rtIn,
.nav-secondary .rtSelected + ul li:first-child .rtIn {
    color: var(--ipa-atlantic-navy);
    font-weight: 600 !important;
}

/* Horizontal secondary nav (top) */
.secondary-nav-top .RadTreeView.RadTreeView_Coffee > .rtUL > .rtLI {
    border-top: none;
}

.secondary-nav-top .RadTreeView.RadTreeView_Coffee a.rtIn {
    color: var(--ipa-atlantic-navy);
    font-weight: 600 !important;
    font-size: 1.2em !important;
}

/* --- Cart badge / aux buttons to IPA accent --- */
.nav-auxiliary .nav-aux-button.nav-aux-cart .cartCenter {
    color: #ffffff;
    background-color: var(--ipa-royal-blue);
    border-radius: 20px;
    box-shadow: -1px 1px 0 rgba(34, 34, 34, 0.6);
}

.nav-auxiliary .nav-aux-button.nav-aux-cart .nav-text,
.nav-auxiliary .nav-aux-button.nav-aux-account .nav-text {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--aux-link-color);
}

/* --- Buttons (TextButton / Bootstrap) --- */
.TextButton.PrimaryButton,
a.TextButton.PrimaryButton,
input[type="submit"].TextButton.PrimaryButton,
.btn-primary {
    background-color: var(--ipa-atlantic-navy);
    border-color: var(--ipa-atlantic-navy);
    color: #ffffff;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 600;
}

.TextButton.PrimaryButton:hover,
.TextButton.PrimaryButton:focus,
a.TextButton.PrimaryButton:hover,
a.TextButton.PrimaryButton:focus,
input[type="submit"].TextButton.PrimaryButton:hover,
input[type="submit"].TextButton.PrimaryButton:focus,
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--ipa-royal-blue);
    border-color: var(--ipa-royal-blue);
    color: #ffffff;
}

/* Secondary / neutral buttons */
.TextButton:not(.PrimaryButton),
.btn-default,
.btn-secondary {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    border-color: var(--ipa-atlantic-navy);
    color: var(--ipa-atlantic-navy);
    background-color: #ffffff;
}

.TextButton:not(.PrimaryButton):hover,
.TextButton:not(.PrimaryButton):focus,
.btn-default:hover,
.btn-default:focus,
.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--ipa-grey-100);
    color: var(--ipa-atlantic-navy);
}

/* --- Hero / carousel text colour & gradients aligned to IPA blues --- */
.carousel .carousel-caption,
.carousel2 .carousel-caption,
.HomePageFullWidthArea .carousel-caption {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #ffffff;
}

/* Gradient text used by callout classes – swap to IPA blues */
@media only screen {
    .callout-gradient-text {
        background: linear-gradient(50deg, #0D2C6C 15%, #1F4FA8 80%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .callout2-gradient-text {
        background: linear-gradient(135deg, #1F4FA8 45%, #4E7DD9 85%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}


/* ==========================================================================
   IPA Overrides for Flat White
   Place AFTER 99-Flat_White.css
   ========================================================================== */

/* --- Root tokens remap to IPA palette --- */
:root {
    /* IPA brand palette */
    --ipa-atlantic-navy: #0D2C6C;
    --ipa-royal-blue:    #1F4FA8;
    --ipa-sky-blue:      #4E7DD9;
    --ipa-grey-100:      #F4F4F4;
    --ipa-grey-400:      #999999;

    /* Wire into Flat White’s existing tokens */
    --aux-bg: var(--ipa-atlantic-navy);
    --aux-link-color: #ffffff;
    --nav-color: var(--ipa-atlantic-navy);
    --system-icon-color: var(--ipa-atlantic-navy);
    --system-icon-color-hover: var(--ipa-royal-blue);
}

/* --- Global typography & body copy --- */
body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 18px !important;
    line-height: 1.6;
    color: #333333;
}

/* Headings */
h1, .h1, .PageTitle {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-weight: 700 !important;
    color: var(--ipa-atlantic-navy) !important;
    margin-top: 0;
}

h2, .h2, .PanelTitle {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-weight: 600 !important;
    color: var(--ipa-atlantic-navy) !important;
}

h3, .SectionTitle {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-weight: 600 !important;
    color: var(--ipa-atlantic-navy);
}

h4, .h4, .SectionLabel,
h5, .h5, .SectionLabelSmaller,
h6, .h6 {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-weight: 500;
    color: #333333;
}

/* --- Links (global, grids, tooltips) --- */
a, .Link,
.RadGrid.RadGrid .rgRow a,
.RadGrid.RadGrid .rgAltRow a,
.RadGrid.RadGrid .rgEditForm a,
.k-grid.k-grid a,
.RadToolTip.RadToolTip a {
    color: var(--ipa-royal-blue);
    text-decoration: none;
}

a:visited, .Link:visited,
.RadGrid.RadGrid .rgRow a:visited,
.RadGrid.RadGrid .rgAltRow a:visited,
.RadGrid.RadGrid .rgEditForm a:visited,
.k-grid.k-grid a:visited,
.RadToolTip.RadToolTip a:visited {
    color: var(--ipa-sky-blue);
}

a:hover, a:focus, a:active,
.Link:hover, .Link:focus, .Link:active,
.RadGrid.RadGrid .rgRow a:hover,
.RadGrid.RadGrid .rgRow a:focus,
.RadGrid.RadGrid .rgRow a:active,
.RadGrid.RadGrid .rgAltRow a:hover,
.RadGrid.RadGrid .rgAltRow a:focus,
.RadGrid.RadGrid .rgAltRow a:active,
.RadGrid.RadGrid .rgEditForm a:hover,
.RadGrid.RadGrid .rgEditForm a:focus,
.RadGrid.RadGrid .rgEditForm a:active,
.k-grid.k-grid a:hover,
.k-grid.k-grid a:focus,
.k-grid.k-grid a:active,
.RadToolTip.RadToolTip a:hover,
.RadToolTip.RadToolTip a:focus,
.RadToolTip.RadToolTip a:active {
    color: var(--ipa-atlantic-navy);
    text-decoration: underline;
}

/* Disabled links */
a.aspNetDisabled,
a.aspNetDisabled:hover,
a.aspNetDisabled:focus,
a.aspNetDisabled:active,
a.aspNetDisabled:visited,
a:disabled,
a:disabled:hover,
a:disabled:focus,
a:disabled:active,
a:disabled:visited,
.Link.aspNetDisabled,
.Link.aspNetDisabled:hover,
.Link.aspNetDisabled:focus,
.Link.aspNetDisabled:active,
.Link.aspNetDisabled:visited,
.Link:disabled,
.Link:disabled:hover,
.Link:disabled:focus,
.Link:disabled:active,
.Link:disabled:visited,
.RadGrid.RadGrid .rgRow a.aspNetDisabled,
.RadGrid.RadGrid .rgRow a:disabled,
.RadGrid.RadGrid .rgAltRow a.aspNetDisabled,
.RadGrid.RadGrid .rgAltRow a:disabled,
.RadGrid.RadGrid .rgEditForm a.aspNetDisabled,
.RadGrid.RadGrid .rgEditForm a:disabled,
.k-grid.k-grid a.aspNetDisabled,
.k-grid.k-grid a:disabled,
.RadToolTip.RadToolTip a.aspNetDisabled,
.RadToolTip.RadToolTip a:disabled {
    color: var(--ipa-grey-400);
    text-decoration: none;
}

/* --- Header background / home header fallback --- */
.header-bg {
    background-color: #ffffff;
}

.Wrapper-HomePage .header-background-container {
    background-color: var(--ipa-atlantic-navy);
}

/* --- Auxiliary nav / account / sign-in links --- */
.header-aux-container .UtilityAuthentication a,
.header-aux-container a.NavigationLink,
.header-aux-container .UtilityNavigation .account-menu > li > a.sign-in-link,
.header-aux-container .account-toggle .nav-text {
    color: var(--aux-link-color);
    font-size: 75%;
    font-weight: 700;
    text-decoration: none;
}

.header-aux-container .UtilityAuthentication a:hover,
.header-aux-container .UtilityAuthentication a:focus,
.header-aux-container a.NavigationLink:hover,
.header-aux-container a.NavigationLink:focus,
.header-aux-container .UtilityNavigation .account-menu > li > a.sign-in-link:hover,
.header-aux-container .UtilityNavigation .account-menu > li > a.sign-in-link:focus,
.header-aux-container .account-toggle .nav-text:hover,
.header-aux-container .account-toggle .nav-text:focus {
    color: var(--aux-link-color);
    text-decoration: underline;
}

/* Keep dark header variant white-on-navy */
.header-dark .header-aux-container .UtilityAuthentication a,
.header-dark .header-aux-container a.NavigationLink,
.header-dark .header-aux-container .UtilityNavigation .account-menu > li > a.sign-in-link,
.header-dark .header-aux-container .account-toggle .nav-text {
    color: #ffffff;
}

/* --- Primary navigation / secondary nav (left tree & top tabs) --- */
.RadTreeView.RadTreeView_Coffee a.rtIn {
    color: #333333;
    transition: all 0.2s ease-in;
}

.RadTreeView.RadTreeView_Coffee a.rtIn:hover,
.RadTreeView.RadTreeView_Coffee a.rtIn:focus {
    background-color: transparent;
    color: var(--ipa-royal-blue);
}

.RadTreeView.RadTreeView_Coffee .rtSelected > a.rtIn,
.RadTreeView.RadTreeView_Coffee .child-is-selected.rtIn,
.RadTreeView.RadTreeView_Coffee .child-is-selected-wrapper .rtIn {
    background-color: transparent;
    color: var(--ipa-atlantic-navy);
    font-weight: 600 !important;
}

/* Secondary nav block header */
.nav-secondary .sub-nav-head {
    background-color: var(--ipa-grey-100);
    color: var(--ipa-atlantic-navy);
    font-weight: 700;
    font-size: 120%;
    padding: 10px 15px;
    text-transform: uppercase;
}

/* Selected item in secondary tree */
.nav-secondary .rtSelected > a.rtIn,
.nav-secondary .rtSelected + ul li:first-child .rtIn {
    color: var(--ipa-atlantic-navy);
    font-weight: 600 !important;
}

/* Horizontal secondary nav (top) */
.secondary-nav-top .RadTreeView.RadTreeView_Coffee > .rtUL > .rtLI {
    border-top: none;
}

.secondary-nav-top .RadTreeView.RadTreeView_Coffee a.rtIn {
    color: var(--ipa-atlantic-navy);
    font-weight: 600 !important;
    font-size: 1.2em !important;
}

/* --- Cart badge / aux buttons to IPA accent --- */
.nav-auxiliary .nav-aux-button.nav-aux-cart .cartCenter {
    color: #ffffff;
    background-color: var(--ipa-royal-blue);
    border-radius: 20px;
    box-shadow: -1px 1px 0 rgba(34, 34, 34, 0.6);
}

.nav-auxiliary .nav-aux-button.nav-aux-cart .nav-text,
.nav-auxiliary .nav-aux-button.nav-aux-account .nav-text {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--aux-link-color);
}

/* --- Buttons (TextButton / Bootstrap) --- */
.TextButton.PrimaryButton,
a.TextButton.PrimaryButton,
input[type="submit"].TextButton.PrimaryButton,
.btn-primary {
    background-color: var(--ipa-atlantic-navy);
    border-color: var(--ipa-atlantic-navy);
    color: #ffffff;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 600;
}

.TextButton.PrimaryButton:hover,
.TextButton.PrimaryButton:focus,
a.TextButton.PrimaryButton:hover,
a.TextButton.PrimaryButton:focus,
input[type="submit"].TextButton.PrimaryButton:hover,
input[type="submit"].TextButton.PrimaryButton:focus,
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--ipa-royal-blue);
    border-color: var(--ipa-royal-blue);
    color: #ffffff;
}

/* Secondary / neutral buttons */
.TextButton:not(.PrimaryButton),
.btn-default,
.btn-secondary {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    border-color: var(--ipa-atlantic-navy);
    color: var(--ipa-atlantic-navy);
    background-color: #ffffff;
}

.TextButton:not(.PrimaryButton):hover,
.TextButton:not(.PrimaryButton):focus,
.btn-default:hover,
.btn-default:focus,
.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--ipa-grey-100);
    color: var(--ipa-atlantic-navy);
}

/* --- Hero / carousel text colour & gradients aligned to IPA blues --- */
.carousel .carousel-caption,
.carousel2 .carousel-caption,
.HomePageFullWidthArea .carousel-caption {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #ffffff;
}

/* Gradient text used by callout classes – swap to IPA blues */
@media only screen {
    .callout-gradient-text {
        background: linear-gradient(50deg, #0D2C6C 15%, #1F4FA8 80%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .callout2-gradient-text {
        background: linear-gradient(135deg, #1F4FA8 45%, #4E7DD9 85%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}
/**
 * IPA Header Standalone CSS
 *
 * This file contains all CSS rules and Tailwind classes extracted from:
 * - IPA-header-extract.html
 * - _mobileNavigation.scss
 * - _desktopNavigation.scss
 * - _blobBackground.scss (for header background)
 *
 * For third-party use, include this file along with Tailwind CSS base utilities
 * or ensure all Tailwind utility classes are available.
 */

/* ==========================================================================
   CSS Custom Properties & Variables
   ========================================================================== */

:root {
  /* Color variables extracted from theme.config.js */
  /* Hex values as fallbacks for older browsers */

  /* Secondary color (purple/navy) - matches oklch(0.3152 0.1176 262.41) */
  --color-secondary: #0d2c6c;

  /* Grey subtle (light grey) - matches oklch(0.9612 0 0) */
  --color-grey-subtle: #f2f2f2;

  /* Warm plum - matches oklch(0.4867 0.1803 336.11) */
  --color-warm-plum: #a33a94;

  /* Link colors */
  /* Link default - matches oklch(0.3152 0.1176 262.41) */
  --color-link: #0d2c6c;

  /* Link hover - matches oklch(0.2305 0.0781 262.98) */
  --color-link-hover: #081a41;

  /* Link focused - matches oklch(0.6209 0.0502 239.85) */
  --color-link-focused: #6e80a7;

  /* Base text color (primary grey) - matches oklch(0.464 0 0) */
  --color-base-text: #767676;
}

/* Use OKLCH colors for modern browsers that support it */
@supports (color: oklch(0 0 0)) {
  :root {
    --color-secondary: oklch(0.3152 0.1176 262.41);
    --color-grey-subtle: oklch(0.9612 0 0);
    --color-warm-plum: oklch(0.4867 0.1803 336.11);
    --color-link: oklch(0.3152 0.1176 262.41);
    --color-link-hover: oklch(0.2305 0.0781 262.98);
    --color-link-focused: oklch(0.6209 0.0502 239.85);
    --color-base-text: oklch(0.464 0 0);
  }
}

@property --blobProgress {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

/* ==========================================================================
   Blob Background Animations
   ========================================================================== */

@keyframes blobProgressAnimation {
  to {
    --blobProgress: 1;
  }
}

@keyframes blobHorizontalProgressAnimation {
  0% {
    --blobProgress: 0;
  }
  33% {
    --blobProgress: -1;
  }
  66% {
    --blobProgress: 1;
  }
  100% {
    --blobProgress: 0;
  }
}

@keyframes blobUpAndDownProgressAnimation {
  0% {
    --blobProgress: 0;
  }
  33% {
    --blobProgress: 0.5;
  }
  66% {
    --blobProgress: -1;
  }
  100% {
    --blobProgress: 0;
  }
}

@keyframes blobDownProgressAnimation {
  0% {
    --blobProgress: 0;
  }
  50% {
    --blobProgress: 1;
  }
  100% {
    --blobProgress: 0;
  }
}

/* ==========================================================================
   Blob Background Styles
   ========================================================================== */

.blobBackground {
  position: absolute;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  left: 50%;
  translate: -50%;
  z-index: -1;
}

.blobBackground::before,
.blobBackground::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.blobBackground::before {
  z-index: 1;
  background: linear-gradient(to top, white 0%, transparent 10%);
}

.blobBackground.animated::after {
  background-image: url('./assets/bg-primary.png');
  background-size: cover;
  background-position: top right;
}

.blobBackground.animated .purple.lowerRight {
  top: calc(70% - var(--circle-size) / 2);
  left: calc(75% - var(--circle-size) / 2);
  transform: translate(calc(50% * var(--blobProgress)), calc(10% * var(--blobProgress)));
  transform-origin: center;
  animation: blobHorizontalProgressAnimation 10s 0.75s ease infinite;
  opacity: 0.8;
}

.blobBackground.animated .blue.middleRight {
  top: calc(40% - var(--circle-size) / 2);
  left: calc(55% - var(--circle-size) / 2);
  transform: rotate(calc(360deg * var(--blobProgress)));
  transform-origin: calc(50% - 400px);
  animation: blobProgressAnimation 20s 0.75s reverse infinite;
  opacity: 0.9;
}

.blobBackground.animated .purple.lowerLeft {
  top: calc(70% - var(--circle-size) / 2);
  left: calc(0% - var(--circle-size) / 2);
  transform: rotate(calc(360deg * var(--blobProgress)));
  transform-origin: calc(50% - 400px);
  animation: blobProgressAnimation 10s 0.75s ease infinite;
  opacity: 0.8;
}

.blobBackground.animated .blue.lowerLeft {
  top: calc(70% - var(--circle-size) / 2);
  left: calc(15% - var(--circle-size) / 2);
  transform: translateY(calc(100% * var(--blobProgress)));
  transform-origin: calc(50% + 400px);
  animation: blobUpAndDownProgressAnimation 16s 0.75s linear infinite;
  opacity: 0.9;
}

.blobBackground.animated .blue.topRight {
  top: calc(0% - var(--circle-size) / 2);
  left: calc(70% - var(--circle-size) / 2);
  transform: translateY(calc(100% * var(--blobProgress)));
  transform-origin: calc(50% - 200px);
  animation: blobDownProgressAnimation 12s 0.75s ease infinite;
  opacity: 0.9;
}

.blobBackground.animated .orange.topRight {
  top: calc(10% - var(--circle-size));
  left: calc(100% - var(--circle-size));
  transform: rotate(calc(360deg * var(--blobProgress)));
  transform-origin: calc(50% - 800px) calc(50% + 200px);
  animation: blobProgressAnimation 20s 0.75s ease infinite;
}

.blobBackground.animated .purple.lowerRight,
.blobBackground.animated .blue.middleRight,
.blobBackground.animated .purple.lowerLeft,
.blobBackground.animated .blue.lowerLeft,
.blobBackground.animated .blue.topRight,
.blobBackground.animated .orange.topRight {
  animation-play-state: running;
}

.blobBackground.animated.not-intersecting .purple.lowerRight,
.blobBackground.animated.not-intersecting .blue.middleRight,
.blobBackground.animated.not-intersecting .purple.lowerLeft,
.blobBackground.animated.not-intersecting .blue.lowerLeft,
.blobBackground.animated.not-intersecting .blue.topRight,
.blobBackground.animated.not-intersecting .orange.topRight {
  animation-play-state: paused;
}

.blobBackground.animated .interactive {
  background: radial-gradient(circle at center, rgba(163, 58, 148, 0.8) 0, rgba(163, 58, 148, 0) 20%) no-repeat;
  width: 100%;
  height: 100%;
  top: -50%;
  left: -50%;
  transform: translate(-100%, -100%);
  opacity: 0.9;
}

.blobContainer {
  filter: url(#blob) blur(40px);
  width: 100%;
  height: 100%;
  opacity: 0.6;
  --circle-size: 80%;
}

.blobContainer div {
  position: absolute;
  mix-blend-mode: hard-light;
}

.blobContainer .purple {
  background: radial-gradient(circle at center, rgba(163, 58, 148, 0.8) 0, rgba(163, 58, 148, 0) 50%) no-repeat;
}

.blobContainer .blue {
  background: radial-gradient(circle at center, rgba(43, 165, 212, 0.8) 0, rgba(43, 165, 212, 0) 50%) no-repeat;
}

.blobContainer .orange {
  background: radial-gradient(circle at center, rgba(251, 142, 9, 0.8) 0, rgba(251, 142, 9, 0) 50%) no-repeat;
}

.blobContainer .single {
  width: var(--circle-size);
  height: var(--circle-size);
}

.blobContainer .double {
  width: calc(var(--circle-size) * 2);
  height: calc(var(--circle-size) * 2);
}

/* ==========================================================================
   Desktop Navigation Styles
   ========================================================================== */

[data-type='desktop-navigation'] {
  flex-basis: 50%;
  flex-grow: 1;
  align-items: center;
  margin-left: auto;
  display: none;
}

@media (min-width: 1280px) {
  [data-type='desktop-navigation'] {
    display: block;
  }
}

[data-type='desktop-navigation'] [data-type='button-decorator'] {
  display: none;
}

[data-type='desktop-navigation'] > ul {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  height: 100%;
}

[data-type='desktop-navigation'] [data-children='false'] {
  height: 100%;
  display: flex;
  align-items: center;
}

[data-type='desktop-navigation'] [data-children='true'] {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: stretch;
  height: 100%;
}

[data-type='desktop-navigation'] [data-level='0'] [data-type='menu-wrapper-0'] {
  display: flex;
  justify-content: space-between;
  height: 100%;
  align-items: center;
}

[data-type='desktop-navigation'] [data-level='0'] [data-type='megamenu-panel'] {
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  justify-content: flex-start;
  transform-origin: top;
  position: absolute;
  transition: all 1000ms;
  z-index: 50;
  top: 100%;
}

[data-type='desktop-navigation'] [data-level='0'] [data-type='megamenu-container'] > ul {
  padding-top: 40px;
  padding-bottom: 40px;
  padding-right: 34px;
  display: flex;
  gap: 1.25rem;
}

[data-type='desktop-navigation'] [data-level='0'] [data-type='megamenu-container'] > ul > li {
  width: 100%;
}

[data-type='desktop-navigation'] [data-level='0'] [data-type='megamenu-container'] > ul > li [data-type='menu-wrapper-1'] {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
}

[data-type='desktop-navigation'] [data-level='0'] [data-type='megamenu-container'] > ul > li li {
  margin-top: 0.75rem;
}

[data-type='desktop-navigation'] [data-level='0'] [data-type='megamenu-container'] > ul > li a {
  font-family: 'Inter', sans-serif;
  display: block;
  transition: all 500ms;
  margin: 0;
  padding: 0;
}

[data-type='desktop-navigation'] [data-level='0'] [data-type='megamenu-container'] > ul > li a:hover span {
  text-decoration-line: underline;
}

[data-type='desktop-navigation'] [data-level='0'] [data-type='megamenu-container'] > ul > li a[data-children='true'] {
  width: 50%;
  display: flex;
  justify-content: space-between;
  flex-grow: 1;
}

[data-type='desktop-navigation'] [data-level='0'] [data-type='megamenu-container'] > ul > li > div a {
  font-weight: 600;
}

[data-type='desktop-navigation'] [data-level='0'].inactive .item-level-0-icon {
  transform: scaleY(1);
}

[data-type='desktop-navigation'] [data-level='0'].inactive [data-type='megamenu-panel'] {
  height: 0;
  opacity: 0;
  min-height: 0 !important;
}

[data-type='desktop-navigation'] [data-level='0'].active .item-level-0-icon {
  transform: scaleY(-1);
}

[data-type='desktop-navigation'] [data-level='0'].active [data-type='megamenu-panel'] {
  height: auto;
  opacity: 1;
  min-height: 224px;
  display: flex;
  align-items: stretch;
}


[data-type='menu-decorator'] {
  padding: 1.5rem;
  background-color: var(--color-secondary, #a33a94);
  width: 100%;
}

@media (min-width: 1280px) {
  [data-type='menu-decorator'] {
    padding-right: 0;
    width: 445px;
  }
}

@media (min-width: 768px) and (max-width: 1279px) {
  [data-type='menu-decorator'] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
  }
}

[data-type='menu-decorator'] > div {
  width: 100%;
  margin: 0;
  margin-top: 1.5rem;
  padding: 0;
  color: white;
  font-size: 1.25rem;
  font-family: 'DIN', sans-serif;
  text-align: left;
}

[data-type='menu-decorator'] > div:first-child {
  margin-top: 0;
}

@media (min-width: 1280px) {
  [data-type='menu-decorator'] > div {
    width: 445px;
  }
}

[data-type='menu-decorator'] > div img {
  width: 100%;
  aspect-ratio: 445 / 195;
  object-fit: cover;
  border-radius: 0.25rem;
}

[data-type='menu-decorator'] a {
  color: white;
  text-decoration: underline;
  padding-left: 0;
  padding-right: 0;
}

[data-type='menu-decorator'] a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   Mobile Navigation Styles
   ========================================================================== */

[data-type='mobile-navigation-wrapper'] {
  position: absolute;
  max-width: 100%;
  left: 0;
  width: 100%;
  top: 100%;
  display: flex;
  transition: all 500ms;
  z-index: 50;
  overflow: hidden;
  flex-wrap: nowrap;
}

@media (min-width: 1280px) {
  [data-type='mobile-navigation-wrapper'] {
    display: none;
  }
}

.peer\/menutrigger.inactive ~ [data-type='mobile-navigation-wrapper'] {
  max-height: 0;
}

[data-type='mobile-navigation-wrapper'] [data-type='button-decorator'] {
  display: none;
}

[data-type='mobile-navigation-wrapper'] > div {
  width: 100%;
}

[data-type='mobile-navigation-wrapper'] [data-level='0'] [data-type='menu-wrapper-0'] {
  display: flex;
  justify-content: space-between;
  height: 100%;
  align-items: center;
  transition: all 500ms;
}

[data-type='mobile-navigation-wrapper'] [data-level='0'] [data-type='menu-wrapper-0'] > a {
  flex-grow: 1;
}

[data-type='mobile-navigation-wrapper'] [data-type='mobile-navigation'] [data-type='megamenu-panel'] [data-type='menu-wrapper-1'] {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

[data-type='mobile-navigation-wrapper'] [data-type='mobile-navigation'] [data-type='megamenu-panel'] [data-type='menu-decorator'] a {
  padding: 0;
}

[data-type='mobile-navigation-wrapper'] [data-type='mobile-navigation'] [data-type='megamenu-level-2'] {
  width: 100%;
  padding-left: 2rem;
  max-height: 0;
  transition: all 500ms;
}

[data-type='mobile-navigation-wrapper'] [data-type='mobile-navigation'] [data-type='megamenu-level-2'].active {
  max-height: none;
}

[data-type='mobile-navigation-wrapper'] [data-type='mobile-navigation'] [data-level='0'] [data-type='megamenu-panel'] {
  transition: all 500ms;
}

[data-type='mobile-navigation-wrapper'] [data-type='mobile-navigation'] [data-level='0'].inactive .item-level-0-icon {
  transform: scaleY(1);
}

[data-type='mobile-navigation-wrapper'] [data-type='mobile-navigation'] [data-level='0'].inactive [data-type='megamenu-panel'] {
  max-height: 0;
  overflow: hidden;
}

[data-type='mobile-navigation-wrapper'] [data-type='mobile-navigation'] [data-level='0'].active .item-level-0-icon {
  transform: scaleY(-1);
}

[data-type='mobile-navigation-wrapper'] [data-type='mobile-navigation'] [data-level='0'].active [data-type='megamenu-panel'] {
  max-height: none;
  overflow: hidden;
}

/* ==========================================================================
   Tailwind Utility Classes Used in HTML
   ========================================================================== */

/* Header Container */
.relative {
  position: relative;
}

.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Container responsive max-widths */
@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1440px) {
  .container {
    max-width: 1440px;
  }
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.h-full {
  height: 100%;
}

.flex {
  display: flex;
}

.no-wrap {
  flex-wrap: nowrap;
}

.items-stretch {
  align-items: stretch;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 1280px) {
  .xl\:px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}

@media (min-width: 1024px) {
  .lg\:grid {
    display: grid;
  }

  .lg\:grid-cols-\[minmax\(0\,min-content\)_minmax\(0\,auto\)_minmax\(0\,max-content\)_minmax\(0\,max-content\)\] {
    grid-template-columns: minmax(0, min-content) minmax(0, auto) minmax(0, max-content) minmax(0, max-content);
  }

  .lg\:justify-normal {
    justify-content: normal;
  }

  .lg\:gap-x-2 {
    column-gap: 0.5rem;
  }
}

.justify-between {
  justify-content: space-between;
}

/* Site Logo */
.basis-1\/4 {
  flex-basis: 25%;
}

@media (min-width: 768px) {
  .md\:basis-1\/5 {
    flex-basis: 20%;
  }

  .md\:h-\[85px\] {
    height: 85px;
  }
}

.max-h-full {
  max-height: 100%;
}

.items-center {
  align-items: center;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.pr-3 {
  padding-right: 0.75rem;
}

.h-\[65px\] {
  height: 65px;
}

.justify-start {
  justify-content: flex-start;
}

.max-w-none {
  max-width: none;
}

.w-auto {
  width: auto;
}

/* Navigation Links */
.font-inter {
  font-family: 'Inter', sans-serif;
}

.font-semibold {
  font-weight: 600;
}

.hover\:underline:hover {
  text-decoration: underline;
}

.focus\:-outline-offset-4:focus {
  outline-offset: -1rem;
}

.underline-offset-8 {
  text-underline-offset: 8px;
}

.text-secondary {
  color: var(--color-secondary, #a33a94);
}

@media (max-width: 1279px) {
  .max-xl\:border-b {
    border-bottom-width: 1px;
  }

  .max-xl\:border-b-grey-subtle {
    border-bottom-color: var(--color-grey-subtle, #e5e7eb);
  }

  .max-xl\:py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}

/* Menu Buttons */
.w-12 {
  width: 3rem;
}

.h-12 {
  height: 3rem;
}

.ml-auto {
  margin-left: auto;
}

@media (min-width: 1280px) {
  .xl\:hidden {
    display: none;
  }
}

.relative {
  position: relative;
}

.justify-center {
  justify-content: center;
}

.mr-4 {
  margin-right: 1rem;
}

.rounded-full {
  border-radius: 9999px;
}

.border-2 {
  border-width: 2px;
  border-style: solid;
}

.border-secondary {
  border-color: var(--color-secondary, #a33a94);
}

.text-warm-plum {
  color: var(--color-warm-plum, #a33a94);
}

.w-6 {
  width: 1.5rem;
}

.h-6 {
  height: 1.5rem;
}

.w-4 {
  width: 1rem;
}

.h-4 {
  height: 1rem;
}

/* Mobile Nav Trigger */
.self-center {
  align-self: center;
}

.ml-3 {
  margin-left: 0.75rem;
}

/* CTA Button Styles */
.cta {
  display: inline-flex;
  align-items: center;
}

.font-medium {
  font-weight: 500;
}

.uppercase {
  text-transform: uppercase;
}

.border-2 {
  border-width: 2px;
}

.border-transparent {
  border-color: transparent;
  border-style: solid;
}

.text-link {
  color: var(--color-link, #0066cc);
}

.hover\:text-link-hover:hover {
  color: var(--color-link-hover, #0052a3);
}

.focus-visible\:underline:focus-visible {
  text-decoration: underline;
}

.focus-visible\:border-link-focused:focus-visible {
  border-color: var(--color-link-focused, #004080);
}

.focus-visible\:outline-\[4px\]:focus-visible {
  outline-width: 4px;
}

.focus-visible\:outline-link-focused:focus-visible {
  outline-color: var(--color-link-focused, #004080);
}

.focus-visible\:outline:focus-visible {
  outline-style: solid;
}

.focus-visible\:ring-transparent:focus-visible {
  --tw-ring-color: transparent;
}

.disabled\:text-grey\/50:disabled {
  color: rgba(107, 114, 128, 0.5);
}

.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}

.disabled\:hover\:no-underline:hover:disabled {
  text-decoration: none;
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-300 {
  transition-duration: 300ms;
}

.border {
  border-width: 1px;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.p-\[9px\] {
  padding: 9px;
}

.rounded-full {
  border-radius: 9999px;
}

.flex-wrap {
  flex-wrap: wrap;
}

.w-full {
  width: 100%;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

/* Mobile Menu Icon */
/* Hamburger icon (first SVG in first div) - hidden when parent is active, visible when inactive */
.group\/menu.active > div:first-child > svg {
  transform: rotate(90deg);
  opacity: 0;
}

.group\/menu.inactive > div:first-child > svg {
  transform: rotate(0deg);
  opacity: 1;
}

/* Close icon (SVG in second div) - visible when parent is active, hidden when inactive */
.group\/menu.active > div:last-child > svg {
  transform: rotate(0deg);
  opacity: 1;
}

.group\/menu.inactive > div:last-child > svg {
  transform: rotate(90deg);
  opacity: 0;
}

.duration-1000 {
  transition-duration: 1000ms;
}

.text-base-text {
  color: var(--color-base-text, #1f2937);
}

/* Mobile Navigation Wrapper */
.bg-white {
  background-color: #ffffff;
}

.shadow-md {
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.duration-500 {
  transition-duration: 500ms;
}

.h-\[calc\(100vh-65px\)\] {
  height: calc(100vh - 65px);
}

@media (min-width: 768px) {
  .md\:h-\[calc\(100vh-85px\)\] {
    height: calc(100vh - 85px);
  }
}

.flex-col {
  flex-direction: column;
}

.w-screen {
  width: 100vw;
}

.left-1\/2 {
  left: 50%;
}

.-translate-x-1\/2 {
  transform: translateX(-50%);
}

.basis-auto {
  flex-basis: auto;
}

.grow-0 {
  flex-grow: 0;
}

.shrink-1 {
  flex-shrink: 1;
}

.overflow-y-auto {
  overflow-y: auto;
}

.mt-auto {
  margin-top: auto;
}

.basis-max {
  flex-basis: max-content;
}

.shrink-0 {
  flex-shrink: 0;
}

/* Screen Reader Only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Important overrides */
.\!px-0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.\!shadow-none {
  box-shadow: none !important;
}

nav a {
  display: inline-block;
  padding: .25rem 1rem;
  text-decoration: none;
}

nav a:hover {
  text-decoration: underline;
}

@media screen and (min-width: 1280px) {
  nav a {
    margin: 0 .5rem;
  }
}

/* List reset - remove default list markers from navigation */
nav ul,
nav ol,
[data-type='mobile-navigation'] ul,
[data-type='mobile-navigation'] ol,
[data-type='desktop-navigation'] ul,
[data-type='desktop-navigation'] ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

nav li,
[data-type='mobile-navigation'] li,
[data-type='desktop-navigation'] li {
  list-style: none;
}

/* Button reset - remove default browser button styling */
button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

button:focus {
  outline: none;
}

/* Ensure mobile navigation buttons have no default styling */
[data-type='mobile-navigation'] button,
[data-type='mobile-navigation-wrapper'] button,
nav button {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  box-shadow: none;
  text-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* =========================================================
   IPA | Blob background in MAIN container (Sign-In only)
   Fix: stops it showing at the bottom / below footer
   ========================================================= */

@media (min-width: 992px) {

  /* Collapse the content item container so it doesn’t create page height */
  form[action*="Web-Sign-In.aspx"] .ipa-blob-webpart{
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Pin the blob to the viewport so it becomes a background */
  form[action*="Web-Sign-In.aspx"] .ipa-blob-host{
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 0 !important;
    pointer-events: none !important;
  }

  /* Keep all real page content above it */
  form[action*="Web-Sign-In.aspx"] #hd,
  form[action*="Web-Sign-In.aspx"] main,
  form[action*="Web-Sign-In.aspx"] #ft{
    position: relative !important;
    z-index: 1 !important;
  }

  /* If any wrapper has a background color, it can hide the blob */
  form[action*="Web-Sign-In.aspx"] main,
  form[action*="Web-Sign-In.aspx"] #masterWrapper{
    background: transparent !important;
  }
}

@media (min-width: 992px) {

  /* Sign-in only: let blob show through header */
  form[action*="Web-Sign-In.aspx"] #hd{
    background: transparent !important;
  }

  /* If iMIS header zones paint a background, clear them */
  form[action*="Web-Sign-In.aspx"] #hd .header-background-container,
  form[action*="Web-Sign-In.aspx"] #hd .UtilityLinks,
  form[action*="Web-Sign-In.aspx"] #hd .header-bottom-container{
    background: transparent !important;
  }
}

/* =========================================================
   IPA | Show blob behind HEADER on Web-Sign-In.aspx
   Root issue: internal header hero/slideshow inside #hd masks it
========================================================= */

/* 1) Kill the internal header hero/slideshow on the Sign-In page only */
form[action*="Web-Sign-In.aspx"] #hd #ste_container_ciInternalPageHeaderBackground,
form[action*="Web-Sign-In.aspx"] #hd .internal-header-wrapper,
form[action*="Web-Sign-In.aspx"] #hd .carousel,
form[action*="Web-Sign-In.aspx"] #hd .carousel-inner.bg-img,
form[action*="Web-Sign-In.aspx"] #hd .carousel-inner.bg-img .item {
  display: none !important;
  background-image: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 2) Make header containers transparent so the blob can show through */
form[action*="Web-Sign-In.aspx"] #hd,
form[action*="Web-Sign-In.aspx"] #hd .header-background-container,
form[action*="Web-Sign-In.aspx"] #hd .header-logo-container,
form[action*="Web-Sign-In.aspx"] #hd .header-primary-nav-container,
form[action*="Web-Sign-In.aspx"] #hd .header-aux-container {
  background: transparent !important;
  background-image: none !important;
}

/* 3) Desktop: override your existing @media(min-width:1200px) #hd background */
@media (min-width: 1200px) {
  form[action*="Web-Sign-In.aspx"] #hd {
    background: rgba(255,255,255,.12) !important; /* tweak 0.08–0.20 */
    /* keep or drop these depending on readability */
    backdrop-filter: blur(2.5px);
    box-shadow: 0 6px 18px rgba(0,0,0,.10);
  }
}

/* 4) Keep header clickable above the blob */
form[action*="Web-Sign-In.aspx"] #hd { position: relative; z-index: 10; }
form[action*="Web-Sign-In.aspx"] .ipa-blob-host { z-index: 0; }

/* Account pages only (Staff + Member) — environment-agnostic */
form#aspnetForm[action*="Account_Page_Staff.aspx"] .button,
form#aspnetForm[action*="Account_Page_Staff.aspx"] .btn,
form#aspnetForm[action*="Account_Page_Staff.aspx"] a.button,
form#aspnetForm[action*="Account_Page_Staff.aspx"] a.btn,
form#aspnetForm[action*="Account_Page_Staff.aspx"] button,
form#aspnetForm[action*="Account_Page_Staff.aspx"] input[type="submit"],
form#aspnetForm[action*="Account_Page_Member.aspx"] .button,
form#aspnetForm[action*="Account_Page_Member.aspx"] .btn,
form#aspnetForm[action*="Account_Page_Member.aspx"] a.button,
form#aspnetForm[action*="Account_Page_Member.aspx"] a.btn,
form#aspnetForm[action*="Account_Page_Member.aspx"] button,
form#aspnetForm[action*="Account_Page_Member.aspx"] input[type="submit"] {
  
   color: white !important;
}