.elementor-kit-435{--e-global-color-primary:#1C2B1E;--e-global-color-secondary:#243027;--e-global-color-text:#6B7868;--e-global-color-accent:#7A9B76;--e-global-color-61241c52:#9BBF96;--e-global-color-4b1ff412:#B5A96A;--e-global-color-444146c4:#F2EFE6;--e-global-color-7978d0eb:#6B7868;--e-global-typography-primary-font-family:"Cormorant Garamond";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"DM Sans";--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;}.elementor-kit-435 e-page-transition{background-color:#FFBC7D;}.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);}@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 *//* ============================================================
   PARITY SOLUTIONS — ELEMENTOR GLOBAL CSS
   Paste this into: Elementor > Site Settings > Custom CSS
   OR: Appearance > Customize > Additional CSS
   ============================================================ */

/* ------------------------------------------------------------
   1. GLOBAL COLOR VARIABLES
   ------------------------------------------------------------ */
:root {
  --ps-navy:        #0E1C2F;
  --ps-navy-mid:    #162438;
  --ps-gold:        #B8923A;
  --ps-gold-light:  #D4AC5A;
  --ps-cream:       #F5F0E8;
  --ps-cream-dark:  #EDE6D6;
  --ps-slate:       #6B7A8D;
  --ps-white:       #FDFCFA;
}

/* ------------------------------------------------------------
   2. GLOBAL TYPOGRAPHY
   ------------------------------------------------------------ */
body {
  font-family: 'DM Sans', sans-serif;
  color: var(--ps-navy);
  background: var(--ps-white);
}

h1, h2, h3, h4 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  line-height: 1.15;
}

h1 { font-size: clamp(3rem, 6vw, 5.5rem); }
h2 { font-size: clamp(2rem, 3.5vw, 3rem); }
h3 { font-size: 1.4rem; font-weight: 400; }

em { font-style: italic; color: var(--ps-gold-light); }

p {
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.85;
  color: var(--ps-slate);
}

/* ------------------------------------------------------------
   3. SECTION LABELS (eyebrow text above headings)
   Usage: Add class "ps-label" to a Text widget
   ------------------------------------------------------------ */
.ps-label {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ps-gold);
  margin-bottom: 1rem;
}

.ps-label::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: var(--ps-gold);
}

/* On dark backgrounds */
.ps-label-light {
  color: var(--ps-gold-light);
}
.ps-label-light::before {
  background: var(--ps-gold-light);
}

/* ------------------------------------------------------------
   4. BUTTONS
   Usage: Apply classes to Elementor Button widgets
   ------------------------------------------------------------ */

/* Primary — gold fill */
.ps-btn-primary,
.elementor-button.ps-btn-primary {
  background: var(--ps-gold) !important;
  color: var(--ps-navy) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 1rem 2.2rem !important;
  border-radius: 2px !important;
  border: none !important;
  transition: all 0.3s !important;
}
.ps-btn-primary:hover,
.elementor-button.ps-btn-primary:hover {
  background: var(--ps-gold-light) !important;
  transform: translateY(-1px) !important;
}

/* Dark — navy fill */
.ps-btn-dark,
.elementor-button.ps-btn-dark {
  background: var(--ps-navy) !important;
  color: var(--ps-gold-light) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 1rem 2.2rem !important;
  border-radius: 2px !important;
  border: none !important;
  transition: all 0.3s !important;
}
.ps-btn-dark:hover,
.elementor-button.ps-btn-dark:hover {
  background: var(--ps-navy-mid) !important;
  transform: translateY(-1px) !important;
}

/* Outline — border only */
.ps-btn-outline,
.elementor-button.ps-btn-outline {
  background: transparent !important;
  color: var(--ps-gold-light) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 0.9rem 2rem !important;
  border-radius: 2px !important;
  border: 1px solid rgba(184,146,58,0.5) !important;
  transition: all 0.3s !important;
}
.ps-btn-outline:hover,
.elementor-button.ps-btn-outline:hover {
  border-color: var(--ps-gold) !important;
  background: rgba(184,146,58,0.08) !important;
  color: var(--ps-gold) !important;
}

/* ------------------------------------------------------------
   5. NAVIGATION
   ------------------------------------------------------------ */
.ps-nav {
  background: rgba(14, 28, 47, 0.97) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(184,146,58,0.2);
}

.ps-nav .elementor-nav-menu a {
  font-size: 0.78rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(245,240,232,0.7) !important;
  transition: color 0.3s !important;
}

.ps-nav .elementor-nav-menu a:hover {
  color: var(--ps-gold-light) !important;
}

/* ------------------------------------------------------------
   6. HERO SECTION
   Usage: Apply class "ps-hero" to the Section container
   ------------------------------------------------------------ */
.ps-hero {
  background-color: var(--ps-navy) !important;
  min-height: 100vh !important;
  position: relative;
}

.ps-hero h1 {
  color: var(--ps-cream);
  font-size: clamp(3rem, 6vw, 5.5rem);
  font-weight: 300;
  line-height: 1.1;
}

.ps-hero p {
  color: rgba(245,240,232,0.65);
  font-size: 1.05rem;
  max-width: 560px;
}

/* Hero background grid overlay */
.ps-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(184,146,58,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184,146,58,0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
  z-index: 0;
}

/* ------------------------------------------------------------
   7. TAGLINE BAND
   Usage: Apply class "ps-band" to a Section
   ------------------------------------------------------------ */
.ps-band {
  background: var(--ps-gold) !important;
  padding: 1.4rem 4rem !important;
}

.ps-band p,
.ps-band .elementor-widget-text-editor p {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.15rem !important;
  font-style: italic !important;
  font-weight: 400 !important;
  color: var(--ps-navy) !important;
  text-align: center !important;
  letter-spacing: 0.02em !important;
  margin: 0 !important;
}

/* ------------------------------------------------------------
   8. LIGHT SECTIONS (cream background)
   Usage: Apply class "ps-section-light" to a Section
   ------------------------------------------------------------ */
.ps-section-light {
  background: var(--ps-cream) !important;
}

.ps-section-light h2 {
  color: var(--ps-navy);
}

.ps-section-light p {
  color: var(--ps-slate);
}

/* ------------------------------------------------------------
   9. DARK SECTIONS (navy background)
   Usage: Apply class "ps-section-dark" to a Section
   ------------------------------------------------------------ */
.ps-section-dark {
  background: var(--ps-navy) !important;
  position: relative;
  overflow: hidden;
}

.ps-section-dark h2 {
  color: var(--ps-cream) !important;
}

.ps-section-dark p {
  color: rgba(245,240,232,0.55) !important;
}

.ps-section-dark .ps-label {
  color: var(--ps-gold-light) !important;
}

.ps-section-dark .ps-label::before {
  background: var(--ps-gold-light) !important;
}

/* ------------------------------------------------------------
   10. ALIGNMENT CARD (dark card on light section)
   Usage: Apply class "ps-dark-card" to an Inner Section or Column
   ------------------------------------------------------------ */
.ps-dark-card {
  background: var(--ps-navy) !important;
  padding: 3rem !important;
  border-radius: 2px !important;
}

.ps-dark-card p {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.35rem !important;
  font-weight: 300 !important;
  line-height: 1.6 !important;
  color: var(--ps-cream) !important;
  font-style: italic !important;
}

.ps-dark-card strong {
  font-style: normal !important;
  font-weight: 600 !important;
  color: var(--ps-gold-light) !important;
}

/* ------------------------------------------------------------
   11. SERVICE CARDS
   Usage: Apply class "ps-service-card" to Column widgets
   ------------------------------------------------------------ */
.ps-service-card {
  background: var(--ps-white) !important;
  padding: 3rem !important;
  position: relative;
  transition: background 0.4s;
  border-bottom: 3px solid transparent;
}

.ps-service-card:hover {
  background: var(--ps-cream) !important;
  border-bottom-color: var(--ps-gold) !important;
}

.ps-service-card h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--ps-navy);
  line-height: 1.3;
  margin-bottom: 1rem;
}

.ps-service-card p {
  font-size: 0.88rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--ps-slate);
}

/* Service number */
.ps-service-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 3.5rem;
  font-weight: 300;
  color: rgba(184,146,58,0.15);
  line-height: 1;
  margin-bottom: 1.2rem;
}

/* Service tagline */
.ps-service-tagline {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 0.95rem !important;
  font-style: italic !important;
  color: var(--ps-gold) !important;
}

/* Service capability list items */
.ps-caps-list {
  list-style: none !important;
  padding: 0 !important;
}

.ps-caps-list li {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--ps-slate);
  padding-left: 1.2rem;
  position: relative;
  margin-bottom: 0.4rem;
  line-height: 1.5;
}

.ps-caps-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--ps-gold);
  font-size: 0.7rem;
}

/* ------------------------------------------------------------
   12. PRINCIPLES GRID
   Usage: Apply class "ps-principle" to Column widgets
   ------------------------------------------------------------ */
.ps-principle {
  padding: 2.5rem !important;
  border-right: 1px solid rgba(184,146,58,0.15);
  transition: background 0.3s;
}

.ps-principle:hover {
  background: rgba(184,146,58,0.04) !important;
}

.ps-principle h4 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--ps-gold-light);
  margin-bottom: 0.7rem;
  line-height: 1.3;
}

.ps-principle p {
  font-size: 0.82rem;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(245,240,232,0.5);
}

/* ------------------------------------------------------------
   13. PHILOSOPHY TENETS
   Usage: Apply class "ps-tenet" to Text Editor widgets
   ------------------------------------------------------------ */
.ps-tenet {
  background: var(--ps-white);
  padding: 1.5rem 2rem !important;
  border-bottom: 1px solid var(--ps-cream-dark);
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  transition: background 0.3s;
}

.ps-tenet:hover {
  background: var(--ps-cream) !important;
}

.ps-tenet p {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--ps-navy);
  line-height: 1.55;
}

/* ------------------------------------------------------------
   14. PHILOSOPHY CONCLUSION
   ------------------------------------------------------------ */
.ps-conclusion {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--ps-cream-dark);
}

.ps-conclusion p {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.4rem !important;
  font-weight: 300 !important;
  font-style: italic !important;
  line-height: 1.6 !important;
  color: var(--ps-navy) !important;
}

.ps-conclusion strong {
  font-style: normal !important;
  font-weight: 600 !important;
  color: var(--ps-gold) !important;
}

/* ------------------------------------------------------------
   15. CTA SECTION
   Usage: Apply class "ps-cta" to a Section
   ------------------------------------------------------------ */
.ps-cta {
  background: var(--ps-gold) !important;
}

.ps-cta h2 {
  color: var(--ps-navy) !important;
  font-size: clamp(1.8rem, 3vw, 2.6rem) !important;
}

/* ------------------------------------------------------------
   16. FOOTER
   ------------------------------------------------------------ */
.ps-footer {
  background: var(--ps-navy) !important;
  border-top: 1px solid rgba(184,146,58,0.15) !important;
}

.ps-footer p,
.ps-footer a {
  font-size: 0.72rem !important;
  color: rgba(245,240,232,0.4) !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}

.ps-footer a:hover {
  color: var(--ps-gold-light) !important;
}

/* ------------------------------------------------------------
   17. SCROLL REVEAL ANIMATION
   Add class "ps-reveal" to any widget to animate on scroll
   ------------------------------------------------------------ */
.ps-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.ps-reveal.ps-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ------------------------------------------------------------
   18. RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  h1 { font-size: 2.8rem !important; }
  h2 { font-size: 2rem !important; }
  .ps-service-card { padding: 2rem !important; }
  .ps-dark-card { padding: 2rem !important; }
  .ps-band { padding: 1.2rem 2rem !important; }
}/* End custom CSS */