/** Site Custom Stylesheet (From File) **/ 



 /** Site Custom Styles (From DB) **/ 

/* ============================================================ Lumaura Psychology — site-wide styles ============================================================ */ :root  {
  /* ---------- BRAND (lime sunburst) ---------- */ --color-brand: #b5c229;
  --color-brand-light: #c4cf4f;
  --color-brand-lighter: #d2db78;
  --color-brand-lightest: #ecefc7;
  --color-brand-dark: #9da923;
  --color-brand-darker: #828c1d;
  --color-brand-darkest: #585f14;
  /* ---------- ACCENT (terracotta) ---------- */ --color-accent: #c77a52;
  --color-accent-light: #d39173;
  --color-accent-lighter: #dfaa92;
  --color-accent-lightest: #f1d9c9;
  --color-accent-dark: #b56a45;
  --color-accent-darker: #97583a;
  --color-accent-darkest: #663c27;
  /* ---------- PRIMARY (deep forest) ---------- */ --color-primary: #0D2C13;
  --color-primary-light: #1c4322;
  --color-primary-lighter: #2d5d35;
  --color-primary-lightest:#557a5b;
  --color-primary-dark: #08200d;
  --color-primary-darker: #061608;
  --color-primary-darkest: #030c04;
  /* ---------- SECONDARY (warm paper) ---------- */ --color-secondary: #faf6ec;
  --color-secondary-light: #fcf9f1;
  --color-secondary-lighter: #fdfbf6;
  --color-secondary-lightest:#fffefb;
  --color-secondary-dark: #ede5cc;
  --color-secondary-darker: #d9cfae;
  --color-secondary-darkest: #b8ae8a;
  /* ---------- NEUTRAL (cream — default page bg) ---------- */ --color-neutral: #f5f0e4;
  --color-neutral-light: #f8f4ea;
  --color-neutral-lighter: #faf7f0;
  --color-neutral-lightest: #fdfbf6;
  --color-neutral-dark: #e6dfca;
  --color-neutral-darker: #ccc1a4;
  --color-neutral-darkest: #807752;
  /* ---------- NEUTRAL ALT (warm grey-green) ---------- */ --color-neutral-alt: #5a5d54;
  --color-neutral-alt-light: #74766e;
  --color-neutral-alt-lighter: #8e8f88;
  --color-neutral-alt-lightest: #c2c3be;
  --color-neutral-alt-dark: #4a4d44;
  --color-neutral-alt-darker: #3a3d36;
  --color-neutral-alt-darkest: #1f211c;
  /* ---------- Body / type ---------- */ --font-display: "Playfair Display", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --color-body-text: #1a1d18;
  --color-body-text-muted: #5a5d54;
  --color-body-text-on-primary: #f5f0e4;
  --color-line: rgba(13, 44, 19, 0.12);
  --color-line-on-primary: rgba(245, 240, 228, 0.18);
}
/* ============================================================ Page base ============================================================ */ html, body  {
  margin: 0;
  padding: 0;
  background: var(--color-neutral);
  color: var(--color-body-text);
  font-family: var(--font-body);
  font-size: var(--text-size-lg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img  {
  max-width: 100%;
  display: block;
}
a  {
  color: inherit;
  text-decoration: none;
}
/* ============================================================ Section heading helpers — used across multiple sections ============================================================ */ .section-head  {
  max-width: 740px;
  margin: 0 auto 56px;
  text-align: center;
}
.eyebrow  {
  display: inline-block;
  font-size: var(--text-size-3xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-brand-dark);
  margin-bottom: 18px;
}
.section-head-lede  {
  margin-top: 22px;
  font-size: var(--text-size-lg);
  line-height: 1.6;
  color: var(--color-body-text-muted);
}
/* ============================================================ Headings ============================================================ */ h1, h2, h3, h4, h5, h6  {
  margin: 0;
}
.h2  {
  font-family: var(--font-display);
  font-weight: var(--font-weight-medium);
  font-size: clamp(36px, 4.6vw, 60px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--color-primary);
  text-wrap: balance;
}
.h2 em  {
  font-style: italic;
  font-weight: var(--font-weight-normal);
  color: var(--color-brand-dark);
}
/* ============================================================ Buttons ============================================================ */ .btn  {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  font: var(--font-weight-medium) 15px/1 var(--font-body);
  border: 1.5px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.btn:hover  {
  transform: translateY(-1px);
}
.btn .arrow  {
  width: 16px;
  height: 16px;
  flex: none;
}
.btn-primary  {
  background-color: var(--color-brand);
  color: var(--color-primary);
  border-color: var(--color-brand);
}
.btn-primary:hover  {
  background-color: var(--color-brand-dark);
  border-color: var(--color-brand-dark);
}
.btn-light  {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-light:hover  {
  background-color: var(--color-primary);
  color: var(--color-body-text-on-primary);
}
.btn-ghost-light  {
  background-color: transparent;
  color: var(--color-body-text-on-primary);
  border-color: rgba(245, 240, 228, 0.55);
}
.btn-ghost-light:hover  {
  background-color: rgba(245, 240, 228, 0.12);
  border-color: var(--color-body-text-on-primary);
}
/* ============================================================ Mobile drawer (part of global header) ============================================================ */ .mobile-drawer  {
  position: fixed;
  inset: 0;
  z-index: 200;
  background-color: var(--color-primary);
  color: var(--color-body-text-on-primary);
  padding: 26px 32px 40px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
}
.mobile-drawer[hidden]  {
  display: none;
}
.mobile-drawer-top  {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}
.drawer-logo-img  {
  height: 36px;
}
.drawer-close  {
  background: none;
  border: 0;
  color: inherit;
  padding: 8px;
  cursor: pointer;
}
.mobile-drawer > a:not(.logo)  {
  display: block;
  padding: 16px 0;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: var(--font-weight-normal);
  border-bottom: 1px solid var(--color-line-on-primary);
}
.mobile-drawer-cta  {
  margin-top: 28px;
  align-self: flex-start;
}


 /** Content Section Styles **/ 

.content-section-1777  {
  .site-header-inner  {
    max-width: var(--base-content-section-max-width);
    margin: 0 auto;
    padding: 22px 5%;
    display: flex;
    align-items: center;
    gap: 32px;
  }
  &.content-section  {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    color: var(--color-body-text-on-primary);
  }
  .logo  {
    display: inline-flex;
    flex-shrink: 0;
  }
  .logo-img  {
    height: 40px;
    width: auto;
  }
  .site-header-inner > nav  {
    flex: 1;
    display: flex;
    justify-content: center;
  }
  .nav-links  {
    list-style: none;
    display: flex;
    gap: 32px;
    margin: 0;
    padding: 0;
  }
  .nav-links a  {
    font-size: var(--text-size-xs);
    opacity: 0.92;
    transition: opacity 160ms;
  }
  .nav-links a:hover  {
    opacity: 1;
  }
  .nav-cta  {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--color-brand);
    color: var(--color-primary);
    padding: 11px 22px;
    border-radius: 999px;
    font-size: var(--text-size-2xs);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    flex-shrink: 0;
    transition: filter 160ms;
  }
  .nav-cta:hover  {
    filter: brightness(1.05);
  }
  .nav-toggle  {
    display: none;
    background: none;
    border: 0;
    color: inherit;
    padding: 8px;
    cursor: pointer;
  }
  @media (max-width: 1023px)  {
    .nav-links  {
      display: none;
    }
    .nav-cta  {
      display: none;
    }
    .nav-toggle  {
      display: inline-flex;
      margin-left: auto;
    }
  }
  @media (max-width: 639px)  {
    .site-header-inner  {
      padding: 18px 5%;
    }
  }
}
.content-section-1778  {
  &.content-section  {
    color: var(--color-body-text-on-primary);
  }
  .site-footer-inner  {
    max-width: var(--base-content-section-max-width);
    margin: 0 auto;
    padding: 80px 5% 48px;
  }
  .footer-main  {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 48px;
    align-items: start;
    padding-bottom: 56px;
    border-bottom: 1px solid var(--color-line-on-primary);
  }
  .footer-logo img  {
    height: 56px;
    width: auto;
  }
  .footer-nav  {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    align-self: center;
  }
  .footer-nav a  {
    font-size: var(--text-size-sm);
    color: rgba(245, 240, 228, 0.86);
    transition: color 160ms;
  }
  .footer-nav a:hover  {
    color: var(--color-brand);
  }
  .footer-ctas  {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
  }
  .footer-text-link  {
    font-size: var(--text-size-xs);
    color: rgba(245, 240, 228, 0.86);
    border-bottom: 1px solid rgba(245, 240, 228, 0.4);
    padding-bottom: 2px;
  }
  .footer-text-link:hover  {
    color: var(--color-brand);
    border-color: var(--color-brand);
  }
  .footer-acknowledgement  {
    padding: 40px 0;
    border-bottom: 1px solid var(--color-line-on-primary);
    max-width: 720px;
  }
  .footer-acknowledgement p  {
    font-size: var(--text-size-xs);
    line-height: 1.7;
    color: rgba(245, 240, 228, 0.7);
    margin: 0;
  }
  .footer-bottom  {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    gap: 36px;
    align-items: center;
    padding-top: 36px;
  }
  .aps-img  {
    height: 44px;
    width: auto;
  }
  .footer-bottom-flags  {
    display: flex;
    gap: 8px;
    align-items: center;
  }
  .flag  {
    height: 22px;
    width: auto;
  }
  .footer-legal  {
    font-size: var(--text-size-2xs);
    color: rgba(245, 240, 228, 0.75);
    line-height: 1.7;
  }
  .footer-bottom-right  {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
  }
  .footer-links  {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .footer-links a  {
    font-size: var(--text-size-2xs);
    color: rgba(245, 240, 228, 0.86);
    text-decoration: underline;
    text-decoration-color: rgba(245, 240, 228, 0.3);
    text-underline-offset: 3px;
  }
  .footer-links a:hover  {
    color: var(--color-brand);
    text-decoration-color: var(--color-brand);
  }
  .footer-credit  {
    font-size: var(--text-size-2xs);
    color: rgba(245, 240, 228, 0.65);
  }
  .footer-credit a  {
    color: rgba(245, 240, 228, 0.86);
    text-decoration: underline;
    text-decoration-color: rgba(245, 240, 228, 0.3);
    text-underline-offset: 3px;
  }
  @media (max-width: 1023px)  {
    .footer-main  {
      grid-template-columns: 1fr;
      gap: 28px;
    }
    .footer-ctas  {
      align-items: flex-start;
    }
    .footer-bottom  {
      grid-template-columns: 1fr;
      gap: 24px;
    }
    .footer-bottom-right  {
      align-items: flex-start;
    }
    .footer-links  {
      justify-content: flex-start;
    }
  }
  @media (max-width: 639px)  {
    .site-footer-inner  {
      padding: 56px 5% 32px;
    }
  }
}
.content-section-1779  {
  background: linear-gradient(180deg, rgba(13, 30, 16, 0.45) 0%, rgba(13, 30, 16, 0.25) 35%, rgba(13, 30, 16, 0.55) 100%), url('/site-assets/images/hero.jpg') center 40% / cover no-repeat, #0D2C13;
  .content-section-inner  {
    max-width: calc(var(--base-content-section-max-width) * 0.6875);
  }
  &.content-section  {
    color: var(--color-body-text-on-primary);
    text-align: center;
    min-height: 92vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .content-section-inner  {
    padding-top: 100px;
    padding-bottom: 60px;
  }
  .hero-eyebrow  {
    font-size: var(--text-size-3xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(245, 240, 228, 0.85);
    margin-bottom: 24px;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
  }
  .hero-title  {
    font-family: var(--font-display);
    font-weight: var(--font-weight-medium);
    font-size: clamp(44px, 6.4vw, 84px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #fff;
    text-shadow: 0 2px 24px rgba(20, 12, 4, 0.4);
    text-wrap: balance;
  }
  .hero-title em  {
    font-style: italic;
    font-weight: var(--font-weight-normal);
    color: #f0e4cc;
  }
  .hero-lede  {
    margin: 26px auto 0;
    max-width: 56ch;
    font-size: var(--text-size-lg);
    line-height: 1.55;
    color: rgba(255, 251, 240, 0.94);
    text-shadow: 0 1px 12px rgba(20, 12, 4, 0.4);
  }
  .hero-ctas  {
    margin-top: 40px;
  }
  .hero-meta  {
    display: flex;
    gap: 28px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 44px 0 0;
    padding: 0;
    list-style: none;
  }
  .hero-meta li  {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-size-3xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 246, 220, 0.85);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
  }
  .hero-meta li::before  {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--color-brand);
  }
  @media (max-width: 639px)  {
    .content-section-inner  {
      padding-top: 80px;
      padding-bottom: 40px;
    }
    .hero-meta  {
      gap: 16px;
    }
  }
}
.content-section-1780  {
  .sym-grid  {
    gap: 28px;
    margin-bottom: 60px;
  }
  .sym  {
    background-color: #fff;
    border: 1px solid var(--color-line);
    border-radius: 18px;
    padding: 36px 32px;
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
  }
  .sym:hover  {
    transform: translateY(-3px);
    box-shadow: 0 14px 40px rgba(13, 44, 19, 0.08);
    border-color: rgba(13, 44, 19, 0.2);
  }
  .sym-icon  {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--color-brand-lightest);
    color: var(--color-primary);
    margin-bottom: 22px;
  }
  .sym-icon svg  {
    width: 22px;
    height: 22px;
  }
  .sym h3  {
    font-family: var(--font-display);
    font-weight: var(--font-weight-medium);
    font-size: var(--text-size-2xl);
    line-height: 1.25;
    color: var(--color-primary);
    margin: 0 0 10px;
  }
  .sym p  {
    font-size: var(--text-size-sm);
    line-height: 1.6;
    color: var(--color-body-text-muted);
    margin: 0;
  }
  @media (max-width: 1023px)  {
    .sym-grid  {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (max-width: 639px)  {
    .sym-grid  {
      grid-template-columns: 1fr;
    }
    .sym  {
      padding: 28px 24px;
    }
  }
}
.content-section-1781  {
  .about-grid  {
    gap: 32px;
  }
  .about-card  {
    position: relative;
    background-color: #fff;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--color-line);
    transition: transform 200ms ease, box-shadow 200ms ease;
  }
  .about-card:hover  {
    transform: translateY(-3px);
    box-shadow: 0 18px 50px rgba(13, 44, 19, 0.10);
  }
  .about-card-link  {
    position: absolute;
    inset: 0;
    z-index: 2;
    text-indent: -9999px;
    overflow: hidden;
  }
  .about-photo  {
    height: 320px;
    background-size: cover;
    background-position: center;
  }
  .about-photo-consult  {
    background-image: url('/site-assets/images/consult.webp');
  }
  .about-photo-mike  {
    background-image: url('/site-assets/images/mike.png');
    background-position: center 20%;
  }
  .about-body  {
    padding: 36px 36px 38px;
  }
  .about-body h4  {
    font-family: var(--font-display);
    font-weight: var(--font-weight-medium);
    font-size: var(--text-size-4xl);
    line-height: 1.2;
    color: var(--color-primary);
    margin: 0 0 14px;
  }
  .about-body p  {
    font-size: var(--text-size-reg);
    line-height: 1.65;
    color: var(--color-body-text-muted);
    margin: 0 0 22px;
  }
  .about-more  {
    font-size: var(--text-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-accent);
    letter-spacing: 0.02em;
  }
  @media (max-width: 639px)  {
    .about-grid  {
      grid-template-columns: 1fr;
    }
    .about-photo  {
      height: 240px;
    }
    .about-body  {
      padding: 28px 24px 32px;
    }
  }
}
.content-section-1782  {
  .core-accordion-01  {
    border-top: 1px solid var(--color-line);
    margin-top: 8px;
  }
  .core-accordion-01 > * + *  {
    margin-top: 0;
  }
  .core-accordion-01 details  {
    border-bottom: 1px solid var(--color-line);
    padding: 26px 0;
  }
  .core-accordion-01 details summary  {
    font-family: var(--font-display);
    font-size: var(--text-size-2xl);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    line-height: 1.3;
    padding-right: 36px;
    transition: color 160ms;
  }
  .core-accordion-01 details summary:hover  {
    color: var(--color-accent);
  }
  .faq-a  {
    padding: 8px 0 4px;
    font-size: var(--text-size-reg);
    line-height: 1.7;
    color: var(--color-body-text-muted);
    max-width: 70ch;
  }
  .faq-foot  {
    margin-top: 44px;
    font-size: var(--text-size-sm);
    color: var(--color-body-text-muted);
  }
  .faq-foot a  {
    color: var(--color-accent);
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
  }
  .faq-more-link  {
    display: inline-block;
    margin-top: 6px;
  }
  @media (max-width: 639px)  {
    .core-accordion-01 details summary  {
      font-size: var(--text-size-xl);
    }
  }
}
.content-section-1783  {
  background: linear-gradient(180deg, rgba(28, 40, 30, 0.78) 0%, rgba(20, 30, 22, 0.88) 100%), url('/site-assets/images/band-texture.webp') center / cover no-repeat, #0D2C13;
  .content-section-inner  {
    max-width: calc(var(--base-content-section-max-width) * 0.609);
  }
  &.content-section  {
    color: var(--color-body-text-on-primary);
    text-align: center;
  }
  .closing-mark  {
    width: auto;
    height: 64px;
    margin: 0 auto 28px;
    display: block;
    opacity: 0.92;
  }
  .h2  {
    color: #fbf8f1;
    margin: 0 0 18px;
  }
  .h2 em  {
    color: #e6d1b8;
  }
  .closing-lede  {
    color: rgba(251, 248, 241, 0.85);
    font-size: var(--text-size-lg);
    line-height: 1.55;
    max-width: 52ch;
    margin: 0 auto 32px;
  }
}