/* =========================================
       0) About glowfield base layer
    ========================================= */
    #about.about--glowfield{
      position: relative;
      overflow: hidden;
      --gx: 0px;
      --gy: 0px;
    }

    #about.about--glowfield::before{
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;

      background-image:
        radial-gradient(
          circle at calc(50% + var(--gx)) calc(72% + var(--gy)),
          rgba(255, 240, 200, 0.55) 0%,
          rgba(255, 210, 140, 0.40) 18%,
          rgba(255, 170, 110, 0.28) 34%,
          rgba(255, 140, 90, 0.16) 55%,
          rgba(255, 120, 75, 0.05) 72%,
          rgba(255, 120, 75, 0) 100%
        ),
        radial-gradient(
          70% 60% at calc(22% + (var(--gx) * -0.4)) calc(20% + (var(--gy) * -0.2)),
          rgba(255, 220, 205, 0.22) 0%,
          rgba(255, 220, 205, 0.00) 70%
        ),
        radial-gradient(
          80% 70% at calc(78% + (var(--gx) * 0.25)) calc(26% + (var(--gy) * -0.15)),
          rgba(255, 205, 165, 0.18) 0%,
          rgba(255, 205, 165, 0.00) 72%
        ),
        radial-gradient(
          85% 90% at calc(86% + (var(--gx) * 0.15)) calc(86% + (var(--gy) * 0.20)),
          rgba(255, 155, 120, 0.12) 0%,
          rgba(255, 155, 120, 0.00) 70%
        );
    }

    #about.about--glowfield > .container{
      position: relative;
      z-index: 1;
    }

    /* =========================================
       1) Typography + alignment (always)
       - Center ONLY h2/h5
       - Keep paragraphs LEFT
    ========================================= */
    #about.about--glowfield .content{
      text-align: left !important;
    }

    #about.about--glowfield .content > h2,
    #about.about--glowfield .content > h5{
      display: block !important;
      width: 100% !important;
      text-align: center !important;

      position: static !important;
      left: auto !important;
      right: auto !important;
      transform: none !important;

      margin-left: auto !important;
      margin-right: auto !important;

      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    /* Kill any title decoration/underline that might exist */
    #about.about--glowfield .content > h2::before,
    #about.about--glowfield .content > h2::after{
      content: none !important;
      display: none !important;
    }
    #about.about--glowfield .content .title-decor,
    #about.about--glowfield .content .underline,
    #about.about--glowfield .content .decor,
    #about.about--glowfield .content .separator{
      display: none !important;
    }

    /* =========================================
       2) Desktop typography (992+)
    ========================================= */
    @media (min-width: 992px){
      #about.about--glowfield .content > h2.mb-4{
        font-size: clamp(3.2rem, 2.8vw, 4.2rem) !important;
        line-height: 1.06 !important;
        margin-bottom: 0.65rem !important;
      }

      #about.about--glowfield .content > h5.mb-4{
        font-size: clamp(1.6rem, 1.4vw, 2.1rem) !important;
        line-height: 1.25 !important;
        margin-bottom: 1.25rem !important;
        opacity: 0.98 !important;
      }
    }

    /* =========================================
   3) Intro card (the paragraphs) — premium “warm glass”
   UPDATED: fill the full right column (no narrow max-width / no auto-centering)
========================================= */
#about.about--glowfield .about-intro-card{
  max-width: none !important;         /* was 66ch */
  width: 100% !important;             /* ensure it spans the column */
  margin: 1.25rem 0 0 !important;     /* was auto (which centers + narrows) */
  padding: clamp(1.2rem, 2.2vw, 1.8rem) !important;

  border-radius: 22px !important;
  position: relative !important;
  overflow: hidden !important;
  text-align: left !important;

  background:
    radial-gradient(140% 120% at 30% 15%,
      rgba(255,255,255,0.92) 0%,
      rgba(255,255,255,0.86) 38%,
      rgba(255,245,238,0.80) 70%,
      rgba(255,240,230,0.76) 100%) !important;

  border: 1px solid rgba(255,255,255,0.55) !important;

  box-shadow:
    0 22px 55px rgba(24, 14, 36, 0.14),
    0 10px 22px rgba(24, 14, 36, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.55) !important;

  backdrop-filter: blur(10px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.1) !important;
}

    #about.about--glowfield .about-intro-card::before{
      content: "" !important;
      position: absolute !important;
      inset: -2px !important;
      border-radius: 24px !important;
      pointer-events: none !important;

      background: radial-gradient(
        70% 60% at 50% 0%,
        rgba(227, 120, 168, 0.16) 0%,
        rgba(227, 120, 168, 0.00) 65%
      ) !important;
      opacity: 0.9 !important;
    }

    #about.about--glowfield .about-intro-card > p{
      position: relative !important;
      z-index: 1 !important;
      margin: 0 !important;
      text-align: left !important;
      letter-spacing: 0.002em !important;

      /* baseline (mobile/tablet) */
      font-size: clamp(1.15rem, 1.05vw, 1.55rem) !important;
      line-height: 1.78 !important;
      color: rgba(42, 18, 56, 0.78) !important;
    }

    #about.about--glowfield .about-intro-card > p + p{
      margin-top: 1.15rem !important;
    }

    #about.about--glowfield .about-intro-card em{
      font-style: italic !important;
      font-size: inherit !important;
      color: rgba(42, 18, 56, 0.88) !important;
    }

    /* desktop bump (this preserves your “worked” size) */
    @media (min-width: 992px){
      #about.about--glowfield .about-intro-card{
        margin-top: 1.75rem !important;
      }
      #about.about--glowfield .about-intro-card > p{
        font-size: clamp(1.55rem, 1.35vw, 2.05rem) !important;
        line-height: 1.85 !important;
      }
    }


    /* =========================================
       4) About CTA shimmer button (About-scoped)
    ========================================= */
    @property --spin {
      syntax: "<angle>";
      inherits: false;
      initial-value: 0deg;
    }

    @keyframes spin { to { --spin: 360deg; } }
    @keyframes shinePulse {
      0%{opacity:0} 15%{opacity:1} 60%{opacity:1} 100%{opacity:0}
    }

    #about .about-cta{
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 1.6rem !important;
    }

    #about .btn-shimmer{
      --pill-radius: 999px !important;
      --ring: 6px !important;

      --btn-base: #2A1238;
      --btn-base-2: #3D1D4C;
      --btn-text: #E7D7F7;
      --btn-glow: #E378A8;
      --btn-glow-2: #F8B5D2;

      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;

      padding: .85em 1.8em;
      border-radius: var(--pill-radius) !important;
      text-decoration: none;
      font-family: var(--nav-font);
      font-weight: 600;

      isolation: isolate;
      overflow: hidden;
      background-clip: padding-box;

      background-image: linear-gradient(
        135deg,
        color-mix(in srgb, var(--btn-base), #000 6%) 0%,
        var(--btn-base-2) 55%,
        color-mix(in srgb, var(--btn-base), #000 14%) 100%
      );

      border: 1px solid color-mix(in srgb, var(--btn-glow), #fff 70%);

      box-shadow:
        0 10px 26px rgba(18, 10, 30, 0.22),
        0 2px 6px rgba(18, 10, 30, 0.14),
        inset 0 -12px 22px rgba(0,0,0,0.22),
        inset 0 1px 0 rgba(255,255,255,0.14);

      transform: translateY(0) scale(1);
      transition: transform .55s cubic-bezier(.2,.9,.2,1),
                  box-shadow .55s cubic-bezier(.2,.9,.2,1);
    }

    @media (hover:hover){
      #about .btn-shimmer:hover:not(:active){
        transform: translateY(-2px) scale(1.06);
        box-shadow:
          0 16px 34px rgba(18, 10, 30, 0.26),
          0 5px 14px rgba(18, 10, 30, 0.16),
          inset 0 0 0 transparent,
          inset 0 1px 0 rgba(255,255,255,0.18);
      }
    }

    #about .btn-shimmer:active{
      transform: translateY(-1px) scale(1.03);
    }

    #about .btn-shimmer .btn-text{
      position: relative;
      z-index: 3;
      color: var(--btn-text, #E7D7F7) !important;
      letter-spacing: 0.01em;
      background: none !important;
      -webkit-background-clip: initial !important;
      background-clip: initial !important;
      text-shadow: 0 1px 8px rgba(0,0,0,0.28);
    }

    #about .btn-shimmer .btn-shimmer-ring{
      position: absolute;
      inset: 0;
      border-radius: var(--pill-radius) !important;
      pointer-events: none;
      z-index: 2;

      padding: var(--ring);

      background: conic-gradient(
        from var(--spin),
        transparent 0%,
        transparent 34%,
        rgba(248, 181, 210, 0.00) 39%,
        rgba(248, 181, 210, 0.80) 42%,
        rgba(227, 120, 168, 0.72) 45%,
        rgba(248, 181, 210, 0.00) 48%,
        transparent 54%,
        transparent 100%
      );

      mix-blend-mode: plus-lighter;
      opacity: 0;
      animation: spin 1s linear infinite;

      -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;

      mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
      mask-composite: exclude;
    }

    #about .btn-shimmer .btn-shimmer-ring::before,
    #about .btn-shimmer .btn-shimmer-ring::after{
      content:"";
      position:absolute;
      inset: var(--ring);
      border-radius: var(--pill-radius);
      opacity: 0;
      transition: opacity .35s ease;
      pointer-events: none;
    }

    #about .btn-shimmer .btn-shimmer-ring::before{
      box-shadow:
        0 0 8px 2px rgba(248, 181, 210, 0.55),
        0 0 18px 4px rgba(227, 120, 168, 0.45);
    }

    #about .btn-shimmer .btn-shimmer-ring::after{
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.20),
        inset 0 0 6px rgba(248, 181, 210, 0.22);
    }

    @media (hover:hover){
      #about .btn-shimmer:hover .btn-shimmer-ring{ opacity: 1; }
      #about .btn-shimmer:hover .btn-shimmer-ring::before,
      #about .btn-shimmer:hover .btn-shimmer-ring::after{
        opacity: 1;
        animation: shinePulse 1.2s ease-in 1 forwards;
      }
    }

    @media (prefers-reduced-motion: reduce){
      #about .btn-shimmer .btn-shimmer-ring{ animation: none !important; }
    }

    /* =========================================
       5) Feature cards: warm-glass + CTAs line up
    ========================================= */
    #about.about--glowfield .features-list .feature-item{
      position: relative !important;
      overflow: hidden !important;

      border-radius: 20px !important;
      padding: 1.35rem 1.25rem !important;

      background:
        radial-gradient(140% 120% at 30% 15%,
          rgba(255,255,255,0.92) 0%,
          rgba(255,255,255,0.86) 38%,
          rgba(255,245,238,0.80) 70%,
          rgba(255,240,230,0.76) 100%) !important;

      border: 1px solid rgba(255,255,255,0.55) !important;

      box-shadow:
        0 18px 40px rgba(24, 14, 36, 0.12),
        0 7px 16px rgba(24, 14, 36, 0.08),
        inset 0 1px 0 rgba(255,255,255,0.55) !important;

      backdrop-filter: blur(10px) saturate(1.08) !important;
      -webkit-backdrop-filter: blur(10px) saturate(1.08) !important;

      transition: transform .35s ease, box-shadow .35s ease !important;

      display: flex !important;
      flex-direction: column !important;
      height: 100% !important;
    }

    #about.about--glowfield .features-list .feature-item::before{
      content: "" !important;
      position: absolute !important;
      inset: -2px !important;
      border-radius: 22px !important;
      pointer-events: none !important;

      background: radial-gradient(
        70% 60% at 50% 0%,
        rgba(227, 120, 168, 0.14) 0%,
        rgba(227, 120, 168, 0.00) 65%
      ) !important;
      opacity: 0.9 !important;
    }

    #about.about--glowfield .features-list .feature-item > i{
      position: relative !important;
      z-index: 1 !important;
      font-size: 1.65rem !important;
      opacity: 0.92 !important;
      margin-bottom: 0.85rem !important;
    }

    #about.about--glowfield .features-list .feature-item > h5,
    #about.about--glowfield .features-list .feature-item > p{
      position: relative !important;
      z-index: 1 !important;
    }

    #about.about--glowfield .features-list .feature-item > h5{
      margin-bottom: 0.75rem !important;
    }

    #about.about--glowfield .features-list .feature-item > p{
      margin: 0 !important;
      color: rgba(42, 18, 56, 0.74) !important;
      line-height: 1.65 !important;
      text-align: left !important;
      font-size: clamp(1rem, 0.55vw, 1.1rem) !important;
    }

    #about.about--glowfield .feature-cta{
      margin-top: auto !important;
      padding-top: 1.15rem !important;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    /* slightly smaller buttons inside feature cards */
    #about.about--glowfield .feature-cta .btn-shimmer{
      padding: .78em 1.5em !important;
      transform: none;
    }

    @media (hover:hover){
      #about.about--glowfield .features-list .feature-item:hover{
        transform: translateY(-4px) !important;
        box-shadow:
          0 24px 55px rgba(24, 14, 36, 0.15),
          0 10px 22px rgba(24, 14, 36, 0.10),
          inset 0 1px 0 rgba(255,255,255,0.6) !important;
      }
    }

    /* =========================================
       6) Mobile/tablet: readability card behind whole text column
    ========================================= */
    @media (max-width: 991.98px){
      #about.about--glowfield .col-lg-6[data-aos="fade-left"] .content{
        position: relative !important;
        padding: 1.6rem 1.3rem !important;
        border-radius: 22px !important;

        background:
          radial-gradient(120% 120% at 50% 35%,
            rgba(254,254,254,0.96) 0%,
            rgba(254,254,254,0.92) 40%,
            rgba(255,245,235,0.88) 70%,
            rgba(255,245,235,0.82) 100%) !important;

        border: 1px solid rgba(255,255,255,0.55) !important;
        box-shadow:
          0 18px 44px rgba(35, 22, 44, 0.14),
          0 6px 16px rgba(35, 22, 44, 0.08) !important;

        backdrop-filter: blur(10px) saturate(1.08) !important;
        -webkit-backdrop-filter: blur(10px) saturate(1.08) !important;

        margin-top: 1.1rem !important;
      }
    }

    /* =========================================================
   ABOUT — Fix: cover “drop” + intro card too narrow + text too big
   Paste AFTER existing About styles so it wins
========================================================= */

/* 1) Keep both columns top-aligned (prevents visual “drop” effects) */
#about.about--glowfield .row.align-items-center{
  align-items: flex-start !important;
}

/* 2) Make the intro card use the FULL text column width (no skinny centered card) */
#about.about--glowfield .about-intro-card{
  max-width: 100% !important;     /* was 66ch */
  margin-left: 0 !important;      /* was auto */
  margin-right: 0 !important;     /* was auto */
}

/* Optional: give it a little more breathing room inside a wider card */
@media (min-width: 992px){
  #about.about--glowfield .about-intro-card{
    padding: 1.6rem 1.7rem !important;
  }
}

/* 3) Calm the desktop paragraph sizing so it’s not huge */
@media (min-width: 992px){
  #about.about--glowfield .about-intro-card > p{
    font-size: clamp(1.25rem, 1.05vw, 1.55rem) !important;
    line-height: 1.82 !important;
  }
}

/* 4) Make sure the cover stays top-positioned and doesn’t get vertically “pushed” */
#about.about--glowfield .image-wrapper{
  align-self: flex-start !important;
}

/* =========================================================
   ABOUT — Magazine hierarchy (BIGGER floors + stronger deck)
   Paste AFTER the previous hierarchy rules
========================================================= */

/* 1) Deck / hook (P1) — bigger + more presence */
#about.about--glowfield .about-intro-card > p:nth-of-type(1){
  font-size: clamp(1.85rem, 1.95vw, 2.65rem) !important;
  line-height: 1.18 !important;
  letter-spacing: 0.012em !important;
  color: rgba(42, 18, 56, 0.94) !important;
  margin-bottom: 1.25rem !important;
}

/* 2) Lead (P2) — don’t let it shrink too far */
#about.about--glowfield .about-intro-card > p:nth-of-type(2){
  font-size: clamp(1.25rem, 1.15vw, 1.65rem) !important;
  line-height: 1.85 !important;
  max-width: 74ch !important;
}

/* 3) Body (P3–P5) — raise the minimum so it stays readable */
#about.about--glowfield .about-intro-card > p:nth-of-type(n+3):nth-of-type(-n+5){
  font-size: clamp(1.15rem, 1.0vw, 1.4rem) !important;
  line-height: 1.9 !important;
  max-width: 76ch !important;
}

/* 4) Closing beat (P6) — a touch bigger so it lands */
#about.about--glowfield .about-intro-card > p:nth-of-type(6){
  font-size: clamp(1.2rem, 1.05vw, 1.5rem) !important;
  line-height: 1.85 !important;
  margin-top: 1.35rem !important;
}

/* Slightly reduce card narrowness on desktop (helps readability without “wall of text”) */
@media (min-width: 992px){
  #about.about--glowfield .about-intro-card{
    max-width: 72ch !important;
  }
}

/* Mobile: keep the deck bold (but not absurdly huge) */
@media (max-width: 575.98px){
  #about.about--glowfield .about-intro-card > p:nth-of-type(1){
    font-size: clamp(1.6rem, 6vw, 2.05rem) !important;
    line-height: 1.16 !important;
  }

  #about.about--glowfield .about-intro-card > p:nth-of-type(2){
    font-size: clamp(1.15rem, 3.8vw, 1.35rem) !important;
  }

  #about.about--glowfield .about-intro-card > p:nth-of-type(n+3){
    font-size: clamp(1.05rem, 3.5vw, 1.2rem) !important;
  }
}
  </style>
 <!-- =========================================
     ABOUT SECTION — Glow Field + Pointer Drift
========================================= -->
<section id="about" class="about roselight-dawn-cream section about--glowfield">

  <!-- IMPORTANT: Put this in <head>, not here
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
  -->

  <style>
    /* =========================================================
       ABOUT — Layout + Type (Magazine)
    ========================================================= */

    /* Center ONLY headings */
    #about.about--glowfield .content { text-align: left !important; }
    #about.about--glowfield .content > h2,
    #about.about--glowfield .content > h5{
      text-align: center !important;
      width: 100% !important;
      margin-left: auto !important;
      margin-right: auto !important;
      position: static !important;
      transform: none !important;
    }

    @media (min-width: 992px){
      #about.about--glowfield .content > h2.mb-4{
        font-size: clamp(3.2rem, 2.8vw, 4.2rem) !important;
        line-height: 1.06 !important;
        margin-bottom: .65rem !important;
      }
      #about.about--glowfield .content > h5.mb-4{
        font-size: clamp(1.6rem, 1.4vw, 2.1rem) !important;
        line-height: 1.25 !important;
        margin-bottom: 1.25rem !important;
        opacity: .98 !important;
      }
    }

    /* Intro card */
    #about.about--glowfield .about-intro-card{
      max-width: 66ch !important;
      margin: 1.25rem auto 0 !important;
      padding: clamp(1.2rem, 2.2vw, 1.8rem) !important;
      border-radius: 22px !important;
      background:
        radial-gradient(140% 120% at 30% 15%,
          rgba(255,255,255,0.92) 0%,
          rgba(255,255,255,0.86) 38%,
          rgba(255,245,238,0.80) 70%,
          rgba(255,240,230,0.76) 100%) !important;
      border: 1px solid rgba(255,255,255,0.55) !important;
      box-shadow:
        0 22px 55px rgba(24, 14, 36, 0.14),
        0 10px 22px rgba(24, 14, 36, 0.08),
        inset 0 1px 0 rgba(255,255,255,0.55) !important;
      backdrop-filter: blur(10px) saturate(1.1) !important;
      -webkit-backdrop-filter: blur(10px) saturate(1.1) !important;
      text-align: left !important;
    }

    #about.about--glowfield .about-intro-card > p{
      margin: 0 !important;
      color: rgba(42, 18, 56, 0.78) !important;
      letter-spacing: 0.002em !important;
      line-height: 1.8 !important;
      font-size: clamp(1.1rem, 1vw, 1.35rem) !important;
    }
    #about.about--glowfield .about-intro-card > p + p{ margin-top: 1.05rem !important; }

    /* Make the opening hook bigger (magazine lead) */
    #about.about--glowfield .about-intro-card > p:first-child{
      font-size: clamp(1.35rem, 1.35vw, 1.85rem) !important;
      line-height: 1.25 !important;
      color: rgba(42, 18, 56, 0.92) !important;
      letter-spacing: 0.001em !important;
    }

    /* Desktop bump so body never feels tiny */
    @media (min-width: 992px){
      #about.about--glowfield .about-intro-card > p{
        font-size: clamp(1.25rem, 1.05vw, 1.55rem) !important;
      }
      #about.about--glowfield .about-intro-card > p:first-child{
        font-size: clamp(1.6rem, 1.55vw, 2.15rem) !important;
      }
    }

    /* Mobile: soft card behind whole text column */
    @media (max-width: 991.98px){
      #about.about--glowfield .col-lg-6[data-aos="fade-left"] .content{
        padding: 1.25rem 1.1rem !important;
        border-radius: 22px !important;
        background:
          radial-gradient(120% 120% at 50% 35%,
            rgba(254,254,254,0.96) 0%,
            rgba(254,254,254,0.92) 40%,
            rgba(255,245,235,0.88) 70%,
            rgba(255,245,235,0.82) 100%) !important;
        border: 1px solid rgba(255,255,255,0.55) !important;
        box-shadow:
          0 18px 44px rgba(35, 22, 44, 0.14),
          0 6px 16px rgba(35, 22, 44, 0.08) !important;
        backdrop-filter: blur(10px) saturate(1.08) !important;
        -webkit-backdrop-filter: blur(10px) saturate(1.08) !important;
        margin-top: 1.1rem !important;
      }
    }

    /* =========================================================
       CTA — Shimmer (reused)
    ========================================================= */
    @property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
    @keyframes spin { to { --spin: 360deg; } }
    @keyframes shinePulse { 0%{opacity:0} 15%{opacity:1} 60%{opacity:1} 100%{opacity:0} }

    #about .about-cta{
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 1.6rem;
    }

    #about .btn-shimmer{
      --pill-radius: 999px !important;
      --ring: 6px !important;

      --btn-base: #2A1238;
      --btn-base-2: #3D1D4C;
      --btn-text: #E7D7F7;
      --btn-glow: #E378A8;

      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;

      padding: .85em 1.8em;
      border-radius: var(--pill-radius) !important;
      text-decoration: none;

      font-family: var(--nav-font);
      font-weight: 600;

      isolation: isolate;
      overflow: hidden;
      background-clip: padding-box;

      background-image: linear-gradient(
        135deg,
        color-mix(in srgb, var(--btn-base), #000 6%) 0%,
        var(--btn-base-2) 55%,
        color-mix(in srgb, var(--btn-base), #000 14%) 100%
      );

      border: 1px solid color-mix(in srgb, var(--btn-glow), #fff 70%);

      box-shadow:
        0 10px 26px rgba(18, 10, 30, 0.22),
        0 2px 6px rgba(18, 10, 30, 0.14),
        inset 0 -12px 22px rgba(0,0,0,0.22),
        inset 0 1px 0 rgba(255,255,255,0.14);

      transform: translateY(0) scale(1);
      transition: transform .55s cubic-bezier(.2,.9,.2,1),
                  box-shadow .55s cubic-bezier(.2,.9,.2,1);
    }

    @media (hover:hover){
      #about .btn-shimmer:hover:not(:active){
        transform: translateY(-2px) scale(1.06);
        box-shadow:
          0 16px 34px rgba(18, 10, 30, 0.26),
          0 5px 14px rgba(18, 10, 30, 0.16),
          inset 0 0 0 transparent,
          inset 0 1px 0 rgba(255,255,255,0.18);
      }
    }

    #about .btn-shimmer .btn-text{
      position: relative;
      z-index: 3;
      color: var(--btn-text, #E7D7F7) !important;
      text-shadow: 0 1px 8px rgba(0,0,0,0.28);
    }

    #about .btn-shimmer .btn-shimmer-ring{
      position: absolute;
      inset: 0;
      border-radius: var(--pill-radius) !important;
      pointer-events: none;
      z-index: 2;

      padding: var(--ring);

      background: conic-gradient(
        from var(--spin),
        transparent 0%,
        transparent 34%,
        rgba(248, 181, 210, 0.00) 39%,
        rgba(248, 181, 210, 0.80) 42%,
        rgba(227, 120, 168, 0.72) 45%,
        rgba(248, 181, 210, 0.00) 48%,
        transparent 54%,
        transparent 100%
      );

      mix-blend-mode: plus-lighter;
      opacity: 0;
      animation: spin 1s linear infinite;

      -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;

      mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
      mask-composite: exclude;
    }

    @media (hover:hover){
      #about .btn-shimmer:hover .btn-shimmer-ring{ opacity: 1; }
    }

    @media (prefers-reduced-motion: reduce){
      #about .btn-shimmer .btn-shimmer-ring{ animation: none !important; }
    }

    /* =========================================================
       FEATURES — FULL-WIDTH HORIZONTAL RAIL (bottom)
       This is the fix for the stacking screenshot.
    ========================================================= */

    #about.about--glowfield .features-list{
      margin-top: 2.25rem !important;
    }

    /* Grid rail on desktop, scroll rail on small */
    #about.about--glowfield .features-rail{
      display: grid !important;
      gap: 1.1rem !important;
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      align-items: stretch !important;
    }

    @media (max-width: 1199.98px){
      #about.about--glowfield .features-rail{
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }
    }

    @media (max-width: 767.98px){
      /* On phones: make it a horizontal swipe rail */
      #about.about--glowfield .features-rail{
        display: grid !important;
        grid-auto-flow: column !important;
        grid-auto-columns: minmax(78%, 1fr) !important;
        grid-template-columns: unset !important;
        overflow-x: auto !important;
        padding-bottom: .5rem !important;
        scroll-snap-type: x mandatory !important;
      }
      #about.about--glowfield .feature-rail-item{
        scroll-snap-align: start !important;
      }
    }

    /* Feature card styling (warm glass) */
    #about.about--glowfield .feature-item{
      height: 100% !important;
      display: flex !important;
      flex-direction: column !important;
      padding: 1.25rem 1.2rem !important;
      border-radius: 20px !important;

      background:
        radial-gradient(140% 120% at 30% 15%,
          rgba(255,255,255,0.92) 0%,
          rgba(255,255,255,0.86) 38%,
          rgba(255,245,238,0.80) 70%,
          rgba(255,240,230,0.76) 100%) !important;

      border: 1px solid rgba(255,255,255,0.55) !important;

      box-shadow:
        0 18px 40px rgba(24, 14, 36, 0.12),
        0 7px 16px rgba(24, 14, 36, 0.08),
        inset 0 1px 0 rgba(255,255,255,0.55) !important;

      backdrop-filter: blur(10px) saturate(1.08) !important;
      -webkit-backdrop-filter: blur(10px) saturate(1.08) !important;
    }

    #about.about--glowfield .feature-item i{
      font-size: 1.5rem !important;
      opacity: .9 !important;
      margin-bottom: .65rem !important;
    }

    #about.about--glowfield .feature-item h5{
      margin: 0 0 .5rem !important;
    }

    #about.about--glowfield .feature-item p{
      margin: 0 !important;
      color: rgba(42, 18, 56, 0.74) !important;
      line-height: 1.6 !important;
    }

    /* Buttons line up: CTA pinned to bottom */
    #about.about--glowfield .feature-cta{
      margin-top: auto !important;
      padding-top: 1rem !important;
      display: flex !important;
      justify-content: center !important;
    }

    /* =========================================================
       Glow Field Background (section)
    ========================================================= */
    #about.about--glowfield{
      position: relative;
      overflow: hidden;
      --gx: 0px;
      --gy: 0px;
    }

    #about.about--glowfield::before{
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;

      background-image:
        radial-gradient(
          circle at calc(50% + var(--gx)) calc(72% + var(--gy)),
          rgba(255, 240, 200, 0.55) 0%,
          rgba(255, 210, 140, 0.40) 18%,
          rgba(255, 170, 110, 0.28) 34%,
          rgba(255, 140, 90, 0.16) 55%,
          rgba(255, 120, 75, 0.05) 72%,
          rgba(255, 120, 75, 0) 100%
        ),
        radial-gradient(
          70% 60% at calc(22% + (var(--gx) * -0.4)) calc(20% + (var(--gy) * -0.2)),
          rgba(255, 220, 205, 0.22) 0%,
          rgba(255, 220, 205, 0.00) 70%
        ),
        radial-gradient(
          80% 70% at calc(78% + (var(--gx) * 0.25)) calc(26% + (var(--gy) * -0.15)),
          rgba(255, 205, 165, 0.18) 0%,
          rgba(255, 205, 165, 0.00) 72%
        ),
        radial-gradient(
          85% 90% at calc(86% + (var(--gx) * 0.15)) calc(86% + (var(--gy) * 0.20)),
          rgba(255, 155, 120, 0.12) 0%,
          rgba(255, 155, 120, 0.00) 70%
        );
    }

    #about.about--glowfield > .container{
      position: relative;
      z-index: 1;
    }

    /* Desktop: let the intro card use the full column width */
@media (min-width: 992px){
  #about.about--glowfield .about-intro-card{
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* =========================================================
   ABOUT — Slight bump: lead line + 2nd paragraph only
========================================================= */

/* Base paragraphs: tiny lift (optional, keeps overall rhythm) */
#about.about--glowfield .about-intro-card > p{
  font-size: clamp(1.15rem, 1.05vw, 1.45rem) !important;
}

/* 1) Opening hook: a little larger */
#about.about--glowfield .about-intro-card > p:first-child{
  font-size: clamp(1.75rem, 1.65vw, 2.3rem) !important;
  line-height: 1.22 !important;
}

/* 2) Second paragraph only: slightly larger than body */
#about.about--glowfield .about-intro-card > p + p{
  font-size: clamp(1.25rem, 1.15vw, 1.6rem) !important;
  line-height: 1.75 !important;
}


    /* =========================================================
       ABOUT — Layout + Type (Magazine)
    ========================================================= */

    /* Center ONLY headings */
    #about.about--glowfield .content { text-align: left !important; }
    #about.about--glowfield .content > h2,
    #about.about--glowfield .content > h5{
      text-align: center !important;
      width: 100% !important;
      margin-left: auto !important;
      margin-right: auto !important;
      position: static !important;
      transform: none !important;
    }

    @media (min-width: 992px){
      #about.about--glowfield .content > h2.mb-4{
        font-size: clamp(3.2rem, 2.8vw, 4.2rem) !important;
        line-height: 1.06 !important;
        margin-bottom: .65rem !important;
      }
      #about.about--glowfield .content > h5.mb-4{
        font-size: clamp(1.6rem, 1.4vw, 2.1rem) !important;
        line-height: 1.25 !important;
        margin-bottom: 1.25rem !important;
        opacity: .98 !important;
      }
    }

    /* Intro card */
    #about.about--glowfield .about-intro-card{
      max-width: 66ch !important;
      margin: 1.25rem auto 0 !important;
      padding: clamp(1.2rem, 2.2vw, 1.8rem) !important;
      border-radius: 22px !important;
      background:
        radial-gradient(140% 120% at 30% 15%,
          rgba(255,255,255,0.92) 0%,
          rgba(255,255,255,0.86) 38%,
          rgba(255,245,238,0.80) 70%,
          rgba(255,240,230,0.76) 100%) !important;
      border: 1px solid rgba(255,255,255,0.55) !important;
      box-shadow:
        0 22px 55px rgba(24, 14, 36, 0.14),
        0 10px 22px rgba(24, 14, 36, 0.08),
        inset 0 1px 0 rgba(255,255,255,0.55) !important;
      backdrop-filter: blur(10px) saturate(1.1) !important;
      -webkit-backdrop-filter: blur(10px) saturate(1.1) !important;
      text-align: left !important;
    }

    #about.about--glowfield .about-intro-card > p{
      margin: 0 !important;
      color: rgba(42, 18, 56, 0.78) !important;
      letter-spacing: 0.002em !important;
      line-height: 1.8 !important;
      font-size: clamp(1.1rem, 1vw, 1.35rem) !important;
    }
    #about.about--glowfield .about-intro-card > p + p{ margin-top: 1.05rem !important; }

    /* Make the opening hook bigger (magazine lead) */
    #about.about--glowfield .about-intro-card > p:first-child{
      font-size: clamp(1.35rem, 1.35vw, 1.85rem) !important;
      line-height: 1.25 !important;
      color: rgba(42, 18, 56, 0.92) !important;
      letter-spacing: 0.001em !important;
    }

    /* Desktop bump so body never feels tiny */
    @media (min-width: 992px){
      #about.about--glowfield .about-intro-card > p{
        font-size: clamp(1.25rem, 1.05vw, 1.55rem) !important;
      }
      #about.about--glowfield .about-intro-card > p:first-child{
        font-size: clamp(1.6rem, 1.55vw, 2.15rem) !important;
      }
    }

    /* Mobile: soft card behind whole text column */
    @media (max-width: 991.98px){
      #about.about--glowfield .col-lg-6[data-aos="fade-left"] .content{
        padding: 1.25rem 1.1rem !important;
        border-radius: 22px !important;
        background:
          radial-gradient(120% 120% at 50% 35%,
            rgba(254,254,254,0.96) 0%,
            rgba(254,254,254,0.92) 40%,
            rgba(255,245,235,0.88) 70%,
            rgba(255,245,235,0.82) 100%) !important;
        border: 1px solid rgba(255,255,255,0.55) !important;
        box-shadow:
          0 18px 44px rgba(35, 22, 44, 0.14),
          0 6px 16px rgba(35, 22, 44, 0.08) !important;
        backdrop-filter: blur(10px) saturate(1.08) !important;
        -webkit-backdrop-filter: blur(10px) saturate(1.08) !important;
        margin-top: 1.1rem !important;
      }
    }

    /* =========================================================
       CTA — Shimmer (reused)
    ========================================================= */
    @property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
    @keyframes spin { to { --spin: 360deg; } }
    @keyframes shinePulse { 0%{opacity:0} 15%{opacity:1} 60%{opacity:1} 100%{opacity:0} }

    #about .about-cta{
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 1.6rem;
    }

    #about .btn-shimmer{
      --pill-radius: 999px !important;
      --ring: 6px !important;

      --btn-base: #2A1238;
      --btn-base-2: #3D1D4C;
      --btn-text: #E7D7F7;
      --btn-glow: #E378A8;

      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;

      padding: .85em 1.8em;
      border-radius: var(--pill-radius) !important;
      text-decoration: none;

      font-family: var(--nav-font);
      font-weight: 600;

      isolation: isolate;
      overflow: hidden;
      background-clip: padding-box;

      background-image: linear-gradient(
        135deg,
        color-mix(in srgb, var(--btn-base), #000 6%) 0%,
        var(--btn-base-2) 55%,
        color-mix(in srgb, var(--btn-base), #000 14%) 100%
      );

      border: 1px solid color-mix(in srgb, var(--btn-glow), #fff 70%);

      box-shadow:
        0 10px 26px rgba(18, 10, 30, 0.22),
        0 2px 6px rgba(18, 10, 30, 0.14),
        inset 0 -12px 22px rgba(0,0,0,0.22),
        inset 0 1px 0 rgba(255,255,255,0.14);

      transform: translateY(0) scale(1);
      transition: transform .55s cubic-bezier(.2,.9,.2,1),
                  box-shadow .55s cubic-bezier(.2,.9,.2,1);
    }

    @media (hover:hover){
      #about .btn-shimmer:hover:not(:active){
        transform: translateY(-2px) scale(1.06);
        box-shadow:
          0 16px 34px rgba(18, 10, 30, 0.26),
          0 5px 14px rgba(18, 10, 30, 0.16),
          inset 0 0 0 transparent,
          inset 0 1px 0 rgba(255,255,255,0.18);
      }
    }

    #about .btn-shimmer .btn-text{
      position: relative;
      z-index: 3;
      color: var(--btn-text, #E7D7F7) !important;
      text-shadow: 0 1px 8px rgba(0,0,0,0.28);
    }

    #about .btn-shimmer .btn-shimmer-ring{
      position: absolute;
      inset: 0;
      border-radius: var(--pill-radius) !important;
      pointer-events: none;
      z-index: 2;

      padding: var(--ring);

      background: conic-gradient(
        from var(--spin),
        transparent 0%,
        transparent 34%,
        rgba(248, 181, 210, 0.00) 39%,
        rgba(248, 181, 210, 0.80) 42%,
        rgba(227, 120, 168, 0.72) 45%,
        rgba(248, 181, 210, 0.00) 48%,
        transparent 54%,
        transparent 100%
      );

      mix-blend-mode: plus-lighter;
      opacity: 0;
      animation: spin 1s linear infinite;

      -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;

      mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
      mask-composite: exclude;
    }

    @media (hover:hover){
      #about .btn-shimmer:hover .btn-shimmer-ring{ opacity: 1; }
    }

    @media (prefers-reduced-motion: reduce){
      #about .btn-shimmer .btn-shimmer-ring{ animation: none !important; }
    }

    /* =========================================================
       FEATURES — FULL-WIDTH HORIZONTAL RAIL (bottom)
       This is the fix for the stacking screenshot.
    ========================================================= */

    #about.about--glowfield .features-list{
      margin-top: 2.25rem !important;
    }

    /* Grid rail on desktop, scroll rail on small */
    #about.about--glowfield .features-rail{
      display: grid !important;
      gap: 1.1rem !important;
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      align-items: stretch !important;
    }

    @media (max-width: 1199.98px){
      #about.about--glowfield .features-rail{
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }
    }

    @media (max-width: 767.98px){
      /* On phones: make it a horizontal swipe rail */
      #about.about--glowfield .features-rail{
        display: grid !important;
        grid-auto-flow: column !important;
        grid-auto-columns: minmax(78%, 1fr) !important;
        grid-template-columns: unset !important;
        overflow-x: auto !important;
        padding-bottom: .5rem !important;
        scroll-snap-type: x mandatory !important;
      }
      #about.about--glowfield .feature-rail-item{
        scroll-snap-align: start !important;
      }
    }

    /* Feature card styling (warm glass) */
    #about.about--glowfield .feature-item{
      height: 100% !important;
      display: flex !important;
      flex-direction: column !important;
      padding: 1.25rem 1.2rem !important;
      border-radius: 20px !important;

      background:
        radial-gradient(140% 120% at 30% 15%,
          rgba(255,255,255,0.92) 0%,
          rgba(255,255,255,0.86) 38%,
          rgba(255,245,238,0.80) 70%,
          rgba(255,240,230,0.76) 100%) !important;

      border: 1px solid rgba(255,255,255,0.55) !important;

      box-shadow:
        0 18px 40px rgba(24, 14, 36, 0.12),
        0 7px 16px rgba(24, 14, 36, 0.08),
        inset 0 1px 0 rgba(255,255,255,0.55) !important;

      backdrop-filter: blur(10px) saturate(1.08) !important;
      -webkit-backdrop-filter: blur(10px) saturate(1.08) !important;
    }

    #about.about--glowfield .feature-item i{
      font-size: 1.5rem !important;
      opacity: .9 !important;
      margin-bottom: .65rem !important;
    }

    #about.about--glowfield .feature-item h5{
      margin: 0 0 .5rem !important;
    }

    #about.about--glowfield .feature-item p{
      margin: 0 !important;
      color: rgba(42, 18, 56, 0.74) !important;
      line-height: 1.6 !important;
    }

    /* Buttons line up: CTA pinned to bottom */
    #about.about--glowfield .feature-cta{
      margin-top: auto !important;
      padding-top: 1rem !important;
      display: flex !important;
      justify-content: center !important;
    }

    /* =========================================================
       Glow Field Background (section)
    ========================================================= */
    #about.about--glowfield{
      position: relative;
      overflow: hidden;
      --gx: 0px;
      --gy: 0px;
    }

    #about.about--glowfield::before{
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;

      background-image:
        radial-gradient(
          circle at calc(50% + var(--gx)) calc(72% + var(--gy)),
          rgba(255, 240, 200, 0.55) 0%,
          rgba(255, 210, 140, 0.40) 18%,
          rgba(255, 170, 110, 0.28) 34%,
          rgba(255, 140, 90, 0.16) 55%,
          rgba(255, 120, 75, 0.05) 72%,
          rgba(255, 120, 75, 0) 100%
        ),
        radial-gradient(
          70% 60% at calc(22% + (var(--gx) * -0.4)) calc(20% + (var(--gy) * -0.2)),
          rgba(255, 220, 205, 0.22) 0%,
          rgba(255, 220, 205, 0.00) 70%
        ),
        radial-gradient(
          80% 70% at calc(78% + (var(--gx) * 0.25)) calc(26% + (var(--gy) * -0.15)),
          rgba(255, 205, 165, 0.18) 0%,
          rgba(255, 205, 165, 0.00) 72%
        ),
        radial-gradient(
          85% 90% at calc(86% + (var(--gx) * 0.15)) calc(86% + (var(--gy) * 0.20)),
          rgba(255, 155, 120, 0.12) 0%,
          rgba(255, 155, 120, 0.00) 70%
        );
    }

    #about.about--glowfield > .container{
      position: relative;
      z-index: 1;
    }

    /* Desktop: let the intro card use the full column width */
@media (min-width: 992px){
  #about.about--glowfield .about-intro-card{
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* =========================================================
   ABOUT — Slight bump: lead line + 2nd paragraph only
========================================================= */

/* Base paragraphs: tiny lift (optional, keeps overall rhythm) */
#about.about--glowfield .about-intro-card > p{
  font-size: clamp(1.15rem, 1.05vw, 1.45rem) !important;
}

/* 1) Opening hook: a little larger */
#about.about--glowfield .about-intro-card > p:first-child{
  font-size: clamp(1.75rem, 1.65vw, 2.3rem) !important;
  line-height: 1.22 !important;
}

/* 2) Second paragraph only: slightly larger than body */
#about.about--glowfield .about-intro-card > p + p{
  font-size: clamp(1.25rem, 1.15vw, 1.6rem) !important;
  line-height: 1.75 !important;
}

    .text-drop__copy{
  display: flex;
  flex-direction: column;
  gap: 0.2rem !important;
}

.text-drop__line{
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  line-height: 1.2 !important;
}