.elementor-kit-551{--e-global-color-primary:#0A2342;--e-global-color-secondary:#D96E30;--e-global-color-text:#1A1A1A;--e-global-color-accent:#D96E30;--e-global-color-background:#F7F3EC;--e-global-color-sa4l-surface:#FFFFFF;--e-global-color-sa4l-primary:#0A2342;--e-global-color-sa4l-accent:#D96E30;--e-global-color-sa4l-accent-deep:#C45E22;--e-global-color-sa4l-border-grey:#F5F5F5;--e-global-color-sa4l-text-dark:#1A1A1A;--e-global-color-sa4l-text-mid:#333333;--e-global-color-transparent:#00000000;--e-global-typography-primary-font-family:"Poppins";--e-global-typography-primary-font-size:24px;--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Poppins";--e-global-typography-secondary-font-size:20px;--e-global-typography-secondary-font-weight:600;--e-global-typography-text-font-family:"Figtree";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.5em;--e-global-typography-accent-font-family:"Figtree";--e-global-typography-accent-font-size:16px;--e-global-typography-accent-font-weight:400;--e-global-typography-accent-line-height:1.5em;--e-global-typography-heading-xl-font-family:"Poppins";--e-global-typography-heading-xl-font-size:56px;--e-global-typography-heading-xl-font-weight:600;--e-global-typography-heading-xl-line-height:1.2em;--e-global-typography-heading-l-font-family:"Poppins";--e-global-typography-heading-l-font-size:48px;--e-global-typography-heading-l-font-weight:600;--e-global-typography-heading-l-line-height:1.2em;--e-global-typography-heading-m-font-family:"Poppins";--e-global-typography-heading-m-font-size:40px;--e-global-typography-heading-m-font-weight:600;--e-global-typography-heading-m-line-height:1.2em;--e-global-typography-heading-s-font-family:"Poppins";--e-global-typography-heading-s-font-size:18px;--e-global-typography-heading-s-font-weight:500;--e-global-typography-body-s-font-family:"Figtree";--e-global-typography-body-s-font-size:14px;--e-global-typography-body-s-font-weight:400;--e-global-typography-body-s-line-height:1.5em;--e-global-typography-sa4l-body-font-family:"Lato";--e-global-typography-sa4l-body-font-size:18px;--e-global-typography-sa4l-body-line-height:1.7em;--e-global-typography-sa4l-small-font-family:"Lato";--e-global-typography-sa4l-small-font-size:16px;--e-global-typography-sa4l-small-line-height:1.6em;background-color:#F7F3EC;--e-page-transition-entrance-animation:e-page-transition-fade-out;--e-page-transition-animation-duration:500ms;}.elementor-kit-551 e-page-transition{background-color:#FFFFFF;}.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-kit-551{--e-global-typography-primary-font-size:22px;--e-global-typography-secondary-font-size:18px;--e-global-typography-heading-xl-font-size:48px;--e-global-typography-heading-l-font-size:40px;--e-global-typography-heading-m-font-size:32px;--e-global-typography-heading-s-font-size:18px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-551{--e-global-typography-primary-font-size:18px;--e-global-typography-secondary-font-size:16px;--e-global-typography-heading-xl-font-size:40px;--e-global-typography-heading-l-font-size:32px;--e-global-typography-heading-m-font-size:32px;--e-global-typography-heading-s-font-size:16px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ================= StayActive4Life — Global CSS v3 (Enhanced) ================= */

:root{
  --sa4l-orange: #D96E30;
  --sa4l-orange-600: #C45E22;
  --sa4l-navy: #0A2342;
  --sa4l-navy-800: #071A33;
  --sa4l-muted: #F5F5F5;
  --sa4l-ecru: #F7F3EC;
  --sa4l-surface: #FFFFFF;
  --sa4l-text: #333333;
  --sa4l-light: #FFFFFF;
  --sa4l-radius: 12px;
  --sa4l-gap: 22px;
  --sa4l-transition: 250ms cubic-bezier(.2,.9,.3,1);
  --sa4l-elevation: 0 6px 18px rgba(10,26,63,0.08);
  --sa4l-focus: rgba(12,45,120,0.14);
}

/* Base typography - ENHANCED for 50+ readers */
html{
  font-size:118%; /* enlarged base for 50+ readers */
  -webkit-font-smoothing:antialiased; 
  -moz-osx-font-smoothing:grayscale; 
  scroll-behavior:smooth;
}

body, button, input, textarea, select { 
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial, sans-serif; 
  color:var(--sa4l-text); 
  line-height:1.7; /* Increased from 1.6 */
}/* Reduce heading sizes slightly for better balance */
h1 {
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
}

h2 {
  font-size: clamp(1.3rem, 2vw, 1.5rem);
}

h3 {
  font-size: clamp(1.15rem, 1.8vw, 1.35rem);
}


h1,h2,h3,h4,h5{ 
  color:var(--sa4l-navy); 
  margin:0 0 .6rem 0; 
  font-weight:700; 
  line-height:1.3;
}

h1{ 
  font-size: clamp(1.6rem, 2.5vw, 2.4rem); 
  font-weight:800; 
  letter-spacing:-0.6px; 
}

h2{ 
  font-size: clamp(1.3rem, 2.0vw, 1.4rem); 
}

h3{
  font-size: clamp(1.25rem, 2vw, 1.5rem);
}

p, li, label { 
  font-size: 1.125rem; 
  line-height:1.7;
}

/* Layout */
.container{ 
  max-width:1180px; 
  margin:0 auto; 
  padding:0 20px; 
}

.section{ 
  padding:60px 0; 
}

/* Buttons - ENHANCED */
.btn{ 
  display:inline-flex; 
  align-items:center; 
  justify-content:center; 
  gap:10px; 
  border-radius:10px; 
  cursor:pointer; 
  text-decoration:none; 
  transition:var(--sa4l-transition); 
  font-weight:600;
  font-size:1.125rem;
  min-height:44px; /* Accessibility - touch target */
}

.btn--primary{ 
  background: linear-gradient(180deg,var(--sa4l-orange),var(--sa4l-orange-600)); 
  color:var(--sa4l-light); 
  padding:14px 26px; 
  box-shadow:0 8px 20px rgba(204,90,30,0.12); 
  border:3px solid var(--sa4l-orange); /* ADDED for definition */
}

.btn--primary:hover{ 
  transform:translateY(-3px); 
  box-shadow:0 12px 30px rgba(10,26,63,0.15); 
}

.btn--secondary{ 
  background:var(--sa4l-navy); 
  color:var(--sa4l-light); 
  padding:14px 26px; 
  font-weight:600; 
  border:none;
}

.btn--secondary:hover{
  background:var(--sa4l-navy-800);
  transform:translateY(-2px);
}

.btn--outline{ 
  background:transparent; 
  color:var(--sa4l-navy); 
  padding:12px 24px; 
  border:2px solid var(--sa4l-navy); 
  border-radius:8px; 
}

.btn--outline:hover{
  background:var(--sa4l-navy);
  color:var(--sa4l-light);
  transform:translateY(-2px);
}

/* Cards - ENHANCED */
.card{ 
  background:var(--sa4l-light); 
  border-radius:var(--sa4l-radius); 
  padding:32px; /* Increased from 24px */
  box-shadow:var(--sa4l-elevation); 
  transition:var(--sa4l-transition); 
}

.card:hover{ 
  transform:translateY(-6px); 
  box-shadow:0 18px 36px rgba(10,26,63,0.10); 
}

.card__title{ 
  font-size:1.375rem; 
  font-weight:700; 
  color:var(--sa4l-navy); 
  margin-bottom:8px; 
}

.card__text{ 
  font-size:1.125rem; 
  color:var(--sa4l-text); 
  line-height:1.7; 
}

/* Card grid */
.card-grid{ 
  display:grid; 
  grid-template-columns:repeat(3,1fr); 
  gap:var(--sa4l-gap); 
}

@media (max-width:980px){ 
  .card-grid{ grid-template-columns:repeat(2,1fr); } 
}

@media (max-width:680px){ 
  .card-grid{ grid-template-columns:1fr; } 
}

/* Icon circle */
.icon-circle{ 
  width:70px; 
  height:70px; 
  border-radius:50%; 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  font-size:28px; 
  color:#fff; 
  background:var(--sa4l-orange); 
  box-shadow:0 6px 18px rgba(204,90,30,0.14); 
}

/* Testimonial - ENHANCED */
.testimonial{ 
  background:var(--sa4l-surface); 
  border-radius:var(--sa4l-radius); 
  padding:32px; /* Increased from 22px */
  font-size:1.125rem; 
  line-height:1.8; /* Increased */
  position:relative; 
}

.testimonial:before{ 
  content:"1C"; 
  font-size:60px; 
  color:var(--sa4l-orange); 
  position:absolute; 
  left:12px; 
  top:8px; 
  opacity:0.3; /* ADDED for subtlety */
}

/* Tables */
.sa4l-table{ 
  width:100%; 
  border-collapse:collapse; 
  font-size:1.05rem; 
  border-radius:var(--sa4l-radius); 
  overflow:hidden; 
}

.sa4l-table th{ 
  background:linear-gradient(90deg,var(--sa4l-navy),var(--sa4l-navy-800)); 
  color:var(--sa4l-light); 
  text-align:left; 
  padding:16px; 
  font-size:1.1rem;
}

.sa4l-table td{ 
  padding:14px; 
  border-bottom:1px solid #f1f1f1; 
  color:var(--sa4l-text); 
}

.sa4l-table tr:hover td{ 
  background:#fbfbfb; 
}

/* Filter bar */
.filter-bar{ 
  display:flex; 
  gap:12px; 
  flex-wrap:wrap; 
  margin-bottom:20px; 
}

.filter-btn{ 
  border:2px solid var(--sa4l-navy); 
  color:var(--sa4l-navy); 
  padding:12px 20px; 
  border-radius:8px; 
  background:transparent; 
  cursor:pointer; 
  transition:var(--sa4l-transition); 
  font-size:1.05rem;
  font-weight:600;
  min-height:44px;
}

.filter-btn.active{ 
  background:var(--sa4l-navy); 
  color:var(--sa4l-light); 
}

.filter-btn:hover{ 
  transform:translateY(-2px); 
  box-shadow:0 4px 12px rgba(10,26,63,0.1);
}

/* Utilities */
.text-center{ text-align:center; }

.lead{ 
  font-size:1.2rem; 
  color:#444; 
  max-width:750px; 
  margin:0 auto; 
  line-height:1.7;
}

/* Links */
a{
  color:var(--sa4l-orange);
  text-decoration:underline;
}

a:hover{ color:var(--sa4l-orange-600); }

/* Accessibility - ENHANCED */
:focus{ 
  outline:4px solid var(--sa4l-focus); /* Increased from 3px */
  outline-offset:4px;
}

.skip-link{ 
  position:absolute; 
  left:-9999px; 
  top:auto; 
  width:1px; 
  height:1px; 
  overflow:hidden; 
}

.skip-link:focus{ 
  left:10px; 
  top:10px; 
  width:auto; 
  height:auto; 
  padding:12px 18px; 
  background:#fff; 
  z-index:9999; 
  border-radius:6px; 
  box-shadow:var(--sa4l-elevation); 
  font-size:1.1rem;
  font-weight:600;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){ 
  *{ 
    transition:none !important; 
    animation:none !important; 
  } 
}

/* NEW: Sticky phone bar for mobile */
.sticky-phone-mobile{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  background:var(--sa4l-orange);
  color:#fff;
  padding:16px;
  text-align:center;
  z-index:999;
  display:none;
  box-shadow:0 -4px 12px rgba(0,0,0,0.15);
}

.sticky-phone-mobile a{
  color:#fff;
  font-size:1.2rem;
  font-weight:700;
  text-decoration:none;
}

@media (max-width:768px){
  .sticky-phone-mobile{ display:block; }
  
  /* Add padding to body to prevent content being hidden */
  body{ padding-bottom:70px; }
}

/* NEW: Navigation improvements */
@media (max-width:768px){
  .site-nav a{
    padding:18px 24px;
    display:block;
    font-size:1.125rem;
    min-height:50px;
  }
}

/* Responsive */
@media (max-width:480px){
  .btn--primary, .btn--secondary, .btn--outline{ 
    width:100%; 
    display:block; 
    text-align:center; 
    padding:16px; 
    min-height:50px;
  }
  
  .lead{ font-size:1.1rem; }
  .card{ padding:24px; }
  h1{ font-size:1.8rem; }
}

/* NEW: Print styles */
@media print{
  .hero, .filter-bar, .btn, .sticky-phone-mobile{
    display:none;
  }
  
  body{
    font-size:12pt;
    color:#000;
  }
  
  .card{
    break-inside:avoid;
    box-shadow:none;
    border:1px solid #ccc;
  }
}

/* ===== Ecru ground / white surface (design system v4) ===== */
body{ background: var(--sa4l-ecru); }
.card{ background: var(--sa4l-surface); border:1px solid rgba(10,35,66,0.06); }
.testimonial{ border:1px solid rgba(10,35,66,0.06); }
.sa4l-table td{ border-bottom:1px solid var(--sa4l-muted); }


/* ===== sa4l-entrance-animation-fallback =====
   Elementor entrance animations do not run on this install: elements keep the
   .elementor-invisible class, which sets visibility:hidden. Hidden elements still
   reserve their full layout height, so the page renders large blank gaps.
   This forces them visible. Removing this block restores the broken behaviour. */
.elementor-invisible{ visibility: visible !important; opacity: 1 !important; }


/* ===== sa4l-swipe-cards =====
   Any container carrying .sa4l-swipe becomes a horizontal swipe carousel at
   tablet and mobile widths instead of stacking. Dots are injected by the
   'SA4L - Swipe card dots' custom code snippet. */
.sa4l-dots{display:none;}
@media (max-width:1024px){
  .sa4l-swipe > .e-con-inner{display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:18px;padding-bottom:14px;scrollbar-width:none;}
  .sa4l-swipe > .e-con-inner::-webkit-scrollbar{display:none;}
  .sa4l-swipe > .e-con-inner > .e-con{scroll-snap-align:start;flex:0 0 84% !important;width:84% !important;max-width:84% !important;}
  .sa4l-dots{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:4px;}
  .sa4l-dots-row{display:flex;gap:4px;}
  .sa4l-dot{width:40px;height:40px;padding:0;margin:0;border:0;background:transparent;cursor:pointer;position:relative;}
  .sa4l-dot::after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;border-radius:50%;border:1px solid rgba(10,35,66,0.30);box-sizing:border-box;}
  .sa4l-dot.is-active::after{background:#D96E30;border-color:#D96E30;}
  .sa4l-dot:focus-visible{outline:3px solid rgba(217,110,48,0.45);outline-offset:2px;border-radius:50%;}
  .sa4l-dots-count{font-family:Lato,sans-serif;font-size:15px;color:#555555;}
}
@media (min-width:768px) and (max-width:1024px){
  .sa4l-swipe > .e-con-inner > .e-con{flex:0 0 46% !important;width:46% !important;max-width:46% !important;}
}


/* ===== sa4l-hero-gradient =====
   Elementor's overlay control only renders a flat colour reliably here, so the
   gradient is applied to its overlay element instead: light at the top so the
   photograph reads, deep navy at the bottom so the heading and buttons stay legible. */
.elementor-element-6d793ae::before{
  background-image: linear-gradient(168deg, rgba(10,35,66,0.22) 0%, rgba(10,35,66,0.58) 52%, rgba(10,35,66,0.92) 100%) !important;
  background-color: transparent !important;
}


/* ===== sa4l-live-button-hover =====
   Wires up a hover-lift to the buttons actually used on the live site
   (Elementor's native .elementor-button class), matching the .btn--primary
   hover effect that was built earlier but never connected to anything real.
   Respects the reduced-motion rule above since that targets '*' globally. */
.elementor-button{ transition: var(--sa4l-transition); }
.elementor-button:hover, a.elementor-button:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(10,26,63,0.15);
}/* End custom CSS */