/* ============================================================
 * about-feature section
 * Rendered from resources/views/components/sections/about-feature.blade.php
 * ============================================================ */

/* Section container — establishes the stacking context for the decorative oud. */
          .af-story {
            position: relative;
            isolation: isolate;
            overflow: hidden;
          }
          /* High-contrast copy for the about-story section. The default
             `text-parchment-200/85` classes were resolving to low-contrast grey
             on the white background — these overrides restore a solid dark
             ink colour with a comfortable reading size. */
          .af-story__h {
            color: #171311;
            letter-spacing: -0.01em;
          }
          .af-story__body {
            color: #171311;
            font-size: 1.075rem;
            line-height: 1.72;
          }
          @media (min-width: 48rem) {
            .af-story__body {
              font-size: 1.125rem;
              line-height: 1.75;
            }
          }
          .af-story__body p { color: #171311; opacity: 1; }
          .af-story__sig {
            color: #4A2E1F;
            font-size: 1.15rem;
          }
          @media (min-width: 48rem) {
            .af-story__sig { font-size: 1.25rem; }
          }

          /* Decorative oud silhouette — kept very subtle so the body copy
             remains fully readable. It sits behind the type as a light brass
             wash, not a foreground image. */
          .af-oud {
            position: absolute;
            right: -4rem;
            top: 50%;
            bottom: auto;
            width: 16rem;
            height: auto;
            opacity: 0.14;
            transform: translateY(-50%) rotate(-8deg);
            filter: sepia(1) saturate(1.2) hue-rotate(-12deg) brightness(0.9);
            mix-blend-mode: normal;
            pointer-events: none;
            z-index: 0;
            user-select: none;
          }
          @media (min-width: 56rem) {
            .af-oud {
              right: -2rem;
              width: 20rem;
              opacity: 0.13;
            }
          }
          @media (min-width: 80rem) {
            .af-oud {
              right: 1rem;
              width: 24rem;
              opacity: 0.13;
            }
          }
          @media (max-width: 40rem) {
            .af-oud {
              right: -3rem;
              top: auto;
              bottom: 1rem;
              width: 10rem;
              opacity: 0.18;
              transform: rotate(-8deg);
            }
          }

          /* Founder photo — matted, tilted, layered shadow for a 3D depth feel. */
          .af-photo {
            margin: 0;
            perspective: 1400px;
          }
          .af-photo__stage {
            position: relative;
            transform-style: preserve-3d;
            transform: rotateY(-4deg) rotateX(2deg);
            transition: transform 500ms cubic-bezier(0.2, 0.7, 0.2, 1);
          }
          .af-photo__frame {
            position: relative;
            padding: 14px 14px 32px;
            background: linear-gradient(180deg, #FFFDFC 0%, #F7F1E8 100%);
            border-radius: 10px;
            box-shadow:
              /* small crisp edge shadow */
              0 1px 2px rgba(23, 19, 17, 0.08),
              /* mid-distance body shadow */
              0 20px 40px -18px rgba(23, 19, 17, 0.35),
              /* soft warm ambient shadow far below */
              0 55px 80px -50px rgba(74, 46, 31, 0.45),
              /* inner top highlight for a subtle glass edge */
              inset 0 1px 0 rgba(255, 253, 252, 0.9);
            transform: translateZ(0);
            transition: box-shadow 500ms cubic-bezier(0.2, 0.7, 0.2, 1);
          }
          .af-photo__img {
            display: block;
            width: 100%;
            height: auto;
            border-radius: 4px;
            box-shadow:
              0 1px 0 rgba(23, 19, 17, 0.08),
              inset 0 0 0 1px rgba(23, 19, 17, 0.06);
          }
          /* Warm glow puddle beneath the photo — sells the "3D floating" feel. */
          .af-photo__glow {
            position: absolute;
            left: 6%;
            right: 6%;
            bottom: -22px;
            height: 28px;
            border-radius: 999px;
            background: radial-gradient(ellipse at center, rgba(74, 46, 31, 0.35) 0%, transparent 70%);
            filter: blur(10px);
            pointer-events: none;
            z-index: -1;
            transform: translateZ(-20px);
          }
          .af-photo__caption {
            margin: 2.25rem 0 0;
            font-family: var(--font-body-stack, 'Inter', system-ui, sans-serif);
            font-size: 0.82rem;
            line-height: 1.5;
            color: #5F564F;
            padding-left: 14px;
          }
          .af-photo:hover .af-photo__stage,
          .af-photo:focus-within .af-photo__stage {
            transform: rotateY(-2deg) rotateX(1deg) translateY(-4px);
          }
          .af-photo:hover .af-photo__frame,
          .af-photo:focus-within .af-photo__frame {
            box-shadow:
              0 1px 2px rgba(23, 19, 17, 0.08),
              0 30px 55px -22px rgba(23, 19, 17, 0.42),
              0 70px 100px -55px rgba(74, 46, 31, 0.55),
              inset 0 1px 0 rgba(255, 253, 252, 0.9);
          }

          @media (prefers-reduced-motion: reduce) {
            .af-photo__stage,
            .af-photo__frame,
            .af-photo:hover .af-photo__stage {
              transform: none !important;
              transition: none !important;
            }
          }

          .af-links {
            list-style: none;
            margin: 2.5rem 0 0;
            padding: 1.5rem 0 0;
            border-top: 1px solid #DED4C8;
            display: grid;
            gap: 0.75rem;
          }
          @media (min-width: 40rem) { .af-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; } }
          .af-link {
            display: flex;
            flex-direction: column;
            gap: 0.35rem;
            padding: 1rem 1.2rem;
            background: #FFFDFC;
            border: 1px solid #DED4C8;
            border-radius: 14px;
            text-decoration: none;
            color: #171311;
            transition: background-color 200ms ease, border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
          }
          .af-link:hover, .af-link:focus-visible {
            background: #4A2E1F;
            border-color: #4A2E1F;
            color: #FFFDFC;
            transform: translateY(-2px);
            box-shadow: 0 10px 22px -14px rgba(74, 46, 31, 0.5);
            outline: none;
          }
          .af-link:focus-visible {
            box-shadow:
              0 0 0 3px rgba(182, 138, 69, 0.35),
              0 10px 22px -14px rgba(74, 46, 31, 0.5);
          }
          .af-link__label {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            font-family: var(--font-body-stack, 'Inter', system-ui, sans-serif);
            font-size: 0.92rem;
            font-weight: 600;
            letter-spacing: 0.04em;
            text-transform: uppercase;
          }
          .af-link__arrow {
            color: #B68A45;
            transition: transform 200ms ease, color 200ms ease;
          }
          .af-link:hover .af-link__arrow, .af-link:focus-visible .af-link__arrow {
            color: #FFFDFC;
            transform: translateX(3px);
          }
          .af-link__detail {
            font-family: var(--font-body-stack, 'Inter', system-ui, sans-serif);
            font-size: 0.82rem;
            line-height: 1.5;
            color: #5F564F;
            transition: color 200ms ease;
          }
          .af-link:hover .af-link__detail, .af-link:focus-visible .af-link__detail {
            color: rgba(255, 253, 252, 0.8);
          }
          @media (prefers-reduced-motion: reduce) {
            .af-link, .af-link__arrow, .af-link__detail { transition: none !important; }
            .af-link:hover { transform: none; }
          }
        

      .af-quote {
        background: #FFFDFC;
        border-top: 1px solid #DED4C8;
        border-bottom: 1px solid #DED4C8;
        margin-top: clamp(3rem, 5vw, 4.5rem);
        padding-block: clamp(3.5rem, 6vw, 5.5rem);
        position: relative;
      }
      .af-quote__inner {
        max-width: 44rem;
        margin-inline: auto;
        padding-inline: clamp(1.25rem, 4vw, 2rem);
        text-align: center;
        position: relative;
      }
      .af-quote__rule {
        display: block;
        width: 3rem;
        height: 2px;
        background: #B68A45;
        margin: 0 auto 1.25rem;
        border-radius: 999px;
      }
      .af-quote__eyebrow {
        font-family: var(--font-body-stack, 'Inter', system-ui, sans-serif);
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.24em;
        text-transform: uppercase;
        color: #B68A45;
        margin: 0 0 1.5rem;
      }
      .af-quote__body {
        font-family: var(--font-display-stack, 'Marcellus', 'Playfair Display', Georgia, serif);
        font-style: italic;
        font-weight: 400;
        font-size: clamp(1.35rem, 2.4vw, 1.85rem);
        line-height: 1.35;
        color: #171311;
        margin: 0 0 1.15rem;
        max-width: 42rem;
        text-align: center;
      }
      .af-quote__caption {
        font-family: var(--font-body-stack, 'Inter', system-ui, sans-serif);
        font-size: 0.85rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: #5F564F;
      }