@font-face {
      font-family: "Khemenu";
      src: url("fonts/khemenu-font.otf") format("opentype");
      font-display: swap;
    }


    @font-face {
      font-family: "Pegypta";
      src: url("fonts/pegypta.ttf") format("truetype");
      font-display: swap;
    }

    /* @font-face {
      font-family: "Jmh";
      src: url("fonts/jmh.ttf") format("truetype");
      font-display: swap;
    } */

     @font-face {
      font-family: "Stilu";
      src: url("fonts/stilu/Stilu-Regular.otf") format("opentype");
      font-display: swap;
    }


    :root {
      --page-bg-top: #4b88b9;
      --page-bg-mid: #84bbe8;
      --page-bg-bottom: #6db0e1;
      --panel-top: #3a99e0;
      --panel-mid: #86bee8;
      --panel-dark: #0d5f9f;
      --panel-dark-edge: #08426d;
      --title-text: #063f6b;
      --orb: #0d6eb0;
      --orb-glow: rgba(65, 170, 255, 0.45);
      --footer-top: #1668a8;
      --footer-bottom: #084d80;
      --card-shadow: rgba(0, 47, 82, 0.28);
      --surface: rgba(198, 229, 255, 0.18);
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      min-height: 100vh;
      display: flex;
      justify-content: center;
      background:
        radial-gradient(circle at top, rgba(255, 255, 255, 0.18), transparent 28%),
        linear-gradient(180deg, #5d5d5d 0%, #4b4b4b 100%);
      color: #022d4b;
      font-family: "Trebuchet MS", "Gill Sans", sans-serif;
      overflow-x: hidden;
    }

    .page-shell {
      position: relative;
      width: min(92vw, 980px);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      background: linear-gradient(180deg, var(--page-bg-top) 0%, var(--page-bg-mid) 48%, var(--page-bg-bottom) 100%);
      box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
      isolation: isolate;
      overflow: hidden;
    }

    .page-shell::before,
    .page-shell::after {
      content: "";
      position: absolute;
      inset: auto;
      border-radius: 999px;
      pointer-events: none;
      filter: blur(16px);
      opacity: 0.45;
      z-index: 0;
    }

    .page-shell::before {
      top: 14%;
      left: -9%;
      width: 260px;
      height: 260px;
      background: rgba(102, 217, 255, 0.3);
      animation: driftGlow 14s ease-in-out infinite alternate;
    }

    .page-shell::after {
      right: -6%;
      bottom: 24%;
      width: 230px;
      height: 230px;
      background: rgba(0, 111, 201, 0.26);
      animation: driftGlow 17s ease-in-out infinite alternate-reverse;
    }

    .ambient {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      overflow: hidden;
    }

    .dust {
      position: absolute;
      bottom: -10%;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: rgba(224, 246, 255, 0.55);
      box-shadow: 0 0 12px rgba(212, 239, 255, 0.9);
      animation: dustRise linear infinite;
    }

    .topbar,
    .title-band,
    .reveal-panel,
    .cards,
    .long-panels,
    .content-spacer,
    footer {
      position: relative;
      z-index: 1;
    }

    .topbar {
      min-height: 62px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding: 14px 42px;
      background: linear-gradient(180deg, #46a1e8 0%, #56a8e8 100%);
      z-index: 3;
    }

    .social-links {
      display: flex;
      gap: 18px;
      overflow: visible;
    }

    .social-orb {
      position: relative;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #dff3ff;
      font-family: "Arial Black", "Impact", sans-serif;
      font-size: 0.95rem;
      text-decoration: none;
      background: linear-gradient(180deg, #1c7cc0 0%, #0f5d99 100%);
      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 10px 24px rgba(5, 63, 105, 0.28);
      transform: translateX(180px);
      opacity: 0;
      animation: orbFlyIn 850ms ease-in forwards;
    }

    .social-orb::after {
      content: attr(aria-label);
      position: absolute;
      left: 50%;
      top: calc(100% + 8px);
      transform: translateX(-50%) translateY(-4px);
      color: #ffffff;
      font-family: "Arial Black", "Impact", sans-serif;
      font-size: 0.6rem;
      letter-spacing: 0.08em;
      line-height: 1;
      text-transform: uppercase;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      z-index: 999;
      transition: opacity 180ms ease, transform 180ms ease;
      text-shadow: 0 1px 6px rgba(2, 28, 47, 0.4);
    }

    .social-orb:nth-child(2) {
      animation-delay: 120ms;
    }

    .social-orb:nth-child(3) {
      animation-delay: 240ms;
    }

    .social-orb:hover,
    .social-orb:focus-visible {
      transform: translateY(-3px) scale(1.08);
      box-shadow: 0 0 18px var(--orb-glow), 0 12px 28px rgba(5, 63, 105, 0.32);
      outline: none;
    }

    .social-orb:hover::after,
    .social-orb:focus-visible::after {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    .title-band {
      padding: 22px 28px;
      text-align: center;
      background: linear-gradient(180deg, #7fb9e6 0%, #8fc6ec 100%);
    }

    .title-band h1 {
      margin: 0;
      color: var(--title-text);
      font-family:   "Arial Black", "Impact", sans-serif;
      font-size: clamp(1.4rem, 4.2vw, 3.45rem);
      letter-spacing: 0.025em;
      line-height: 1;
      text-transform: uppercase;
      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.16);
      white-space: nowrap;
    }

    .reveal-panel {
      height: 5px;
      background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent 22%, transparent 78%, rgba(255, 255, 255, 0.08)),
        linear-gradient(180deg, rgba(8, 72, 118, 0.18), rgba(3, 39, 64, 0.36)),
        url("images/ogdad.png");
      background-repeat: no-repeat;
      background-size: 100% 100%, 100% 100%, 100% auto;
      background-position: center center, center center, center 0%;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.12);
      animation: panelOpen 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) 300ms forwards;
      transform-origin: top center;
      overflow: hidden;
    }

    .reveal-panel::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(120deg, transparent 15%, rgba(255, 255, 255, 0.18) 42%, transparent 68%),
        radial-gradient(circle at 50% 45%, rgba(119, 205, 255, 0.22), transparent 38%);
      mix-blend-mode: screen;
      opacity: 0.8;
    }

    .cards {
      padding: 34px clamp(20px, 4vw, 44px) 0;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: clamp(18px, 2vw, 34px);
      align-items: start;
    }

    .card {
      position: relative;
      min-height: 200px;
      border: 0;
      border-radius: 18px;
      overflow: hidden;
      cursor: pointer;
      background: none;
      box-shadow: 0 14px 30px var(--card-shadow);
      transform: translateY(0) scale(1);
      transition: transform 220ms ease, box-shadow 220ms ease, filter 220ms ease;
      isolation: isolate;
    }

    a.card {
      display: block;
      text-decoration: none;
      color: inherit;
    }

    .card-qi-gong{
      background:
        url("images/nuShuRa1.jpg") center/cover no-repeat;
    }

     .card-tehuti{
      background: url("images/divinationStatic.jpg") center/cover no-repeat;
    }

     .card-spiritual-tech{
      background: url("images/spiritualTech2.jpg") center/cover no-repeat;
    }

    .card-health{
      background: url("images/healthConsultations.jpg") center/cover no-repeat;
    }


    .card-counseling{
      background: url("images/counseling.jpg") center/cover no-repeat;
    }


   

    .card-classes{
         background:
        url("images/classes.jpg") top center/cover no-repeat;
    }


    .card-video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 0;
      pointer-events: none;
    }

    .card::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 36%;
      background:
        linear-gradient(180deg, rgba(5, 31, 52, 0) 0%, rgba(5, 31, 52, 0.18) 24%, rgba(4, 24, 40, 0.84) 100%);
      z-index: 1;
      pointer-events: none;
    }

    .card::after {
      content: "";
      position: absolute;
      inset: 10px;
      border-radius: 14px;
      border: 1px solid rgba(202, 235, 255, 0.2);
      z-index: 2;
    }

    .card:hover,
    .card:focus-visible {
      transform: translateY(-8px) scale(1.08);
      box-shadow: 0 22px 40px rgba(4, 45, 73, 0.3);
      filter: saturate(1.12) brightness(1.05);
      outline: none;
      z-index: 3;
    }

    .card-label {
      position: absolute;
      left: 18px;
      right: 18px;
      bottom: 16px;
      z-index: 3;
      color: #eef8ff;
      font-family: "Arial Black", "Impact", sans-serif;
      font-size: 0.9rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
    }

    .long-panels {
      padding: 42px clamp(20px, 4vw, 44px) 0;
      display: grid;
      gap: 24px;
    }

    .long-panel {
      position: relative;
      display: grid;
      grid-template-columns: 180px minmax(0, 1fr);
      align-items: center;
      gap: clamp(20px, 3vw, 34px);
      padding: 28px 30px 28px 22px;
      background:
        linear-gradient(135deg, rgba(225, 242, 255, 0.88), rgba(171, 215, 247, 0.84));
      border: 1px solid rgba(227, 246, 255, 0.5);
      border-radius: 28px 82px;
      box-shadow:
        0 18px 32px rgba(8, 59, 97, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.38);
      overflow: hidden;
      isolation: isolate;
    }

    .long-panel::before {
      content: "";
      position: absolute;
      inset: 10px;
      border-radius: 28px 82px;
      border: 1px solid rgba(77, 151, 202, 0.24);
      pointer-events: none;
      z-index: 0;
    }

    .long-panel::after {
      content: "";
      position: absolute;
      top: -28px;
      right: 34px;
      width: 160px;
      height: 120px;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.34), transparent 70%);
      pointer-events: none;
      z-index: 0;
    }

    .panel-orb,
    .panel-copy {
      position: relative;
      z-index: 1;
    }

    .panel-orb {
      width: clamp(132px, 16vw, 180px);
      aspect-ratio: 1;
      border-radius: 50%;
      background-size: cover;
      background-position: center;
      box-shadow:
        0 0 0 6px rgba(230, 245, 255, 0.34),
        0 16px 28px rgba(6, 55, 90, 0.2);
    }

    .panel-botanicals {
      background-image: url("exports/newHerbs3-2.jpg");
    }


    .panel-solstice {
      background-image: url("images/solstice.jpg");
    }

    .panel-readings {
      background-image: url("exports/divinationStatic.png");
    }

    .panel-classes {
      background-image: url("images/classes.jpg");
    }

    .panel-counseling {
      background-image: url("images/counseling.jpg");
    }

    .panel-health {
      background-image: url("images/healthConsultations.jpg");
    }

    .panel-nushu {
      background-image: url("images/justPractitioners.jpg");
    }

    .panel-community {
      background-image: url("images/students.png");
    }

    .panel-copy h2 {
      margin: 0 0 10px;
      color: #1d2210;
      font-family: "Arial Black", "Impact", sans-serif;
      font-size: clamp(1rem, 2vw, 1.5rem);
      line-height: 0.98;
      text-transform: uppercase;
    }

    .panel-copy p, ul {
      margin: 0;
      color: #6f6a33;
      font-family:  "Trebuchet MS", sans-serif;
      font-size: clamp(1.3rem, 3vw, 1rem);
      line-height: 1.1;
      letter-spacing: 0.01em;
    }

    .long-panel-link {
      text-decoration: none;
      color: inherit;
    }


    .panel-copy  ul {
        text-align: left;
    }



    .content-spacer {
      flex: 1;
      min-height: 180px;
      position: relative;
    }

    .content-spacer::before {
      content: "";
      position: absolute;
      left: 9%;
      right: 9%;
      bottom: 18%;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(234, 247, 255, 0.55), transparent);
      opacity: 0.55;
    }

    footer {
      margin-top: auto;
      background: linear-gradient(180deg, var(--footer-top) 0%, var(--footer-bottom) 100%);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }

    .footer-main {
      min-height: 56px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px 16px;
    }

    .footer-credit {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      max-width: 100%;
      color: #dcefff;
      text-align: center;
    }

    .footer-credit-logo {
      width: 26px;
      height: 26px;
      object-fit: contain;
      filter: drop-shadow(0 4px 8px rgba(2, 28, 47, 0.28));
      flex: 0 0 auto;
    }

    .footer-credit-text {
      margin: 0;
      color: #e5f5ff;
      font-family: "Arial Black", "Impact", sans-serif;
      font-size: 0.68rem;
      letter-spacing: 0.08em;
      line-height: 1;
      text-transform: uppercase;
      text-shadow: 0 1px 6px rgba(2, 28, 47, 0.24);
    }

    .footer-credit-text a {
      color: #8fdcff;
      text-decoration: none;
      transition: color 180ms ease;
    }

    .footer-credit-text a:visited {
      color: rgb(228, 222, 222);
    }

    .footer-credit-text a:hover,
    .footer-credit-text a:focus-visible {
      color: #36e3d4;
    }

    .footer-edge {
      min-height: 20px;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(2, 39, 64, 0.42));
    }

    @keyframes orbFlyIn {
      0% {
        transform: translateX(180px) scale(0.78);
        opacity: 0;
      }

      70% {
        transform: translateX(-10px) scale(1.04);
        opacity: 1;
      }

      100% {
        transform: translateX(0) scale(1);
        opacity: 1;
      }
    }

    @keyframes panelOpen {
      0% {
        height: 5px;
      }

      100% {
        height: clamp(90px, 14vw, 132px);
      }
    }

    @keyframes driftGlow {
      0% {
        transform: translate3d(0, 0, 0) scale(1);
      }

      100% {
        transform: translate3d(24px, -16px, 0) scale(1.08);
      }
    }

    @keyframes dustRise {
      0% {
        transform: translate3d(0, 0, 0) scale(0.8);
        opacity: 0;
      }

      15% {
        opacity: 0.75;
      }

      100% {
        transform: translate3d(var(--drift-x), -115vh, 0) scale(1.35);
        opacity: 0;
      }
    }

    @media (max-width: 900px) {
      .topbar {
        padding: 14px 28px;
      }

      .cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .long-panel {
        grid-template-columns: 140px minmax(0, 1fr);
        padding: 24px 24px 24px 18px;
      }

      .content-spacer {
        min-height: 140px;
      }
    }

    @media (max-width: 620px) {
      body {
        background: linear-gradient(180deg, #5f5f5f 0%, #4b4b4b 100%);
      }

      .page-shell {
        width: 100%;
        min-height: 100vh;
      }

      .topbar {
        justify-content: center;
        padding: 14px 18px;
      }

      .title-band {
        padding: 18px 16px;
      }

      .title-band h1 {
        font-size: clamp(1.1rem, 5.9vw, 1.85rem);
        letter-spacing: 0.015em;
      }

      .cards {
        grid-template-columns: 1fr;
        padding-top: 26px;
      }

      .long-panels {
        padding-top: 30px;
      }

      .long-panel {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: 18px;
        padding: 24px 18px;
        border-radius: 26px 40px 26px 40px / 26px 34px 26px 34px;
      }

      .long-panel::before {
        border-radius: 18px 30px 18px 30px / 18px 24px 18px 24px;
      }

      .panel-copy {
        justify-self: center;
      }

      .panel-copy p {
        max-width: 24ch;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
      }

      .card {
        min-height: 200px;
      }

      .footer-credit {
        gap: 8px;
      }

      .footer-credit-text {
        font-size: 0.58rem;
        letter-spacing: 0.05em;
      }

      .card:hover,
      .card:focus-visible {
        transform: translateY(-5px) scale(1.03);
      }

      .content-spacer {
        min-height: 120px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

      .social-orb,
      .reveal-panel,
      .dust,
      .page-shell::before,
      .page-shell::after {
        animation: none !important;
      }

      .social-orb {
        transform: none;
        opacity: 1;
      }

      .reveal-panel {
        height: clamp(90px, 14vw, 132px);
      }

      .card,
      .social-orb {
        transition: none;
      }
    }

    .feature-shell {
      position: relative;
      width: min(100%, 1200px);
      min-height: 100vh;
      margin: 0 auto;
      background:
        radial-gradient(circle at top left, rgba(190, 233, 255, 0.22), transparent 28%),
        linear-gradient(180deg, #4f8cbc 0%, #7ebae6 45%, #6caede 100%);
      box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
      overflow: hidden;
      isolation: isolate;
    }

    .feature-shell::before,
    .feature-shell::after {
      content: "";
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
      filter: blur(18px);
      z-index: 0;
    }

    .feature-shell::before {
      top: 10%;
      right: -5%;
      width: 300px;
      height: 300px;
      background: rgba(119, 220, 255, 0.24);
      animation: driftGlow 16s ease-in-out infinite alternate;
    }

    .feature-shell::after {
      left: -6%;
      bottom: 16%;
      width: 240px;
      height: 240px;
      background: rgba(10, 98, 168, 0.22);
      animation: driftGlow 18s ease-in-out infinite alternate-reverse;
    }

    .feature-topbar,
    .feature-main,
    .feature-footer {
      position: relative;
      z-index: 1;
    }

    .contact-shell::before {
      background: rgba(120, 224, 255, 0.2);
    }

    .contact-main {
      padding-bottom: 100px;
    }

    .contact-hero {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
      gap: clamp(24px, 5vw, 54px);
      align-items: center;
      min-height: 420px;
    }

    .contact-hero-art {
      position: relative;
      min-height: 360px;
      display: grid;
      place-items: center;
    }

    .contact-figure {
      position: absolute;
      inset: 8% 2% 2% 10%;
      background:
        radial-gradient(circle at 38% 34%, rgba(214, 243, 255, 0.18), transparent 28%),
        linear-gradient(180deg, rgba(115, 193, 236, 0.08), rgba(6, 56, 92, 0.2)),
        url("images/anpu.png") center/contain no-repeat;
      opacity: 0.34;
      filter: saturate(0.9) brightness(1.05);
      animation: driftGlow 15s ease-in-out infinite alternate;
      pointer-events: none;
    }

    .contact-callout {
      position: absolute;
      left: 0;
      bottom: 0;
      width: min(280px, 84%);
      padding: 18px 18px 20px;
      border-radius: 20px 44px 18px 34px;
      background: rgba(8, 67, 108, 0.76);
      box-shadow: 0 16px 34px rgba(7, 55, 90, 0.18);
      backdrop-filter: blur(10px);
    }

    .contact-callout p {
      margin: 0;
      color: #eef9ff;
      font-family: "Jmh", "Trebuchet MS", sans-serif;
      font-size: 1.14rem;
      line-height: 1.08;
    }

    .contact-grid {
      display: grid;
      grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
      gap: 24px;
      margin-top: 18px;
    }

    .contact-panel {
      position: relative;
      padding: 28px 24px 24px;
      border-radius: 28px 68px 26px 52px / 26px 44px 22px 36px;
      background:
        linear-gradient(145deg, rgba(233, 246, 255, 0.86), rgba(169, 211, 241, 0.8));
      box-shadow:
        0 18px 32px rgba(9, 62, 98, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.36);
      overflow: hidden;
    }

    .contact-panel::before {
      content: "";
      position: absolute;
      inset: 10px;
      border-radius: 20px 52px 18px 40px / 18px 34px 18px 28px;
      border: 1px solid rgba(95, 158, 202, 0.22);
      pointer-events: none;
    }

    .contact-panel > * {
      position: relative;
      z-index: 1;
    }

    .contact-panel h2 {
      margin: 10px 0 12px;
      color: #0a3554;
      font-family: "Arial Black", "Impact", sans-serif;
      font-size: clamp(1.2rem, 2.4vw, 1.9rem);
      line-height: 0.98;
      text-transform: uppercase;
    }

    .contact-panel p,
    .contact-form-note,
    .contact-method p {
      margin: 0;
      color: #24516e;
      font-family: "Jmh", "Trebuchet MS", sans-serif;
      font-size: clamp(1.02rem, 1.8vw, 1.3rem);
      line-height: 1.1;
    }

    .contact-form-note[data-state="pending"] {
      color: #0d4f7c;
    }

    .contact-form-note[data-state="success"] {
      color: #0e6b56;
    }

    .contact-form-note[data-state="error"] {
      color: #8a2638;
    }

    .contact-methods {
      display: grid;
      gap: 14px;
      margin-top: 18px;
    }

    .contact-method {
      padding: 16px 16px 18px;
      border-radius: 18px 30px 18px 26px;
      background: rgba(225, 243, 255, 0.4);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
    }

    .contact-method-label {
      display: block;
      margin-bottom: 8px;
      color: #0b4b79;
      font-family: "Arial Black", "Impact", sans-serif;
      font-size: 0.76rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .contact-form-intro {
      margin-bottom: 18px;
    }

    .contact-form {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
    }

    .contact-field {
      display: grid;
      gap: 8px;
    }

    .contact-field span {
      color: #0b4b79;
      font-family: "Arial Black", "Impact", sans-serif;
      font-size: 0.75rem;
      letter-spacing: 0.11em;
      text-transform: uppercase;
    }

    .contact-field input,
    .contact-field textarea {
      width: 100%;
      border: 1px solid rgba(73, 145, 194, 0.28);
      border-radius: 16px 24px 16px 22px;
      background: rgba(244, 251, 255, 0.82);
      color: #0d3e61;
      font: inherit;
      padding: 14px 16px;
      outline: none;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32);
    }

    .contact-field textarea {
      resize: vertical;
      min-height: 160px;
    }

    .contact-field input:focus,
    .contact-field textarea:focus {
      border-color: rgba(42, 192, 208, 0.8);
      box-shadow: 0 0 0 3px rgba(54, 227, 212, 0.14);
    }

    .contact-field-full {
      grid-column: 1 / -1;
    }

    .contact-form-actions {
      grid-column: 1 / -1;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 14px;
      margin-top: 6px;
    }

    .contact-submit {
      border: 0;
      min-height: 48px;
      padding: 0 22px;
      border-radius: 999px;
      background: linear-gradient(180deg, #0f6fb3, #0a5a93);
      color: #eaf7ff;
      font-family: "Arial Black", "Impact", sans-serif;
      font-size: 0.82rem;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      cursor: pointer;
      box-shadow: 0 12px 24px rgba(9, 68, 110, 0.16);
    }

    .contact-submit:disabled {
      cursor: wait;
      opacity: 0.72;
    }

    .feature-topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 22px clamp(20px, 5vw, 46px);
      background: linear-gradient(180deg, rgba(69, 155, 221, 0.95), rgba(90, 170, 230, 0.88));
    }

    .feature-backlink {
      color: #ecf8ff;
      text-decoration: none;
      font-family: "Arial Black", "Impact", sans-serif;
      font-size: 0.78rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      text-shadow: 0 1px 8px rgba(3, 39, 66, 0.28);
    }

    .feature-main {
      padding: 34px clamp(20px, 5vw, 46px) 120px;
    }

    .feature-hero {
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
      align-items: center;
      gap: clamp(28px, 5vw, 58px);
      min-height: 520px;
    }

    .feature-kicker {
      margin: 0 0 12px;
      color: rgba(10, 70, 114, 0.9);
      font-family: "Arial Black", "Impact", sans-serif;
      font-size: 0.78rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }

    .feature-hero-copy h1 {
      margin: 0;
      color: #063d69;
      font-family: "Khemenu", "Arial Black", "Impact", sans-serif;
      font-size: clamp(2rem, 5vw, 4.8rem);
      line-height: 0.9;
      text-transform: uppercase;
      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.14);
    }

    .feature-intro {
      margin: 18px 0 0;
      max-width: 32ch;
      color: #0d3e61;
      font-family: "Stilu", "Trebuchet MS", sans-serif;
      font-size: clamp(1.35rem, 2.5vw, 2.05rem);
      line-height: 1.08;
    }

    .feature-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 26px;
    }

    .feature-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 46px;
      padding: 0 20px;
      border-radius: 999px;
      border: 1px solid rgba(232, 247, 255, 0.45);
      background: rgba(236, 248, 255, 0.18);
      color: #eaf7ff;
      text-decoration: none;
      font-family: "Arial Black", "Impact", sans-serif;
      font-size: 0.82rem;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      box-shadow: 0 12px 24px rgba(9, 68, 110, 0.16);
      backdrop-filter: blur(8px);
    }

    .feature-button-primary {
      background: linear-gradient(180deg, #0f6fb3, #0a5a93);
    }

    .feature-button-reserve {
      font-size: 1.2em;
      background: linear-gradient(180deg, #44b886, #1e7b63);
      color: #f3fffb;
      box-shadow:
        0 14px 28px rgba(13, 86, 72, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
    }

    .feature-hero-art {
      position: relative;
      min-height: 520px;
      display: grid;
      place-items: center;
    }

    .feature-orbital-ring {
      position: absolute;
      border-radius: 50%;
      border: 1px solid rgba(221, 245, 255, 0.24);
      pointer-events: none;
    }

    .feature-orbital-ring-one {
      width: min(42vw, 420px);
      height: min(42vw, 420px);
      animation: rotateRing 20s linear infinite;
    }

    .feature-orbital-ring-two {
      width: min(32vw, 320px);
      height: min(32vw, 320px);
      border-style: dashed;
      animation: rotateRing 14s linear infinite reverse;
    }

    .feature-video-frame {
      position: relative;
      width: min(34vw, 340px);
      aspect-ratio: 1;
      border-radius: 36px 110px 44px 110px / 34px 72px 44px 76px;
      padding: 14px;
      background:
        linear-gradient(160deg, rgba(239, 249, 255, 0.7), rgba(130, 189, 232, 0.3));
      box-shadow:
        0 26px 44px rgba(7, 57, 92, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.34);
      overflow: hidden;
      z-index: 1;
    }

    .feature-video-frame::before {
      content: "";
      position: absolute;
      inset: 8px;
      border-radius: 26px 96px 34px 96px / 24px 60px 34px 60px;
      border: 1px solid rgba(233, 247, 255, 0.35);
      pointer-events: none;
    }

    .feature-video {
      width: 100%;
      height: 100%;
      border-radius: 22px 88px 28px 88px / 22px 52px 28px 52px;
      object-fit: cover;
      display: block;
    }

    .classes-hero-image {
      object-position: top center;
    }

    .therapeutics-hero-image {
      object-position: center;
    }

    .feature-sigil-card {
      position: absolute;
      right: 0;
      bottom: 28px;
      width: min(230px, 52%);
      padding: 18px 18px 20px;
      border-radius: 18px 44px 18px 34px;
      background: rgba(8, 67, 108, 0.78);
      box-shadow: 0 16px 34px rgba(7, 55, 90, 0.18);
      backdrop-filter: blur(10px);
      z-index: 2;
    }

    .feature-sigil-label {
      display: block;
      margin-bottom: 8px;
      color: #d9f3ff;
      font-family: "Arial Black", "Impact", sans-serif;
      font-size: 0.75rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .feature-sigil-card p {
      margin: 0;
      color: #eef9ff;
      font-family: "Stilu", "Trebuchet MS", sans-serif;
      font-size: 1.15rem;
      line-height: 1.08;
    }

    .feature-flow {
      display: grid;
      grid-template-columns: 1.15fr 0.85fr 0.85fr;
      gap: 20px;
      margin-top: 18px;
    }

    .feature-note {
      position: relative;
      min-height: 240px;
      padding: 26px 24px 24px;
      border-radius: 28px 60px 24px 48px / 24px 42px 24px 36px;
      background:
        linear-gradient(145deg, rgba(234, 246, 255, 0.84), rgba(164, 208, 240, 0.78));
      box-shadow:
        0 18px 32px rgba(9, 62, 98, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.36);
      overflow: hidden;
    }

    .feature-note::before {
      content: "";
      position: absolute;
      inset: 10px;
      border-radius: 20px 48px 18px 38px / 18px 34px 18px 28px;
      border: 1px solid rgba(95, 158, 202, 0.22);
      pointer-events: none;
    }

    .feature-note-index {
      display: inline-block;
      color: rgba(8, 77, 123, 0.52);
      font-family: "Arial Black", "Impact", sans-serif;
      font-size: 0.78rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }

    .feature-note h2 {
      margin: 12px 0 10px;
      color: #0a3554;
      font-family: "Arial Black", "Impact", sans-serif;
      font-size: clamp(1.1rem, 2vw, 1.6rem);
      line-height: 1.02;
      text-transform: uppercase;
    }

    .feature-note p {
      margin: 0;
      color: #24516e;
      font-family: "Stilu", "Trebuchet MS", sans-serif;
      font-size: clamp(1.05rem, 2vw, 1.4rem);
      line-height: 1.08;
    }

    .feature-note-wide {
      min-height: 280px;
    }

    .feature-band {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 24px;
      align-items: start;
      margin-top: 22px;
      padding: 30px;
      border-radius: 28px 92px 30px 58px / 28px 54px 26px 42px;
      background:
        linear-gradient(135deg, rgba(6, 82, 132, 0.88), rgba(21, 116, 178, 0.72));
      box-shadow: 0 18px 36px rgba(6, 57, 93, 0.18);
    }

    .feature-band-longform {
      position: relative;
      overflow: hidden;
    }

    .feature-band-longform::before {
      content: "";
      position: absolute;
      top: -42px;
      right: -24px;
      width: 220px;
      height: 220px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(172, 226, 255, 0.22), transparent 72%);
      pointer-events: none;
    }

    .feature-band-copy {
      position: relative;
      z-index: 1;
      width: min(90%, 1100px);
      max-width: none;
    }

    .feature-band-copy h2 {
      margin: 0 0 16px;
      color: #e7f6ff;
      font-family: "Arial Black", "Impact", sans-serif;
      font-size: clamp(1.8rem, 3vw, 2.7rem);
      line-height: 0.98;
      text-transform: uppercase;
    }

    .feature-band-copy h3 {
      margin: 28px 0 12px;
      color: #cceeff;
      font-family: "Arial Black", "Impact", sans-serif;
      font-size: clamp(1.05rem, 2vw, 1.45rem);
      letter-spacing: 0.08em;
      line-height: 1.02;
      text-transform: uppercase;
    }

    .feature-band-copy p {
      margin: 0 0 16px;
      max-width: 90%;
      color: rgba(238, 249, 255, 0.96);
      font-family: "Stilu", "Trebuchet MS", sans-serif;
      font-size: clamp(1.18rem, 2vw, 1.58rem);
      line-height: 1.12;
    }

    .feature-band-copy ul {
      margin: 8px 0 20px;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 12px;
      max-width: 90%;
    }

    .feature-band-copy li {
      position: relative;
      padding: 14px 16px 14px 44px;
      border-radius: 18px 34px 18px 28px;
      background: rgba(228, 245, 255, 0.12);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
      color: rgba(238, 249, 255, 0.96);
      font-family: "Stilu", "Trebuchet MS", sans-serif;
      font-size: clamp(1.08rem, 1.8vw, 1.42rem);
      line-height: 1.12;
    }

    .feature-band-copy li::before {
      content: "";
      position: absolute;
      left: 18px;
      top: 19px;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: linear-gradient(180deg, #9fe7ff, #38d4d0);
      box-shadow: 0 0 14px rgba(78, 230, 220, 0.32);
    }

    .feature-band-copy strong {
      color: #ffffff;
    }

    .class-flyer-band {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .class-flyer-frame {
      position: relative;
      z-index: 1;
      padding: 14px;
      border-radius: 26px 72px 24px 60px / 24px 48px 24px 42px;
      background: rgba(229, 245, 255, 0.16);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 18px 34px rgba(7, 55, 90, 0.18);
    }

    .class-flyer-frame img {
      display: block;
      width: 100%;
      border-radius: 18px 56px 18px 50px / 18px 38px 18px 34px;
      object-fit: cover;
      box-shadow: 0 10px 22px rgba(5, 44, 72, 0.16);
    }

    .class-booking-copy {
      width: min(94%, 1180px);
    }

    .class-schedule-grid {
      display: grid;
      gap: 14px;
      margin-top: 22px;
      max-width: 96%;
    }

    .class-schedule-row {
      display: grid;
      grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto;
      align-items: center;
      gap: 14px;
      padding: 16px 18px;
      border-radius: 20px 42px 18px 32px;
      background: rgba(226, 244, 255, 0.12);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    }

    .class-schedule-cell p {
      margin: 0;
      color: rgba(238, 249, 255, 0.96);
      font-family: "Stilu", "Trebuchet MS", sans-serif;
      font-size: clamp(1rem, 1.5vw, 1.24rem);
      line-height: 1.12;
    }

    .class-schedule-label {
      display: block;
      margin-bottom: 8px;
      color: #cceeff;
      font-family: "Arial Black", "Impact", sans-serif;
      font-size: 0.7rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .class-schedule-action {
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }

    .therapeutics-copy {
      width: min(94%, 1180px);
    }

    .therapeutics-grid {
      display: grid;
      gap: 16px;
      margin-top: 22px;
      max-width: 96%;
    }

    .therapeutic-service {
      padding: 20px 20px 22px;
      border-radius: 20px 42px 18px 32px;
      background: rgba(226, 244, 255, 0.12);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    }

    .therapeutic-mark {
      margin: 0 0 8px;
      color: #9fe7ff;
      font-family: "Arial Black", "Impact", sans-serif;
      font-size: 1rem;
      letter-spacing: 0.1em;
    }

    .therapeutic-service h3 {
      margin: 0 0 8px;
      color: #ffffff;
      font-family: "Arial Black", "Impact", sans-serif;
      font-size: clamp(1.08rem, 2vw, 1.5rem);
      line-height: 1.02;
      text-transform: uppercase;
    }

    .therapeutic-subtitle {
      margin: 0 0 12px;
      color: #cceeff;
      font-family: "Arial Black", "Impact", sans-serif;
      font-size: 0.8rem;
      letter-spacing: 0.08em;
      line-height: 1.2;
      text-transform: uppercase;
    }

    .therapeutic-service p:last-child {
      margin-bottom: 0;
      max-width: none;
    }

    .spiritual-tech-grid {
      display: grid;
      gap: 16px;
      margin-top: 22px;
      max-width: 96%;
    }

    .spiritual-tech-item {
      padding: 18px 20px 20px;
      border-radius: 20px 42px 18px 32px;
      background: rgba(226, 244, 255, 0.12);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    }

    .spiritual-tech-head {
      display: grid;
      grid-template-columns: 88px minmax(0, 1fr);
      gap: 16px;
      align-items: center;
      margin-bottom: 14px;
    }

    .spiritual-tech-orb {
      width: 88px;
      height: 88px;
      border-radius: 50%;
      background-size: cover;
      background-position: center;
      box-shadow:
        0 0 0 4px rgba(230, 245, 255, 0.22),
        0 14px 24px rgba(6, 55, 90, 0.2);
    }

    .spiritual-tech-orb-solstice {
      background-image: url("exports/spiritualTech2.png");
    }

    .spiritual-tech-orb-meditation {
      background-image: url("exports/spiritualTech.png");
    }

    .spiritual-tech-orb-moon {
      background-image: url("exports/nuShuRa1.png");
    }

    .spiritual-tech-orb-equinox {
      background-image: url("images/equinox2.jpg");
    }

    .spiritual-tech-five-elements {
      background-image: url("images/fiveElements.jpg");
    }


    .spiritual-tech-moon-phases {
      background-image: url("images/moonPhases2.jpg");
    }

    .spiritual-tech-orb-elemental {
      background-image: url("exports/readingsStatic.png");
    }

    .spiritual-tech-head-copy h3 {
      margin: 0 0 6px;
      color: #ffffff;
      font-family: "Arial Black", "Impact", sans-serif;
      font-size: clamp(1.08rem, 2vw, 1.5rem);
      line-height: 1.02;
      text-transform: uppercase;
    }

    .spiritual-tech-subtitle {
      margin: 0;
      color: #cceeff;
      font-family: "Arial Black", "Impact", sans-serif;
      font-size: 0.78rem;
      letter-spacing: 0.08em;
      line-height: 1.2;
      text-transform: uppercase;
    }

    .spiritual-tech-body p {
      margin: 0;
      max-width: none;
    }

    .feature-footer {
      position: relative;
      z-index: 1;
    }

    @keyframes rotateRing {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }

    @media (max-width: 900px) {
      .feature-hero {
        grid-template-columns: 1fr;
      }

      .feature-hero-copy {
        text-align: center;
        display: grid;
        justify-items: center;
      }

      .feature-intro {
        max-width: 28ch;
      }

      .feature-hero-art {
        min-height: 460px;
      }

      .feature-flow,
      .feature-band {
        grid-template-columns: 1fr;
      }

      .feature-band-copy p {
        max-width: none;
      }

      .contact-hero,
      .contact-grid {
        grid-template-columns: 1fr;
      }

      .contact-hero-copy {
        text-align: center;
        display: grid;
        justify-items: center;
      }

      .contact-hero-art {
        min-height: 320px;
      }

      .class-flyer-band {
        grid-template-columns: 1fr;
      }

      .class-booking-copy,
      .class-schedule-grid,
      .therapeutics-copy,
      .therapeutics-grid,
      .spiritual-tech-grid {
        width: 100%;
        max-width: none;
      }

      .class-schedule-row {
        grid-template-columns: 1fr;
        align-items: start;
      }

      .class-schedule-action {
        justify-content: flex-start;
      }
    }

    @media (max-width: 620px) {
      .feature-topbar {
        flex-direction: column;
        align-items: flex-start;
      }

      .feature-main {
        padding: 26px 18px 90px;
      }

      .feature-hero-copy {
        text-align: left;
        justify-items: start;
      }

      .contact-hero-copy {
        text-align: left;
        justify-items: start;
      }

      .feature-hero-copy h1 {
        font-size: clamp(2.4rem, 15vw, 4rem);
      }

      .health-hero-copy h1 {
        font-size: 2em;
      }

      .feature-intro {
        max-width: 24ch;
      }

      .feature-actions {
        width: 100%;
      }

      .feature-button {
        width: 100%;
      }

      .feature-hero-art {
        min-height: 360px;
      }

      .feature-video-frame {
        width: min(78vw, 320px);
      }

      .feature-orbital-ring-one {
        width: min(88vw, 360px);
        height: min(88vw, 360px);
      }

      .feature-orbital-ring-two {
        width: min(68vw, 270px);
        height: min(68vw, 270px);
      }

      .feature-sigil-card {
        position: relative;
        right: auto;
        bottom: auto;
        width: min(100%, 280px);
        margin-top: -26px;
      }

      .feature-note,
      .feature-band {
        padding: 22px 18px;
      }

      .feature-band-copy li {
        padding: 13px 14px 13px 40px;
      }

      .class-schedule-row {
        padding: 14px 14px 16px;
      }

      .therapeutic-service {
        padding: 18px 16px 20px;
      }

      .spiritual-tech-item {
        padding: 16px 14px 18px;
      }

      .spiritual-tech-head {
        grid-template-columns: 1fr;
        justify-items: start;
      }

      .class-schedule-action .feature-button {
        width: 100%;
      }

      .contact-panel {
        padding: 22px 18px;
      }

      .contact-form {
        grid-template-columns: 1fr;
      }

      .contact-callout {
        position: relative;
        width: min(100%, 280px);
        margin-top: 18px;
      }

      .contact-figure {
        inset: 0 0 6% 0;
        background-position: center top;
      }

      .contact-form-actions {
        align-items: flex-start;
      }

      .contact-submit {
        width: 100%;
      }
    }
 

    .responsive-image{
      width: 95%;
    }