.elementor-kit-6{--e-global-color-primary:#D8D8D8;--e-global-color-secondary:#020000;--e-global-color-text:#7A7A7A;--e-global-color-accent:#14345D;--e-global-color-9a6b2f7:#B84A00;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;background-color:#FFFFFF;font-family:"Montserrat", Sans-serif;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.site-header{background-color:#000000;}.elementor-kit-6 a{font-family:"Montserrat", Sans-serif;}.elementor-kit-6 h1{font-family:"Montserrat", Sans-serif;font-size:18px;}.elementor-kit-6 h2{font-family:"Montserrat", Sans-serif;}.elementor-kit-6 h3{font-family:"Montserrat", Sans-serif;}.elementor-kit-6 h4{font-family:"Montserrat", Sans-serif;}.elementor-kit-6 h5{font-family:"Montserrat", Sans-serif;}.elementor-kit-6 h6{font-family:"Montserrat", Sans-serif;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .header-inner{width:200px;max-width:100%;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* =========================================================
   McKee International — MASTER CSS (Baseline)
   Palette: Silver + Black, metallic blue accent, burnt orange impact
   Scope: WordPress login, Elementor, Formidable Forms, general UI
========================================================= */

/* =========================
   0) TOKENS
========================= */
:root{
  /* Core */
  --mk-ink: #0b0e12;            /* deep black */
  --mk-ink2: #0f141b;           /* slightly lifted black */
  --mk-surface: rgba(255,255,255,0.04);
  --mk-surface2: rgba(255,255,255,0.07);
  --mk-border: rgba(255,255,255,0.12);
  --mk-border2: rgba(255,255,255,0.18);
  --mk-shadow: 0 18px 50px rgba(0,0,0,0.55);

  /* Silver system */
  --mk-silver1: rgba(255,255,255,0.92);
  --mk-silver2: rgba(226,232,240,0.86);
  --mk-silver3: rgba(170,182,196,0.70);

  /* Accents */
  --mk-blue: #143a66;           /* deep metallic blue */
  --mk-blue2: rgba(20,58,102,0.35);
  --mk-orange: #c65a1e;         /* burnt orange */
  --mk-orange2: rgba(198,90,30,0.30);

  /* Text */
  --mk-text: rgba(255,255,255,0.90);
  --mk-muted: rgba(255,255,255,0.62);
  --mk-dim: rgba(255,255,255,0.42);

  /* Radii and spacing */
  --mk-rad: 12px;
  --mk-rad2: 16px;
  --mk-pad: 14px;
  --mk-pad2: 18px;

  /* Forms */
  --mk-field-bg: rgba(255,255,255,0.06);
  --mk-field-bg2: rgba(255,255,255,0.09);
  --mk-field-border: rgba(255,255,255,0.14);
  --mk-field-border-focus: rgba(255,255,255,0.28);

  /* Focus ring */
  --mk-focus: 0 0 0 3px rgba(20,58,102,0.35);
}

/* =========================
   1) GLOBAL BASE
========================= */
html, body{
  background: var(--mk-ink);
  color: var(--mk-text);
}

body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: 0.2px;
}

a{
  color: var(--mk-silver1);
  text-decoration: none;
}
a:hover{
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

::selection{
  background: rgba(20,58,102,0.45);
  color: #fff;
}

/* Make common containers feel “premium dark” */
.elementor-section,
.elementor-container{
  color: var(--mk-text);
}

/* =========================
   2) TYPOGRAPHY
========================= */
h1,h2,h3,h4,h5,h6{
  color: rgba(255,255,255,0.94);
  letter-spacing: 0.4px;
}

p, li{
  color: var(--mk-muted);
}

small, .mk-muted{
  color: var(--mk-dim);
}

/* =========================
   3) “GLASS” PANEL UTILITY
========================= */
.mk-panel,
.elementor-widget-container .mk-panel{
  background: linear-gradient(180deg, var(--mk-surface2), var(--mk-surface));
  border: 1px solid var(--mk-border);
  border-radius: var(--mk-rad2);
  box-shadow: var(--mk-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* =========================
   4) BUTTONS (Elementor + WP + Formidable)
========================= */
button,
input[type="button"],
input[type="submit"],
.wp-element-button,
.elementor-button,
.frm_button_submit,
.frm_button,
.frm_prev_page,
.frm_next_page{
  appearance: none;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 12px;
  padding: 12px 16px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: rgba(255,255,255,0.92);
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.05));
  box-shadow: 0 10px 24px rgba(0,0,0,0.45);
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.wp-element-button:hover,
.elementor-button:hover,
.frm_button_submit:hover,
.frm_button:hover,
.frm_prev_page:hover,
.frm_next_page:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.26);
  background: linear-gradient(180deg, rgba(255,255,255,0.13), rgba(255,255,255,0.06));
  box-shadow: 0 14px 30px rgba(0,0,0,0.55);
}

button:active,
input[type="button"]:active,
input[type="submit"]:active,
.wp-element-button:active,
.elementor-button:active,
.frm_button_submit:active,
.frm_button:active{
  transform: translateY(0px);
}

/* Primary action: metallic blue */
.mk-btn-primary,
.elementor-button.elementor-size-md.mk-primary,
.frm_button_submit{
  border-color: rgba(20,58,102,0.55);
  background: linear-gradient(180deg, rgba(20,58,102,0.85), rgba(10,24,44,0.95));
}

/* Impact action: burnt orange (use intentionally) */
.mk-btn-impact,
.elementor-button.mk-impact{
  border-color: rgba(198,90,30,0.75);
  background: linear-gradient(180deg, rgba(198,90,30,0.95), rgba(92,34,10,0.95));
}

/* Disabled */
button:disabled,
input:disabled,
.elementor-button:disabled,
.frm_button_submit:disabled{
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* =========================
   5) FORM FIELDS (WP + Elementor + Formidable)
========================= */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="search"],
select,
textarea,
.frm_form_field input,
.frm_form_field select,
.frm_form_field textarea{
  width: 100%;
  color: rgba(255,255,255,0.92);
  background: linear-gradient(180deg, var(--mk-field-bg2), var(--mk-field-bg));
  border: 1px solid var(--mk-field-border);
  border-radius: 12px;
  padding: 12px 14px;
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

textarea{
  min-height: 120px;
  resize: vertical;
}

input::placeholder,
textarea::placeholder{
  color: rgba(255,255,255,0.38);
}

/* Focus, with subtle blue precision ring */
input:focus,
select:focus,
textarea:focus,
.frm_form_field input:focus,
.frm_form_field select:focus,
.frm_form_field textarea:focus{
  border-color: var(--mk-field-border-focus);
  box-shadow: var(--mk-focus);
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.06));
}

/* Labels */
label,
.frm_primary_label,
.frm_form_field label{
  color: rgba(255,255,255,0.72);
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* Field descriptions and helper text */
.frm_description,
.frm_form_field .frm_description,
.frm_form_field .frm_desc,
.elementor-field-description{
  color: rgba(255,255,255,0.50);
  font-size: 12.5px;
}

/* =========================
   6) CHECKBOXES + RADIOS (Formidable + WP)
========================= */
input[type="checkbox"],
input[type="radio"]{
  accent-color: var(--mk-blue);
}

.frm_checkbox,
.frm_radio{
  color: rgba(255,255,255,0.78);
}

/* =========================
   7) FORM LAYOUT POLISH (Formidable)
========================= */
.frm_forms{
  color: var(--mk-text);
}

.frm_form_field{
  margin-bottom: 16px;
}

.frm_submit{
  margin-top: 18px;
}

/* Inline validation */
.frm_error,
.frm_error_style,
.frm_message{
  border-radius: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
}

/* Errors: burnt orange emphasis */
.frm_error,
.frm_error_style{
  border-color: rgba(198,90,30,0.55);
  background: rgba(198,90,30,0.10);
  color: rgba(255,255,255,0.92);
}

/* Success messages: metallic blue */
.frm_message{
  border-color: rgba(20,58,102,0.55);
  background: rgba(20,58,102,0.12);
  color: rgba(255,255,255,0.92);
}

/* =========================
   8) ELEMENTOR FORM WIDGET (if used)
========================= */
.elementor-form input,
.elementor-form select,
.elementor-form textarea{
  color: rgba(255,255,255,0.92) !important;
  background: linear-gradient(180deg, var(--mk-field-bg2), var(--mk-field-bg)) !important;
  border: 1px solid var(--mk-field-border) !important;
  border-radius: 12px !important;
}

.elementor-form input:focus,
.elementor-form select:focus,
.elementor-form textarea:focus{
  border-color: var(--mk-field-border-focus) !important;
  box-shadow: var(--mk-focus) !important;
}

/* =========================
   9) WORDPRESS LOGIN SCREEN (matches your screenshot)
========================= */
body.login{
  background: radial-gradient(1200px 600px at 50% 20%, rgba(255,255,255,0.06), transparent 60%),
              linear-gradient(180deg, #070a0f, #05070b);
  color: rgba(255,255,255,0.85);
}

body.login #login{
  width: 380px;
}

body.login #loginform{
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px;
  padding: 22px 22px 18px;
  box-shadow: 0 18px 55px rgba(0,0,0,0.60);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.login label{
  color: rgba(255,255,255,0.70);
  font-weight: 700;
}

body.login input[type="text"],
body.login input[type="password"]{
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.06));
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  color: rgba(255,255,255,0.92);
  padding: 12px 14px;
}

body.login input[type="text"]:focus,
body.login input[type="password"]:focus{
  border-color: rgba(255,255,255,0.28);
  box-shadow: var(--mk-focus);
}

body.login #wp-submit{
  width: 100%;
  margin-top: 10px;
  border-color: rgba(20,58,102,0.55);
  background: linear-gradient(180deg, rgba(20,58,102,0.85), rgba(10,24,44,0.95));
}

body.login .forgetmenot{
  margin-top: 10px;
}

body.login #nav a,
body.login #backtoblog a{
  color: rgba(255,255,255,0.70);
}
body.login #nav a:hover,
body.login #backtoblog a:hover{
  color: rgba(255,255,255,0.95);
}

/* =========================
   10) SMALL QUALITY OF LIFE
========================= */
/* Reduce ugly autofill yellows */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-text-fill-color: rgba(255,255,255,0.92);
  -webkit-box-shadow: 0 0 0px 1000px rgba(255,255,255,0.06) inset;
  box-shadow: 0 0 0px 1000px rgba(255,255,255,0.06) inset;
  transition: background-color 9999s ease-in-out 0s;
}

/* Tighten default HR */
hr{
  border: 0;
  height: 1px;
  background: rgba(255,255,255,0.10);
}

/* =========================================================
   McKee International — COMPONENT LIBRARY
   Reusable UI parts for Elementor + Formidable + WP
========================================================= */

/* =========================
   A) UTILITY CLASSES
========================= */
.mk-center{ text-align:center; }
.mk-right{ text-align:right; }
.mk-muted{ color: var(--mk-muted); }
.mk-dim{ color: var(--mk-dim); }
.mk-tight{ letter-spacing: 0.2px; }
.mk-stack > * + *{ margin-top: 12px; }

/* Soft divider line */
.mk-rule{
  height: 1px;
  background: rgba(255,255,255,0.10);
  border: 0;
  margin: 18px 0;
}

/* =========================
   B) CARDS (Primary building block)
========================= */
.mk-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--mk-rad2);
  box-shadow: var(--mk-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 18px;
  position: relative;
  overflow: hidden;
}

.mk-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 420px at 20% 0%, rgba(255,255,255,0.06), transparent 60%),
    radial-gradient(900px 420px at 80% 0%, rgba(20,58,102,0.08), transparent 60%);
  pointer-events:none;
}

.mk-card > *{ position: relative; }

.mk-card--tight{ padding: 14px; }
.mk-card--roomy{ padding: 24px; }
.mk-card--flat{ box-shadow: none; }

.mk-card-title{
  color: rgba(255,255,255,0.92);
  font-weight: 800;
  letter-spacing: 0.5px;
  margin: 0 0 6px;
}
.mk-card-subtitle{
  color: var(--mk-muted);
  margin: 0 0 10px;
}

/* Elementor: apply to any widget container by adding class mk-card */
.elementor-widget-container.mk-card{
  padding: 18px;
}

/* =========================
   C) PLAQUE HEADER (McKee signature block)
   Use for hero headers, form headers, section tops
========================= */
.mk-plaque{
  position: relative;
  padding: 18px 18px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 18px 60px rgba(0,0,0,0.62);
  overflow: hidden;
}

.mk-plaque::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    linear-gradient(135deg,
      rgba(255,255,255,0.10),
      rgba(255,255,255,0.02) 35%,
      rgba(20,58,102,0.10) 60%,
      rgba(255,255,255,0.03));
  pointer-events:none;
}

.mk-plaque::after{
  content:"";
  position:absolute;
  left:-20%;
  top:-40%;
  width: 60%;
  height: 180%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent);
  transform: rotate(18deg);
  opacity: 0.45;
  pointer-events:none;
}

.mk-plaque h1, .mk-plaque h2, .mk-plaque h3{
  margin: 0;
  color: rgba(255,255,255,0.94);
  letter-spacing: 0.6px;
}

.mk-plaque p{
  margin: 8px 0 0;
  color: var(--mk-muted);
}

/* =========================
   D) SECTION HEADER (small, repeatable)
========================= */
.mk-section-head{
  margin: 0 0 12px;
  padding: 0 0 10px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.mk-section-kicker{
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

.mk-section-title{
  margin: 6px 0 0;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.92);
}

/* =========================
   E) BADGES (status pills)
========================= */
.mk-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.82);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.3px;
}

.mk-badge--blue{
  border-color: rgba(20,58,102,0.55);
  background: rgba(20,58,102,0.14);
}

.mk-badge--impact{
  border-color: rgba(198,90,30,0.70);
  background: rgba(198,90,30,0.14);
}

/* =========================
   F) ALERTS (notice blocks)
========================= */
.mk-alert{
  border-radius: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.86);
}

.mk-alert--info{
  border-color: rgba(20,58,102,0.55);
  background: rgba(20,58,102,0.12);
}

.mk-alert--impact{
  border-color: rgba(198,90,30,0.70);
  background: rgba(198,90,30,0.12);
}

/* =========================
   G) TABLES (Elementor HTML tables, WP tables)
========================= */
table{
  width: 100%;
  border-collapse: collapse;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  overflow: hidden;
}

th, td{
  padding: 12px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.80);
  vertical-align: top;
}

th{
  color: rgba(255,255,255,0.90);
  font-weight: 900;
  letter-spacing: 0.4px;
  background: rgba(255,255,255,0.05);
}

tr:hover td{
  background: rgba(255,255,255,0.04);
}

/* =========================
   H) TABS + ACCORDIONS (Elementor common widgets)
   Notes: Elementor markup varies by version, these are safe-ish targets.
========================= */

/* Tabs container */
.elementor-tabs-wrapper,
.elementor-accordion{
  border-radius: 16px;
}

/* Tabs */
.elementor-tab-title,
.elementor-accordion-title{
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  border-radius: 14px;
  margin: 0 0 10px;
  padding: 12px 14px;
  color: rgba(255,255,255,0.86);
  font-weight: 900;
  letter-spacing: 0.35px;
}

.elementor-tab-title.elementor-active,
.elementor-accordion-item .elementor-active{
  border-color: rgba(20,58,102,0.55);
  background: rgba(20,58,102,0.12);
}

.elementor-tab-content,
.elementor-accordion-content{
  border-left: 1px solid rgba(255,255,255,0.10);
  border-right: 1px solid rgba(255,255,255,0.10);
  border-bottom: 1px solid rgba(255,255,255,0.10);
  border-radius: 0 0 14px 14px;
  padding: 14px 14px 16px;
  background: rgba(255,255,255,0.03);
  color: var(--mk-muted);
}

/* =========================
   I) FORMIDABLE "FIELD GROUP" LOOK
   Use for section blocks inside long forms
========================= */
.frm_forms .mk-group,
.frm_forms .frm_repeat_sec{
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 16px;
  margin: 14px 0;
}

.frm_forms .mk-group-title{
  margin: 0 0 10px;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.92);
}

.frm_forms .mk-group-title + .mk-muted{
  margin-top: -6px;
}

/* Make Formidable section headings look like a McKee header */
.frm_forms .frm_section_heading{
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
}
.frm_forms .frm_section_heading h3,
.frm_forms .frm_section_heading h4{
  margin: 0;
  color: rgba(255,255,255,0.92);
  letter-spacing: 0.5px;
}

/* =========================
   J) “LOGIN PANEL” CLASS FOR ANY PAGE
   Add class mk-login-panel to a container around your form
========================= */
.mk-login-panel{
  max-width: 640px;
  margin: 0 auto;
}

.mk-login-panel .mk-plaque{
  margin-bottom: 14px;
}

/* =========================
   K) ICON BUTTON (hamburger, small controls)
========================= */
.mk-icon-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.90);
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
}
.mk-icon-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.26);
  background: rgba(255,255,255,0.08);
}

/* =========================
   L) FOOTER BAR / TOOLBAR (optional)
   For sticky utility bars, dashboards, or form footers
========================= */
.mk-toolbar{
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.55);
}

.mk-toolbar .mk-toolbar-row{
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

/* =========================
   M) MICRO PROGRESS BAR (dashboards)
========================= */
.mk-progress{
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);
  overflow: hidden;
}

.mk-progress > span{
  display:block;
  height: 100%;
  width: 35%;
  background: linear-gradient(90deg, rgba(20,58,102,0.85), rgba(255,255,255,0.18));
}

/* =========================
   N) IMPACT LINKS (rare, intentional)
========================= */
a.mk-impact-link{
  color: rgba(198,90,30,0.92);
  text-decoration: none;
  font-weight: 900;
}
a.mk-impact-link:hover{
  color: rgba(255,255,255,0.92);
  text-decoration: underline;
  text-underline-offset: 3px;
}/* End custom CSS */