.elementor-kit-15{--e-global-color-primary:#0F333B;--e-global-color-secondary:#FEB706;--e-global-color-text:#FDFAFA;--e-global-color-accent:#8BA888;--e-global-color-0aa1952:#001920;--e-global-color-83aa964:#274145;--e-global-color-a8926f2:#2E5158;--e-global-color-6db8afe:#FFF4DC;--e-global-color-13b96ca:#D99B05;--e-global-color-4acd569:#F9F4F4;--e-global-color-98ec0af:#FFFFFF;--e-global-color-07aa0da:#C97A4A;--e-global-color-6a105fe:#9B8FB8;--e-global-color-e254e11:#B8697D;--e-global-color-fcd133c:#FDFAFA99;--e-global-color-8f199b0:#FDFAFA1A;--e-global-color-93e563c:#000000;--e-global-color-1cb3fec:#0F333BF2;--e-global-typography-primary-font-family:"Cinzel-Var";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Montserrat-Var";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Montserrat-Var";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Montserrat-Var";--e-global-typography-accent-font-weight:500;background-color:#0F333B;color:var( --e-global-color-text );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-kit-15 button,.elementor-kit-15 input[type="button"],.elementor-kit-15 input[type="submit"],.elementor-kit-15 .elementor-button{background-color:var( --e-global-color-secondary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );color:var( --e-global-color-primary );border-radius:4px 4px 4px 4px;padding:16px 32px 16px 32px;}.elementor-kit-15 button:hover,.elementor-kit-15 button:focus,.elementor-kit-15 input[type="button"]:hover,.elementor-kit-15 input[type="button"]:focus,.elementor-kit-15 input[type="submit"]:hover,.elementor-kit-15 input[type="submit"]:focus,.elementor-kit-15 .elementor-button:hover,.elementor-kit-15 .elementor-button:focus{background-color:var( --e-global-color-secondary );box-shadow:0px 6px 20px 0px rgba(254, 183.00000000000009, 6.000000000000018, 0.4);}.elementor-kit-15 e-page-transition{background-color:#FFBC7D;}.elementor-kit-15 a{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-kit-15 a:hover{text-decoration:underline;}.elementor-kit-15 h1{color:#001920;font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-kit-15 h2{color:var( --e-global-color-primary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-kit-15 h3{color:var( --e-global-color-primary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-kit-15 h4{color:var( --e-global-color-primary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-kit-15 h5{color:var( --e-global-color-primary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-kit-15 h6{color:var( --e-global-color-primary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-kit-15 label{color:var( --e-global-color-primary );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-kit-15 input:not([type="button"]):not([type="submit"]),.elementor-kit-15 textarea,.elementor-kit-15 .elementor-field-textual{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-primary );background-color:var( --e-global-color-83aa964 );border-radius:4px 4px 4px 4px;padding:12px 16px 12px 16px;}.elementor-kit-15 input:focus:not([type="button"]):not([type="submit"]),.elementor-kit-15 textarea:focus,.elementor-kit-15 .elementor-field-textual:focus{border-style:solid;border-width:2px 2px 2px 2px;border-color:var( --e-global-color-secondary );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1240px;}.e-con{--container-max-width:1240px;--container-default-padding-top:96px;--container-default-padding-right:40px;--container-default-padding-bottom:96px;--container-default-padding-left:40px;}.elementor-widget:not(:last-child){--kit-widget-spacing:64px;}.elementor-element{--widgets-spacing:64px 32px;--widgets-spacing-row:64px;--widgets-spacing-column:32px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1239px){.e-con{--container-default-padding-top:80px;--container-default-padding-right:32px;--container-default-padding-bottom:80px;--container-default-padding-left:32px;}}@media(max-width:1023px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;--container-default-padding-top:64px;--container-default-padding-right:32px;--container-default-padding-bottom:64px;--container-default-padding-left:32px;}}@media(max-width:767px){.e-con{--container-default-padding-top:48px;--container-default-padding-right:24px;--container-default-padding-bottom:48px;--container-default-padding-left:24px;}}@media(max-width:567px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;--container-default-padding-top:48px;--container-default-padding-right:20px;--container-default-padding-bottom:48px;--container-default-padding-left:20px;}}/* Start custom CSS *//* ========================================
   JAYNE MARIE PSYCHIC SERVICES
   DESIGN SYSTEM v2.0
   Two-Layer Color Architecture
   Last Updated: March 23, 2026
======================================== */

:root {
  /* ==========================================
     LAYER 1: COLOR PALETTE
     Raw color definitions - never delete these
  ========================================== */
  
  /* Teal Family */
  --palette-teal-abyss: #001920;      /* Deepest - pure mystery */
  --palette-teal-depths: #0F333B;     /* Primary dark - sophisticated */
  --palette-teal-slate: #274145;      /* Medium - professional */
  --palette-teal-verdigris: #2E5158;  /* Light - oxidized patina */
  
  /* Gold Family */
  --palette-gold-champagne: #FFF4DC;  /* Light - soft luxury */
  --palette-gold-marigold: #FEB706;   /* Medium - primary brand */
  --palette-gold-amber: #D99B05;      /* Dark - rich depth */
  
  /* Neutrals Family */
  --palette-white: #FFFFFF;              /* Pure White */
  --palette-neutral-porcelain: #FDFAFA;  /* Soft white */
  --palette-neutral-seashell: #F9F4F4;   /* Warm cream */
  --palette-black: #000000;              /* Pure Black */

  /* Accent Colors Family */
  --palette-accent-sage: #8BA888;        /* Success/growth */
  --palette-accent-terracotta: #C97A4A;  /* Warning/attention */
  --palette-accent-lavender: #9B8FB8;    /* Info/mystical */
  --palette-accent-rose: #B8697D;        /* Error/critical */

  /* RGB Values (for rgba transparency) */
  --rgb-teal-abyss: 0, 25, 32;
  --rgb-teal-depths: 15, 51, 59;
  --rgb-teal-slate: 39, 65, 69;
  --rgb-teal-verdigris: 46, 81, 88;
  --rgb-gold-champagne: 255, 244, 220;
  --rgb-gold-marigold: 254, 183, 6;
  --rgb-gold-amber: 217, 155, 5;
  --rgb-white: 255, 255, 255;
  --rgb-neutral-porcelain: 253, 250, 250;
  --rgb-neutral-seashell: 249, 244, 244;
  --rgb-black: 0, 0, 0;
  
  /* Accent RGB values */
  --rgb-accent-sage: 139, 168, 136;
  --rgb-accent-terracotta: 201, 122, 74;
  --rgb-accent-lavender: 155, 143, 184;
  --rgb-accent-rose: 184, 105, 125;

  /* ==========================================
     LAYER 2: SEMANTIC COLOR TOKENS (ALIASES)
     Change these to rebrand your site
  ========================================== */
  
  /* Primary Brand Colors */
  --color-primary: var(--palette-teal-depths);        /* Main brand color */
  --color-primary-dark: var(--palette-teal-abyss);    /* Darkest variant */
  --color-primary-light: var(--palette-teal-slate);   /* Lighter variant */
  
  /* Secondary/Accent Colors */
  --color-secondary: var(--palette-gold-marigold);    /* Primary accent */
  --color-secondary-dark: var(--palette-gold-amber);  /* Dark accent */
  --color-secondary-light: var(--palette-gold-champagne); /* Light accent */
  
  /* Background Colors */
  --bg-body: var(--color-primary);                    /* Main background */
  --bg-panel: var(--color-primary);                   /* Panel backgrounds */
  --bg-panel-elevated: var(--color-primary-dark);     /* Floating panels */
  --bg-overlay: rgba(var(--rgb-teal-depths), 0.95);   /* Modal overlays */
  
  /* Text Colors */
  --text-primary: var(--palette-neutral-porcelain);   /* Main text - UPDATED */
  --text-secondary: rgba(var(--rgb-neutral-porcelain), 0.8); /* Secondary text */
  --text-muted: rgba(var(--rgb-neutral-porcelain), 0.6);     /* Muted text */
  --text-inverse: var(--color-primary-dark);          /* Text on light backgrounds */
  --text-on-gold: var(--palette-teal-abyss);          /* Text on gold buttons */

  /* Interactive Elements */
  --color-link: var(--color-secondary);               /* Default links */
  --color-link-hover: var(--palette-neutral-porcelain); /* Link hover - UPDATED */
  --color-button-primary-bg: var(--color-secondary);  /* Primary button background */
  --color-button-primary-text: var(--color-primary-dark); /* Primary button text */
  --color-button-secondary-bg: transparent;           /* Secondary button */
  --color-button-secondary-text: var(--palette-neutral-porcelain);
  --color-button-secondary-border: var(--color-secondary);

  /* State Colors - NEW */
  --color-success: var(--palette-accent-sage);        /* Success states */
  --color-warning: var(--palette-accent-terracotta);  /* Warning states */
  --color-info: var(--palette-accent-lavender);       /* Info states */
  --color-error: var(--palette-accent-rose);          /* Error states */

  /* Borders */
  --border-subtle: rgba(var(--rgb-neutral-porcelain), 0.1);  /* Subtle borders */
  --border-medium: rgba(var(--rgb-neutral-porcelain), 0.2);  /* Medium borders */
  --border-strong: var(--palette-teal-verdigris);     /* Strong borders */
  --border-accent: var(--color-secondary);            /* Accent borders */

  /* Overlays */
  --overlay-dark: rgba(var(--rgb-teal-depths), 0.95); /* Dark overlays */
  
  /* Shadows (using RGB variables for flexibility) */
  --shadow-subtle: 0 -3px 12px rgba(var(--rgb-black), 0.08);
  --shadow-medium: 0 8px 24px rgba(var(--rgb-black), 0.18);
  --shadow-strong: 0 1px 5px rgba(var(--rgb-black), 0.2);
  --shadow-panel: var(--shadow-subtle), var(--shadow-medium), var(--shadow-strong);
  --shadow-elevated: 0 12px 48px rgba(var(--rgb-black), 0.25);
  
  /* Focus States */
  --focus-outline-color: var(--color-secondary);
  --focus-outline: 2px solid rgba(var(--rgb-gold-marigold), 0.5);
  --focus-offset: 4px;

  /* Hover States */
  --hover-overlay-light: rgba(var(--rgb-neutral-porcelain), 0.05);
  --hover-overlay-dark: rgba(var(--rgb-black), 0.1);

  /* ==========================================
     TYPOGRAPHY SYSTEM
  ========================================== */
  
  /* Font Families */
  --font-heading: 'Cinzel-Var', serif;
  --font-body: 'Montserrat-Var', sans-serif;
  --font-ui: var(--font-body);
  
  /* Semantic Font Mapping */
  --font-primary: var(--font-heading);
  --font-secondary: var(--font-body);
  --font-accent: var(--font-body);
  
  /* Elementor Override */
  --e-global-typography-primary-font-family: var(--font-primary);
  --e-global-typography-secondary-font-family: var(--font-secondary);
  --e-global-typography-text-font-family: var(--font-body);
  --e-global-typography-accent-font-family: var(--font-accent);
  
  /* Font Weights */
  --fw-light: 300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  
  /* Fluid Typography Scale */
  /* Fluid navigation scale - harmonizes with body text */
  --fs-nav: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem); /* 15px → 17px */
  --fs-nav-button: clamp(0.875rem, 0.84rem + 0.18vw, 1rem); /* 14px → 16px */
  
  /* Line heights for navigation - consistent rhythm */
  --lh-nav: 1.2;        /* Tight for nav items */
  --lh-nav-button: 1.3; /* Slightly looser for buttons */
  
  /* Body Text Sizes */
  --fs-xs: clamp(0.78rem, 0.72rem + 0.15vw, 0.85rem);
  --fs-sm: clamp(0.9rem, 0.84rem + 0.18vw, 1rem);
  --fs-base: clamp(1rem, 0.96rem + 0.25vw, 1.1rem);
  --fs-md: var(--fs-base);
  --fs-lg: clamp(1.2rem, 1.08rem + 0.4vw, 1.4rem);
  
  /* Heading Hierarchy */
  --fs-h6: clamp(1rem, 0.96rem + 0.25vw, 1.1rem);
  --fs-h5: clamp(1.15rem, 1.08rem + 0.35vw, 1.3rem);
  --fs-h4: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --fs-h3: clamp(1.4rem, 1.2rem + 0.7vw, 1.8rem);
  --fs-h2: clamp(1.9rem, 1.6rem + 1vw, 2.4rem);
  --fs-h1: clamp(2.3rem, 1.8rem + 2vw, 3.3rem);
  
  /* Display Sizes */
  --fs-display-sm: clamp(2.8rem, 2.2rem + 2.5vw, 4rem);
  --fs-display-md: clamp(3.5rem, 2.8rem + 3vw, 5rem);
  --fs-display-lg: clamp(4.5rem, 3.5rem + 4vw, 6.5rem);

  /* Link Sizes */
  --fs-link: clamp(1rem, 0.96rem + 0.25vw, 1.1rem);
  --fs-link-sm: clamp(0.9rem, 0.84rem + 0.18vw, 1rem);
  
  /* Line Heights */
  --lh-tight: 1.1;
  --lh-snug: 1.2;
  --lh-normal: 1.3;
  --lh-relaxed: 1.4;
  --lh-loose: 1.5;
  --lh-body: 1.6;
  
  /* Letter Spacing */
  --ls-tight: -0.5px;
  --ls-normal: 0px;
  --ls-wide: 0.5px;
  --ls-wider: 1px;
  --ls-widest: 2px;
  
  /* ==========================================
     SPACING SYSTEM (4pt base)
  ========================================== */
  
  --space-0: 0;
  --space-micro: 0.25rem;   /*  4px */
  --space-tiny: 0.5rem;     /*  8px */
  --space-xtiny: 0.75rem;   /* 12px */
  --space-xs: 1rem;         /* 16px */
  --space-sm: 1.25rem;      /* 20px */
  --space-md: 1.5rem;       /* 24px */
  --space-xmd: 1.75rem;     /* 28px */
  --space-lg: 2rem;         /* 32px */
  --space-xlg: 2.5rem;      /* 40px */
  --space-xl: 3rem;         /* 48px */
  --space-2xl: 4rem;        /* 64px */
  --space-3xl: 5rem;        /* 80px */
  --space-4xl: 6rem;        /* 96px */
  
  /* ==========================================
     LAYOUT SYSTEM
  ========================================== */
  
  /* Grid System Variables */
  --container-max-width: 1240px;
  --grid-columns: 12;
  --column-gap: 30px;
  --row-gap: 64px;
  --side-margin: 40px;
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  
  /* Z-Index Scale */
  --z-base: 1;
  --z-dropdown: 10;
  --z-sticky: 50;
  --z-floating: 100;
  --z-modal: 1000;
  --z-toast: 2000;
  
  /* Hero section specific z-index */
  --z-hero-panel: 1;           /* Panel base layer */
  --z-hero-content: 2;          /* Content inside panel */
  --z-copyright-footer: 5;      /* Straddles panel edge */
  --z-header-wrapper: 10;       /* Top of panel hierarchy */

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
}

/* ========================================
   BASE STYLES
======================================== */

body {
  font-size: var(--fs-base);
  font-family: var(--font-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  background-color: var(--bg-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Texture overlay */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAACF0RVh0Q3JlYXRpb24gVGltZQAyMDE0LTExLTAzIDE1OjA1OjUwN4Jt9wAAABxJREFUCJljYGBgsGBgsMDAkK/P7z9oAAAg0A72i/tGAAAAAElFTkSuQmCC");
  background-repeat: repeat;
  background-size: 2px 2px;
  opacity: 0.35;
  mix-blend-mode: overlay;
  z-index: -999;
  will-change: transform;
}

/* ========================================
   TYPOGRAPHY STYLES
======================================== */

h1 {
  font-size: var(--fs-h1);
  font-family: var(--font-primary);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-wide);
  color: var(--text-primary);
  margin-bottom: var(--space-md);
}

h2 {
  font-size: var(--fs-h2);
  font-family: var(--font-primary);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-wide);
  color: var(--text-primary);
  margin-bottom: var(--space-md);
}

h3 {
  font-size: var(--fs-h3);
  font-family: var(--font-primary);
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-normal);
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

h4 {
  font-size: var(--fs-h4);
  font-family: var(--font-secondary);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-normal);
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

h5 {
  font-size: var(--fs-h5);
  font-family: var(--font-secondary);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-normal);
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

h6 {
  font-size: var(--fs-h6);
  font-family: var(--font-secondary);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

p {
  font-size: var(--fs-base);
  font-family: var(--font-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  margin-bottom: var(--space-md);
}

/* ========================================
   LINK STYLES
======================================== */

a {
  font-size: var(--fs-base);
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-color: rgba(var(--rgb-gold-marigold), 0.3);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: all var(--transition-fast);
}

a:hover {
  color: var(--color-link-hover);
  text-decoration-color: var(--color-link-hover);
  text-decoration-thickness: 2px;
}

a:focus {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-sm);
}

a:focus:not(:focus-visible) {
  outline: none;
}

/* Exclude heading links from underline */
.elementor-heading-title a,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  color: inherit !important;
  text-decoration: none !important;
}

/* =========================================
   PREMIUM NAV HOVER EFFECT
   Gold underline animation
========================================= */

nav a {
  position: relative;
  text-decoration: none;
}

/* underline element */
nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: calc(var(--space-micro) * -1); /* -4px */
  width: 100%;
  height: 2px;

  background-color: var(--color-secondary);

  transform: scaleX(0);
  transform-origin: left;

  transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* hover animation */
nav a:hover::after {
  transform: scaleX(1);
}

/* keyboard accessibility */
nav a:focus-visible::after {
  transform: scaleX(1);
}

/* ========================================
   LEGAL NOTICE STYLES
======================================== */

.entertainment-notice {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  background-color: rgba(var(--rgb-gold-champagne), 0.1);
  border-left: 3px solid var(--color-secondary);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-lg);
}

.entertainment-notice-icon {
  font-size: var(--fs-lg);
  color: var(--color-secondary);
  flex-shrink: 0;
}

/* Mobile adjustments */
@media (max-width: 567px) {
  .entertainment-notice {
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--fs-xs);
  }
}

/* ========================================
   BUTTON HOVER STATES
   Professional interactions with lift effect
======================================== */

/* CTA Button Hover - Darkens + Subtle Lift */
.elementor-button:hover,
.cta-button:hover {
  background-color: var(--color-secondary-dark) !important; /* Amber */
  color: var(--palette-teal-abyss) !important; /* Stays Abyss */
  box-shadow: 0 4px 12px rgba(var(--rgb-black), 0.15);
  transform: translateY(-2px);
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Remove hover transform on mobile (performance) */
@media (max-width: 767px) {
  .elementor-button:hover,
  .cta-button:hover {
    transform: none;
  }
}

/* ========================================
   12-COLUMN GRID
======================================== */

.grid-12 {
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(var(--column-gap) / -2);
  margin-right: calc(var(--column-gap) / -2);
  row-gap: var(--row-gap);
}

.grid-12 > [class*="col-"] {
  padding-left: calc(var(--column-gap) / 2);
  padding-right: calc(var(--column-gap) / 2);
  box-sizing: border-box;
}

.col-1-12  { flex: 0 0 8.3333%;  max-width: 8.3333%; }
.col-2-12  { flex: 0 0 16.6667%; max-width: 16.6667%; }
.col-3-12  { flex: 0 0 25%;      max-width: 25%; }
.col-4-12  { flex: 0 0 33.3333%; max-width: 33.3333%; }
.col-5-12  { flex: 0 0 41.6667%; max-width: 41.6667%; }
.col-6-12  { flex: 0 0 50%;      max-width: 50%; }
.col-7-12  { flex: 0 0 58.3333%; max-width: 58.3333%; }
.col-8-12  { flex: 0 0 66.6667%; max-width: 66.6667%; }
.col-9-12  { flex: 0 0 75%;      max-width: 75%; }
.col-10-12 { flex: 0 0 83.3333%; max-width: 83.3333%; }
.col-11-12 { flex: 0 0 91.6667%; max-width: 91.6667%; }
.col-12-12 { flex: 0 0 100%;     max-width: 100%; }

/* ========================================
   SECTION BLOCKS
======================================== */

.section-block {
  width: 100%;
  max-width: 100%;
  padding-top: var(--space-4xl);
  padding-bottom: var(--space-4xl);
  padding-left: var(--side-margin);
  padding-right: var(--side-margin);
  border-bottom: 1px solid var(--border-subtle);
}

.section-block:last-child {
  border-bottom: none;
}

/* ========================================
   PANEL COMPONENT
   Purpose: Reusable tilted panel container
   Styling: Background, shadows, borders, padding set in Elementor UI
   CSS Handles: Transform rotation and responsive width only
======================================== */

.panel-1240 {
  /* Responsive width constraints */
  max-width: var(--container-max-width);
  margin: 0 auto;
  
  /* Creative transform effect */
  transform: rotate(-1.5deg);
  transform-origin: top left;
  
  /* Three-layer shadow system */
  box-shadow: var(--shadow-panel);
  
  /* Technical requirements */
  position: relative;
  z-index: 1; /* Ensures panel content is above body::before */
  transition: transform var(--transition-base);
}

/* Tablet Large (1024px - 1239px) */
@media (max-width: 1239px) {
  .panel-1240 {
    max-width: calc(100% - var(--side-margin) * 2);
  }
}

/* Tablet (768px - 1023px) */
@media (max-width: 1023px) {
  .panel-1240 {
    max-width: calc(100% - var(--side-margin) * 2);
    transform: rotate(-1deg);
  }
}

/* Mobile Large (568px - 767px) */
@media (max-width: 767px) {
  .panel-1240 {
    max-width: calc(100% - var(--side-margin) * 2);
    transform: rotate(-0.75deg);
  }
}

/* Mobile Small (<567px) */
@media (max-width: 567px) {
  .panel-1240 {
    max-width: calc(100% - var(--space-lg)); /* 32px */
    transform: rotate(-0.5deg);
  }
}

/* ========================================
   HERO SECTION - FLEXBOX ARCHITECTURE
   Updated: December 2024
======================================== */

.hero-section {
  position: relative;
  isolation: isolate;
}

.page-hero {
  /* Identifies page-level hero sections */
}

/* Hero panel with flexbox layout for automatic content flow */
.hero-section .panel-1240 {
  /* Flexbox layout replaces absolute positioning + padding */
  display: flex;
  flex-direction: column;
  
  /* Minimal top padding for visual breathing room */
  padding-top: var(--space-lg); /* 32px */
  
  /* Bottom padding for copyright footer clearance */
  padding-bottom: var(--space-3xl); /* 80px — footer height + spacing clearance */
  
  /* Gap between header and hero content sections */
  gap: var(--space-xl); /* 48px between sections */
}

/* Desktop (1240px+) - Already defined above */

/* Laptop (1024px - 1239px)
   Tighten logo, nav, and CTA spacing so the full header fits
   cleanly without the CTA group overlapping the menu. */
@media (min-width: 1024px) and (max-width: 1239px) {

  .logo-menu-wrapper,
  .logo-menu-wrapper.e-con,
  .logo-menu-wrapper.elementor-element {
    width: auto !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: var(--space-md);
  }

  .logo-menu-wrapper .elementor-widget-image {
    flex: 0 0 auto;
  }

  .logo-menu-wrapper .elementor-widget-wp-menu {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .logo-menu-wrapper .elementor-nav-menu--main .elementor-nav-menu {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    min-width: 0;
  }

  /* Fix font size — targets li directly to beat reset.css inheritance */
  .logo-menu-wrapper .elementor-nav-menu--main .elementor-nav-menu > li,
  .logo-menu-wrapper .elementor-nav-menu--main .elementor-nav-menu > li > a,
  .logo-menu-wrapper .elementor-nav-menu--main .elementor-item {
    font-size: 13px !important;
    letter-spacing: 0.02em;
    padding: var(--space-tiny) var(--space-micro) !important; /* 8px 4px */
  }

  .logo-menu-wrapper .elementor-nav-menu--main .elementor-nav-menu > li {
    margin-right: 0;
    white-space: nowrap;
  }

  .cta-buttons-wrapper,
  .cta-buttons-wrapper.e-con,
  .cta-buttons-wrapper.elementor-element {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: max-content !important;
    min-width: 0 !important;
    gap: var(--space-tiny);      /* 8px */
    margin-left: var(--space-xtiny); /* 12px */
  }

  .cta-buttons-wrapper .elementor-widget-button {
    flex: 0 0 auto;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .cta-buttons-wrapper .elementor-button,
  .cta-buttons-wrapper .elementor-button-link {
    padding: var(--space-tiny) var(--space-xtiny) !important; /* 8px 12px */
    font-size: 13px !important;
    line-height: 1.2;
  }
}

/* Tablet (768px - 1023px) */
@media (max-width: 1023px) {
  .hero-section .panel-1240 {
    padding-top: var(--space-sm); /* 20px */
    padding-bottom: var(--space-2xl); /* 64px — footer clearance */
    gap: var(--space-md); /* 24px */
  }
}

/* Mobile Landscape (568px - 767px) */
@media (max-width: 767px) {
  .hero-section .panel-1240 {
    padding-top: var(--space-sm); /* 20px */
    padding-bottom: var(--space-2xl); /* 64px — footer clearance */
    gap: var(--space-md); /* 24px */
  }
}

/* Mobile Portrait (<568px) */
@media (max-width: 567px) {
  .hero-section .panel-1240 {
    padding-top: var(--space-xs); /* 16px */
    padding-bottom: var(--space-xl); /* 48px — footer clearance */
    gap: var(--space-sm); /* 20px */
  }
}

/* ============================================
   DESKTOP / LAPTOP HEADER ARCHITECTURE
   Source-of-truth layout rules
   ============================================ */

/* Parent desktop header row
   Keep left and right groups on one line and let the menu group
   shrink before the CTA group does. */
header.header-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: var(--space-sm);
  min-width: 0;
}

/* Prevent reset.css from overriding nav item font size
   via li/ul element .elementor-kit-15s                          */
.elementor-nav-menu--main .elementor-nav-menu li {
  font-size: inherit;
}

/* Left group: logo + menu
   This group may grow and shrink, but must not claim full width. */
.logo-menu-wrapper,
.logo-menu-wrapper.e-con,
.logo-menu-wrapper.elementor-element {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  width: auto !important;
  max-width: 100%;
  gap: var(--space-lg);
}

/* Logo stays content-sized */
.logo-menu-wrapper .elementor-widget-image {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

/* Menu is the only flexible item inside the left group */
.logo-menu-wrapper .elementor-widget-wp-menu {
  flex: 1 1 auto;
  min-width: 0;
}

/* Right group: CTA buttons
   Keep CTA width content-sized so it never expands into menu space. */
.cta-buttons-wrapper,
.cta-buttons-wrapper.e-con,
.cta-buttons-wrapper.elementor-element {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: max-content !important;
  margin-left: var(--space-xs);
  gap: var(--space-xs);
}

/* Reset Elementor button widget wrapper box model */
.cta-buttons-wrapper .elementor-widget-button {
  flex: 0 0 auto;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Actual CTA sizing belongs on the clickable element */
.cta-buttons-wrapper .elementor-button,
.cta-buttons-wrapper .elementor-button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-nav-button);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  min-height: 40px;
  padding: var(--space-micro) var(--space-xtiny) !important; /* 4px 12px — on-grid, compact desktop CTA */
  white-space: nowrap;
  box-sizing: border-box;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   RESPONSIVE HEADER VISIBILITY
   Elementor applies hide classes but needs
   explicit display:none to enforce them.
   No media query wrapper — classes are
   breakpoint-specific via Elementor's own CSS.
   ============================================ */

/* Desktop CTAs - they appear in mobile menu */
/* No special CTA display rule needed here */

/* Hide desktop header on tablet and below */
@media (max-width: 1023px) {
  header.header-wrapper.elementor-hidden-tablet {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* Hide mobile header on laptop and above */
@media (min-width: 1024px) {
  header.elementor-hidden-desktop,
  header.elementor-hidden-laptop {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* ============================================
   MOBILE HEADER CONTAINER PADDING
   Targets ID set in Elementor Advanced → CSS ID
   ============================================ */

/* Tablet (768px - 1023px) */
@media (max-width: 1023px) {
  #mobile-header-wrapper {
    padding-left: var(--space-md) !important;   /* 24px */
    padding-right: var(--space-md) !important;
  }
}

/* Mobile Landscape (568px - 767px) */
@media (max-width: 767px) {
  #mobile-header-wrapper {
    padding-left: var(--space-sm) !important;   /* 20px */
    padding-right: var(--space-sm) !important;
  }
}

/* Mobile Portrait (<568px) */
@media (max-width: 567px) {
  #mobile-header-wrapper {
    padding-left: var(--space-xs) !important;   /* 16px */
    padding-right: var(--space-xs) !important;
  }
}

/* ============================================
   HAMBURGER BUTTON
   Specificity boost required to override
   .elementor-kit-15 button global styles
   ============================================ */

.elementor-kit-15 .hamburger-btn,
.hamburger-btn {
  /* Override Elementor kit button defaults */
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: var(--space-tiny) !important; /* 8px */
  
  /* Layout */
  display: flex !important;
  align-items: center;
  justify-content: center;
  
  /* WCAG tap target */
  width: var(--space-xlg);  /* 40px — WCAG minimum tap target */
  height: var(--space-xlg); /* 40px */
  margin: 0;
  
  /* Icon colour — inherits to SVG via currentColor */
  color: var(--text-primary) !important;
  
  /* Interaction */
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: color 200ms ease, background-color 200ms ease;
  flex-shrink: 0;
  
  /* Reset Elementor font styles that bleed onto button */
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
}

/* Header controls: white by default, gold on interaction */
.elementor-kit-15 .hamburger-btn:hover,
.elementor-kit-15 .hamburger-btn:focus-visible,
.hamburger-btn:hover,
.hamburger-btn:focus-visible {
  color: var(--color-secondary) !important;
}

.hamburger-btn:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

.hamburger-btn:active {
  background-color: transparent !important;
}

/* SVG colour inheritance */
.hamburger-btn svg {
  display: block;
  fill: currentColor;
  color: inherit;
  pointer-events: none;
  overflow: visible;
}

@media (prefers-reduced-motion: reduce) {
  .hamburger-btn {
    transition: none;
  }
}

/* ============================================
   RESPONSIVE GAP ADJUSTMENTS
   ============================================ */
   
/* Laptop (1024px - 1239px) */
@media (max-width: 1239px) {
  .logo-menu-wrapper {
    gap: var(--space-md); /* 24px logo–menu gap */
  }
}

/* Laptop (1024px - 1239px)
   Tighten logo, nav, and CTA spacing so the full header fits
   cleanly without the CTA group overlapping the menu. */
@media (min-width: 1024px) and (max-width: 1239px) {
  .logo-menu-wrapper,
  .logo-menu-wrapper.e-con,
  .logo-menu-wrapper.elementor-element {
    width: auto !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: var(--space-md);
  }

  .logo-menu-wrapper .elementor-widget-image {
    flex: 0 0 auto;
  }

  .logo-menu-wrapper .elementor-widget-wp-menu {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .logo-menu-wrapper .elementor-nav-menu--main .elementor-nav-menu {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    min-width: 0;
  }

  .logo-menu-wrapper .elementor-nav-menu--main .elementor-nav-menu > li {
    margin-right: 0;
    white-space: nowrap;
  }

  .cta-buttons-wrapper,
  .cta-buttons-wrapper.e-con,
  .cta-buttons-wrapper.elementor-element {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: max-content !important;
    min-width: 0 !important;
    gap: var(--space-tiny);       /* 8px */
    margin-left: var(--space-xtiny); /* 12px */
  }

  .cta-buttons-wrapper .elementor-widget-button {
    flex: 0 0 auto;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* Mobile Landscape (568px - 767px) */
@media (max-width: 767px) {
  .logo-menu-wrapper {
    gap: var(--space-xs); /* 16px */
  }
  
  /* Hide CTA wrapper on mobile */
  .cta-buttons-wrapper {
    display: none !important;
  }
}

/* Mobile Portrait (<568px) */
@media (max-width: 567px) {
  .logo-menu-wrapper {
    gap: var(--space-xs); /* 16px - keep same as landscape */
  }
}

/* ========================================
   PROFESSIONAL ENHANCEMENTS
======================================== */

html, body {
  overflow-x: hidden;
  width: 100%;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--space-3xl); /* 80px */
}

/* Accessibility: Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .panel-1240 {
    transition: none;
  }
}

/* iOS Safari viewport height fix */
@supports (-webkit-touch-callout: none) {
  .hero-section,
  #hero-background {
    min-height: -webkit-fill-available;
  }
}

/* Accessibility: High contrast mode */
@media (prefers-contrast: high) {
  body {
    background-color: var(--palette-black);
  }
  
  body::before {
    opacity: 0.15;
  }
}

/* Accessibility: Forced colors mode */
@media (forced-colors: active) {
  body::before {
    display: none;
  }
}

/* ========================================
   RESPONSIVE BREAKPOINTS
   Design system variables update per breakpoint
======================================== */

/* Tablet Large (1024px - 1239px) */
@media (max-width: 1239px) {
  :root {
    --column-gap: 24px;
    --row-gap: 56px;
    --side-margin: 32px;
  }
  
  .section-block {
    padding-top: var(--space-3xl);
    padding-bottom: var(--space-3xl);
  }
}

/* Tablet (768px - 1023px) */
@media (max-width: 1023px) {
  :root {
    --column-gap: 20px;
    --row-gap: 48px;
    --side-margin: 32px;
  }
  
  .section-block {
    padding-top: var(--space-2xl);
    padding-bottom: var(--space-2xl);
  }
  
  /* Grid responsive columns */
  .col-md-12 { flex: 0 0 100%; max-width: 100%; }
  .col-md-6  { flex: 0 0 50%;  max-width: 50%; }
  .col-md-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
}

/* Mobile Large (568px - 767px) */
@media (max-width: 767px) {
  :root {
    --column-gap: 16px;
    --row-gap: var(--space-xlg); /* 40px */
    --side-margin: 24px;
  }
  
  .section-block {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
  }
  
  /* Grid responsive columns */
  .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
}

/* Mobile Small (<567px) */
@media (max-width: 567px) {
  :root {
    --side-margin: var(--space-sm);  /* 20px */
  }
}

/* ============================================================
   JAYNE MARIE — MOBILE MENU DRAWER
   Append to: Elementor → Site Settings → Custom CSS
   ============================================================ */

/* ── OVERLAY ─────────────────────────────────────────────── */
.jm-drawer-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 25, 32, 0.75);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-slow),
              visibility var(--transition-slow);
  z-index: 999;
  cursor: pointer;
}

.jm-drawer-overlay.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ── DRAWER PANEL ────────────────────────────────────────── */
.jm-mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  background-color: var(--palette-teal-depths);
  display: flex;
  flex-direction: column;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(calc(100% + 32px), 0, 0);
  transition: transform var(--transition-slow),
            visibility var(--transition-slow);
  z-index: 1000;
  overflow: hidden;
  will-change: transform;

  /* Glassmorphism — matches your existing popup CSS */
  background: rgba(var(--rgb-teal-depths), 0.82);
  backdrop-filter: blur(28px) saturate(160%) brightness(0.9);
  -webkit-backdrop-filter: blur(28px) saturate(160%) brightness(0.9);

  /* Depth */
  box-shadow:
    inset 1px 0 0 rgba(var(--rgb-gold-marigold), 0.15),
    inset 0 1px 0 rgba(var(--rgb-neutral-porcelain), 0.06),
    -24px 0 60px rgba(var(--rgb-black), 0.4);
}

.jm-mobile-drawer.is-open {
  transform: translate3d(0, 0, 0);
  visibility: visible;
  pointer-events: auto;
}

/* ── DRAWER INTERNAL PANEL SYSTEM ───────────────────────────
   Mobile equivalent of the site’s panel/grid architecture.
   Do not reuse .panel-1240 directly because that class carries
   page-specific rotation and responsive width behavior.
   ----------------------------------------------------------- */

.jm-drawer-viewport {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  padding: var(--space-md);
  display: flex;
  align-items: stretch;
  justify-content: center;
  box-sizing: border-box;
}

.jm-drawer-panel {
  position: relative;
  width: 100%;
  max-width: var(--container-max-width);
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  /* Echoes .panel-1240 depth without reusing its page rotation */
  background: rgba(var(--rgb-teal-depths), 0.88);
  border: 1px solid rgba(var(--rgb-gold-marigold), 0.18);
  box-shadow: var(--shadow-panel);
  transform: rotate(-0.35deg);
  transform-origin: top left;
}

/* Subtle inner depth layer, aligned with site texture language */
.jm-drawer-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAACF0RVh0Q3JlYXRpb24gVGltZQAyMDE0LTExLTAzIDE1OjA1OjUwN4Jt9wAAABxJREFUCJljYGBgsGBgsMDAkK/P7z9oAAAg0A72i/tGAAAAAElFTkSuQmCC");
  background-repeat: repeat;
  background-size: 2px 2px;
  opacity: 0.18;
  mix-blend-mode: overlay;
  z-index: 0;
}

/* Drawer-local grid layer */
.jm-drawer-grid {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--column-gap);
}

/* Header and body span the full drawer grid */
.jm-drawer-topbar,
.jm-drawer-body {
  grid-column: 1 / -1;
}

/* Responsive panel spacing mirrors site breakpoint rhythm */
@media (max-width: 1023px) {
  .jm-drawer-viewport {
    padding: var(--space-sm);
  }

  .jm-drawer-panel {
    transform: rotate(-0.25deg);
  }
}

@media (max-width: 767px) {
  .jm-drawer-viewport {
    padding: var(--space-xs);
  }

  .jm-drawer-panel {
    transform: rotate(-0.18deg);
  }
}

@media (max-width: 567px) {
  .jm-drawer-viewport {
    padding: var(--space-tiny);
  }

  .jm-drawer-panel {
    transform: rotate(-0.12deg);
  }
}

/* Noise texture overlay — matches body::before aesthetic */
.jm-mobile-drawer::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAACF0RVh0Q3JlYXRpb24gVGltZQAyMDE0LTExLTAzIDE1OjA1OjUwN4Jt9wAAABxJREFUCJljYGBgsGBgsMDAkK/P7z9oAAAg0A72i/tGAAAAAElFTkSuQmCC");
  background-repeat: repeat;
  background-size: 2px 2px;
  opacity: 0.2;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 0;
}

/* Gold accent line — left edge */
.jm-mobile-drawer::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(var(--rgb-gold-marigold), 0),
    rgba(var(--rgb-gold-marigold), 0.5) 25%,
    rgba(var(--rgb-gold-marigold), 0.5) 75%,
    rgba(var(--rgb-gold-marigold), 0)
  );
  pointer-events: none;
  z-index: 1;
}

/* Body scroll lock */
body.jm-menu-open {
  overflow: hidden;
  touch-action: none;
}

/* ── TOP BAR ─────────────────────────────────────────────── */
.jm-drawer-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid rgba(var(--rgb-neutral-porcelain), 0.1);
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.jm-drawer-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.jm-drawer-logo img {
  width: 160px;
  height: auto;
  display: block;
}

.jm-drawer-logo::after { display: none; }

/* Close button — icon-only, aligned with hamburger button reset */
.elementor-kit-15 .jm-close-btn,
.jm-close-btn {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  appearance: none;
  -webkit-appearance: none;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  width: 44px;
  height: 44px;
  padding: 0 !important;
  margin: 0;

  color: var(--text-primary) !important;
  cursor: pointer;
  border-radius: var(--radius-sm);
  flex-shrink: 0;

  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1;

  transition: color var(--transition-fast);
}

/* Drawer close control: same interaction language as hamburger */
.elementor-kit-15 .jm-close-btn:hover,
.elementor-kit-15 .jm-close-btn:focus-visible,
.jm-close-btn:hover,
.jm-close-btn:focus-visible {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--color-secondary) !important;
}

.jm-close-btn:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

.jm-close-btn svg {
  display: block;
  width: 24px;
  height: 24px;
  color: inherit;
  stroke: currentColor;
  pointer-events: none;
}

/* ── SCROLLABLE BODY ─────────────────────────────────────── */
.jm-drawer-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-lg) var(--space-xl) var(--space-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  position: relative;
  z-index: 2;
  scrollbar-width: thin;
  scrollbar-color: var(--palette-gold-marigold) transparent;
}

.jm-drawer-body::-webkit-scrollbar { width: 4px; }
.jm-drawer-body::-webkit-scrollbar-track { background: transparent; }
.jm-drawer-body::-webkit-scrollbar-thumb {
  background-color: var(--palette-gold-marigold);
  border-radius: 2px;
}

/* ── PRIMARY NAV LIST ────────────────────────────────────── */
.jm-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}

.jm-nav-item {
  border-bottom: 1px solid rgba(var(--rgb-neutral-porcelain), 0.08);
}

.jm-nav-item:first-child {
  border-top: 1px solid rgba(var(--rgb-neutral-porcelain), 0.08);
}

/* Standalone nav link */
.jm-nav-link {
  display: block;
  width: 100%;
  padding: var(--space-sm) 0;
  font-family: var(--font-primary);
  font-size: var(--fs-h5);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-wide);
  color: var(--color-secondary);
  text-align: center;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.jm-nav-link:hover,
.jm-nav-link:focus-visible {
  color: var(--palette-neutral-porcelain);
  text-decoration: none;
}

/* Suppress desktop underline animation inside drawer */
.jm-nav-link::after,
.jm-sub-link::after,
.jm-nav-parent::after,
.jm-cta-primary::after,
.jm-cta-ghost::after,
.jm-social-link::after,
.jm-drawer-logo::after {
  display: none !important;
}

/* ── ACCORDION PARENT BUTTON ─────────────────────────────── */
.jm-nav-parent {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-tiny);
  width: 100%;
  padding: var(--space-sm) 0;
  background: transparent;
  border: none;
  box-shadow: none;
  font-family: var(--font-primary);
  font-size: var(--fs-h5);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-wide);
  color: var(--color-secondary);
  cursor: pointer;
  text-align: center;
  transition: color var(--transition-fast);
}

.jm-nav-parent:hover,
.jm-nav-parent:focus-visible {
  color: var(--palette-neutral-porcelain);
  outline: none;
}

.jm-nav-parent:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-sm);
}

/* ── SPLIT PARENT ROW (Services) ─────────────────────────── */
/* Used when a parent item is both a link and an accordion    */

.jm-nav-parent-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-tiny);
  width: 100%;
  border: none;
  padding: 0;
}

/* The navigating label */
.jm-nav-link-parent {
  display: block;
  padding: var(--space-sm) 0;
  font-family: var(--font-primary);
  font-size: var(--fs-h5);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-wide);
  color: var(--color-secondary);
  text-align: center;
  text-decoration: none;
  transition: color var(--transition-fast);
  flex: 0 0 auto;
}

.jm-nav-link-parent:hover,
.jm-nav-link-parent:focus-visible {
  color: var(--palette-neutral-porcelain);
  text-decoration: none;
}

.jm-nav-link-parent::after { display: none !important; }

/* The chevron toggle button */
.jm-nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  box-shadow: none;
  color: var(--palette-gold-marigold);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast),
              background-color var(--transition-fast);
  flex-shrink: 0;
  padding: 0;
}

.jm-nav-toggle:hover,
.jm-nav-toggle:focus-visible {
  color: var(--palette-neutral-porcelain);
  background-color: rgba(var(--rgb-neutral-porcelain), 0.06);
  outline: none;
}

.jm-nav-toggle:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

.jm-nav-toggle[aria-expanded="true"] .jm-chevron {
  transform: rotate(180deg);
}

/* Chevron */
.jm-chevron {
  flex-shrink: 0;
  transition: transform var(--transition-base);
  color: inherit;
}

.jm-nav-parent[aria-expanded="true"] .jm-chevron {
  transform: rotate(180deg);
}

/* ── SUB NAV ─────────────────────────────────────────────── */
.jm-sub-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              padding 0.35s ease;
}

/* JS removes [hidden] — keep in flow for animation */
.jm-sub-nav[hidden] {
  display: flex !important;
  max-height: 0 !important;
}

.jm-sub-nav.is-open {
  max-height: 500px;
  padding-bottom: var(--space-sm);
}

.jm-sub-link {
  display: block;
  padding: var(--space-tiny) var(--space-sm);
  font-family: var(--font-secondary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-normal);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-normal);
  color: var(--color-secondary-light);
  text-align: center;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.jm-sub-link:hover,
.jm-sub-link:focus-visible {
  color: var(--palette-neutral-porcelain);
  text-decoration: none;
}

/* ── CTA BUTTONS ─────────────────────────────────────────── */
.jm-drawer-ctas {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.jm-cta-primary,
.jm-cta-ghost {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: var(--space-tiny) var(--space-md);
  font-family: var(--font-secondary);
  font-size: var(--fs-nav-button);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-nav-button);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast),
              color var(--transition-fast),
              border-color var(--transition-fast);
  cursor: pointer;
  box-sizing: border-box;
}

.jm-cta-primary {
  background-color: var(--palette-gold-marigold);
  color: var(--palette-teal-abyss);
  border: 2px solid var(--palette-gold-marigold);
}

.jm-cta-primary:hover,
.jm-cta-primary:focus-visible {
  background-color: var(--palette-gold-amber);
  border-color: var(--palette-gold-amber);
  color: var(--palette-teal-abyss);
  text-decoration: none;
}

.jm-cta-ghost {
  background-color: transparent;
  color: var(--palette-gold-marigold);
  border: 2px solid var(--palette-gold-marigold);
}

.jm-cta-ghost:hover,
.jm-cta-ghost:focus-visible {
  background-color: rgba(var(--rgb-gold-marigold), 0.1);
  color: var(--palette-neutral-porcelain);
  border-color: var(--palette-neutral-porcelain);
  text-decoration: none;
}

/* ── FOOTER STRIP ────────────────────────────────────────── */
.jm-drawer-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(var(--rgb-neutral-porcelain), 0.1);
  margin-top: auto;
}

.jm-tagline {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: rgba(var(--rgb-neutral-porcelain), 0.75);
  text-align: center;
  margin: 0;
}

.jm-social-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
}

.jm-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--palette-gold-marigold);
  text-decoration: none;
  width: 44px;
  height: 44px;
  transition: color var(--transition-fast);
}

.jm-social-link:hover,
.jm-social-link:focus-visible {
  color: var(--palette-neutral-porcelain);
  text-decoration: none;
}

/* ── REDUCED MOTION ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .jm-mobile-drawer,
  .jm-drawer-overlay,
  .jm-sub-nav,
  .jm-chevron {
    transition: none;
  }

  .jm-mobile-drawer {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(var(--rgb-teal-depths), 0.97);
  }
}

/* ── IOS VIEWPORT HEIGHT FIX ─────────────────────────────── */
/* dvh unit handles the iOS Safari address bar shrink/expand  */
/* wrapped in @supports to prevent Elementor validator errors */
@supports (height: 100dvh) {
  .jm-mobile-drawer {
    height: 100dvh;
  }
}/* End custom CSS */