.elementor-kit-68{--e-global-color-primary:#202811;--e-global-color-secondary:#3C4224;--e-global-color-text:#202811;--e-global-color-accent:#D6B25C;--e-global-color-f0ef844:#F2EEE4;--e-global-color-96823ac:#FAF8F2;--e-global-typography-primary-font-family:"Cormorant Garamond";--e-global-typography-primary-font-size:64px;--e-global-typography-primary-font-weight:400;--e-global-typography-secondary-font-family:"Cormorant Garamond";--e-global-typography-secondary-font-size:28px;--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Montserrat";--e-global-typography-text-font-size:19px;--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Montserrat";--e-global-typography-accent-font-weight:600;--e-global-typography-accent-font-style:normal;--e-global-typography-14d7ac8-font-family:"Cormorant Garamond";--e-global-typography-14d7ac8-font-size:48px;--e-global-typography-14d7ac8-font-weight:400;background-color:#FAF8F2;color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );}.elementor-kit-68 e-page-transition{background-color:#FFBC7D;}.elementor-kit-68 h1{color:var( --e-global-color-text );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );}.elementor-kit-68 h2{color:var( --e-global-color-text );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-kit-68 h3{color:var( --e-global-color-text );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing: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 .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-68{font-size:var( --e-global-typography-text-font-size );}.elementor-kit-68 h1{font-size:var( --e-global-typography-primary-font-size );}.elementor-kit-68 h2{font-size:var( --e-global-typography-secondary-font-size );}.elementor-kit-68 h3{font-size:var( --e-global-typography-secondary-font-size );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-68{font-size:var( --e-global-typography-text-font-size );}.elementor-kit-68 h1{font-size:var( --e-global-typography-primary-font-size );}.elementor-kit-68 h2{font-size:var( --e-global-typography-secondary-font-size );}.elementor-kit-68 h3{font-size:var( --e-global-typography-secondary-font-size );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ============================================================
   ELDER PERSONALIZED MEDICINE — Elementor Stylesheet
   Version 1.0  ·  Brand + Components
   ------------------------------------------------------------
   HOW TO USE IN ELEMENTOR
   1. WP Admin → Appearance → Customize → Additional CSS
      (or Elementor → Custom Code, or a child theme style.css)
      and paste this whole file.
   2. Apply component styles by typing the class name (without
      the dot) into a widget's  Advanced → CSS Classes  field.
      e.g.  elder-btn elder-btn--primary
   3. Tokens (colors, fonts, spacing) are CSS variables under
      :root — change them in ONE place to re-skin the site.
   ============================================================ */

/* ---- Fonts (remove if you load fonts via a WP plugin) ---- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Montserrat:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap');

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root{
  /* Brand colors */
  --elder-forest-black:#202811;   /* primary text / dark sections */
  --elder-evergreen:#2A3117;      /* dark bands, icon tiles */
  --elder-olive:#3C4224;          /* secondary dark / accents */
  --elder-gold:#D6B25C;           /* primary accent / CTAs */
  --elder-gold-hover:#E0BF73;     /* button hover */
  --elder-bronze:#A37A4C;         /* eyebrows / muted accent */
  --elder-ivory:#F2EEE4;          /* page background */
  --elder-ivory-2:#FAF8F2;        /* alt section background */
  --elder-white:#FFFFFF;

  /* Text helpers */
  --elder-text:#202811;
  --elder-text-muted:rgba(32,40,17,.72);
  --elder-text-light:rgba(242,238,228,.78);
  --elder-hairline:rgba(32,40,17,.10);
  --elder-hairline-light:rgba(242,238,228,.18);

  /* Typography */
  --elder-serif:'Cormorant Garamond',Georgia,serif;
  --elder-display:'Playfair Display','Cormorant Garamond',Georgia,serif;
  --elder-sans:'Montserrat','Helvetica Neue',Arial,sans-serif;

  /* Radii + shadow */
  --elder-radius:8px;
  --elder-radius-lg:12px;
  --elder-shadow-card:0 8px 30px rgba(32,40,17,.06);
  --elder-shadow-lift:0 18px 50px rgba(32,40,17,.12);

  /* Spacing rhythm */
  --elder-section-y:120px;
  --elder-section-y-mobile:64px;
  --elder-maxw:1180px;
}

/* ============================================================
   2. BASE TYPOGRAPHY
   Scope to .elder-page so it never fights other plugins.
   Add the class "elder-page" to your Elementor page/section,
   OR change ".elder-page" below to "body" for site-wide.
   ============================================================ */
.elder-page{
  font-family:var(--elder-sans);
  color:var(--elder-text);
  font-size:18px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.elder-page h1,
.elder-page h2,
.elder-page h3,
.elder-page h4{
  font-family:var(--elder-serif);
  font-weight:500;
  letter-spacing:-.01em;
  color:var(--elder-forest-black);
  margin:0 0 .4em;
}
.elder-page h1{font-size:clamp(38px,5vw,64px);line-height:1.04;}
.elder-page h2{font-size:clamp(30px,3.4vw,48px);line-height:1.1;}
.elder-page h3{font-size:clamp(22px,2vw,28px);line-height:1.2;}
.elder-page p{line-height:1.65;text-wrap:pretty;color:var(--elder-text-muted);}

/* Use these as utility classes on Heading/Text widgets */
.elder-display{font-family:var(--elder-display)!important;}
.elder-serif{font-family:var(--elder-serif)!important;}
.elder-sans{font-family:var(--elder-sans)!important;}
.elder-lede{font-size:19px;line-height:1.7;color:var(--elder-text-muted);}
.elder-quote{
  font-family:var(--elder-serif);
  font-size:clamp(27px,3.4vw,42px);
  line-height:1.3;
  color:var(--elder-forest-black);
}
.elder-quote em,.elder-em{color:var(--elder-bronze);font-style:italic;}

/* Eyebrow / kicker label */
.elder-eyebrow{
  font-family:var(--elder-sans);
  font-weight:600;
  font-size:13px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--elder-bronze);
  display:inline-flex;
  align-items:center;
  gap:14px;
}
.elder-eyebrow::before{
  content:"";
  width:28px;height:1px;
  background:var(--elder-gold);
  display:inline-block;
}
.elder-eyebrow--center{justify-content:center;}

/* ============================================================
   3. COLOR / BACKGROUND UTILITIES
   Apply to Sections & Columns via CSS Classes field.
   ============================================================ */
.elder-bg-ivory{background-color:var(--elder-ivory)!important;}
.elder-bg-ivory-2{background-color:var(--elder-ivory-2)!important;}
.elder-bg-white{background-color:var(--elder-white)!important;}
.elder-bg-evergreen{background-color:var(--elder-evergreen)!important;color:var(--elder-ivory);}
.elder-bg-forest{background-color:var(--elder-forest-black)!important;color:var(--elder-ivory);}

/* Auto-invert text inside dark sections */
.elder-bg-evergreen h1,.elder-bg-evergreen h2,.elder-bg-evergreen h3,
.elder-bg-forest h1,.elder-bg-forest h2,.elder-bg-forest h3{color:var(--elder-ivory);}
.elder-bg-evergreen p,.elder-bg-forest p{color:var(--elder-text-light);}
.elder-bg-evergreen .elder-eyebrow,
.elder-bg-forest .elder-eyebrow{color:var(--elder-gold);}

.elder-text-gold{color:var(--elder-gold)!important;}
.elder-text-bronze{color:var(--elder-bronze)!important;}

/* ============================================================
   4. BUTTONS
   Add to Button widget:  elder-btn elder-btn--primary
   (Set the widget's own style to "None" so these take over.)
   ============================================================ */
.elder-btn,
.elder-btn .elementor-button{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--elder-sans)!important;
  font-weight:600!important;
  font-size:14px!important;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:17px 34px!important;
  border-radius:6px!important;
  border:1px solid transparent!important;
  cursor:pointer;
  text-decoration:none;
  transition:all .25s ease;
  line-height:1;
}
.elder-btn--primary,
.elder-btn--primary .elementor-button{
  background-color:var(--elder-gold)!important;
  color:var(--elder-forest-black)!important;
}
.elder-btn--primary:hover,
.elder-btn--primary .elementor-button:hover{
  background-color:var(--elder-gold-hover)!important;
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(214,178,92,.32);
}
.elder-btn--secondary,
.elder-btn--secondary .elementor-button{
  background-color:transparent!important;
  color:var(--elder-forest-black)!important;
  border:1px solid var(--elder-gold)!important;
}
.elder-btn--secondary:hover,
.elder-btn--secondary .elementor-button:hover{
  background-color:rgba(214,178,92,.12)!important;
}
/* On dark backgrounds */
.elder-bg-evergreen .elder-btn--secondary,
.elder-bg-forest .elder-btn--secondary,
.elder-btn--ghost-light{
  color:var(--elder-ivory)!important;
  border-color:rgba(242,238,228,.4)!important;
  background:transparent!important;
}
.elder-btn--ghost-light:hover{
  border-color:var(--elder-gold)!important;
  color:var(--elder-gold)!important;
}

/* Text link with arrow — add elder-link, type " →" after label */
.elder-link{
  font-family:var(--elder-sans);
  font-weight:600;font-size:14px;letter-spacing:.04em;
  display:inline-flex;align-items:center;gap:8px;
  color:var(--elder-forest-black);
  text-decoration:none;
  transition:.2s;
}
.elder-link:hover{color:var(--elder-bronze);gap:12px;}

/* ============================================================
   5. CARDS & COMPONENTS
   ============================================================ */

/* Generic surface card (Areas of Care, Why Choose, etc.) */
.elder-card{
  background:var(--elder-white);
  border:1px solid var(--elder-hairline);
  border-radius:var(--elder-radius);
  padding:40px;
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
}
.elder-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--elder-shadow-lift);
  border-color:rgba(214,178,92,.5);
}

/* Gold top-accent variant (Fee-for-Service cards) */
.elder-card--accent{border-top:3px solid var(--elder-gold);}

/* Icon tile — drop an Icon/Image widget inside, give IT this class */
.elder-icon-tile{
  width:54px;height:54px;
  border-radius:var(--elder-radius);
  background:var(--elder-evergreen);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:26px;
}
.elder-icon-tile svg,.elder-icon-tile img{width:28px;height:28px;}

/* Pill / chip (Who We Help) */
.elder-chip{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--elder-white);
  border:1px solid var(--elder-hairline);
  border-radius:30px;
  padding:10px 18px;
  font-family:var(--elder-sans);font-weight:500;font-size:15px;
  color:var(--elder-forest-black);
}
.elder-chip::before{
  content:"";width:8px;height:8px;border-radius:50%;
  background:var(--elder-gold);flex:none;
}

/* Stat block (markers / big numbers) */
.elder-stat-n{
  font-family:var(--elder-serif);
  font-size:clamp(46px,6vw,78px);
  font-weight:600;line-height:.9;
  color:var(--elder-gold);
}
.elder-stat-l{
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--elder-text-muted);margin-top:12px;
}

/* Photo frame with offset gold outline (hero / portrait images) */
.elder-frame{position:relative;border-radius:var(--elder-radius);overflow:hidden;box-shadow:var(--elder-shadow-lift);}
.elder-frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top;}
.elder-frame--outline{position:relative;}
.elder-frame--outline::before{
  content:"";position:absolute;inset:16px -16px -16px 16px;
  border:1px solid var(--elder-gold);border-radius:var(--elder-radius);z-index:-1;
}

/* Bordered CTA box (Not Sure Where to Start) */
.elder-cta-box{
  border:1px solid var(--elder-gold);
  border-radius:var(--elder-radius-lg);
  padding:64px;text-align:center;
  background:radial-gradient(120% 140% at 50% 0%, rgba(214,178,92,.07), transparent 60%);
}

/* Checklist (credentials) — apply to a list, or use .elder-check on items */
.elder-check{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:16px;
}
.elder-check li{
  display:flex;gap:14px;align-items:flex-start;
  font-size:16px;color:rgba(32,40,17,.82);
}
.elder-check li::before{
  content:"";flex:none;margin-top:3px;
  width:18px;height:18px;
  background:no-repeat center/contain;
  /* gold check mark */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none' stroke='%23D6B25C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9.5l4 4 8-9'/%3E%3C/svg%3E");
}

/* ============================================================
   6. LAYOUT HELPERS
   ============================================================ */
.elder-section{padding-top:var(--elder-section-y);padding-bottom:var(--elder-section-y);}
.elder-container{max-width:var(--elder-maxw);margin-left:auto;margin-right:auto;}
.elder-divider{height:1px;background:var(--elder-hairline);border:0;margin:0;}
.elder-divider--light{background:var(--elder-hairline-light);}
.elder-radius{border-radius:var(--elder-radius);overflow:hidden;}
.elder-shadow{box-shadow:var(--elder-shadow-card);}
.elder-shadow-lift{box-shadow:var(--elder-shadow-lift);}

/* ============================================================
   7. RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  :root{--elder-section-y:80px;}
  .elder-card,.elder-cta-box{padding:32px;}
}
@media (max-width:767px){
  :root{--elder-section-y:var(--elder-section-y-mobile);}
  .elder-page{font-size:17px;}
  .elder-card{padding:24px;}
  .elder-cta-box{padding:40px 24px;}
  .elder-btn,.elder-btn .elementor-button{width:100%;}
}/* End custom CSS */