/* ─────────────────────────────────────────────────────────
   22. ABOUT PAGE SPECIFIC (.about-page)
───────────────────────────────────────────────────────── */

.about-page    { background: radial-gradient(circle at top right, rgba(255,252,247,0.95), rgba(247,243,238,0.98) 42%, rgba(240,233,224,1) 100%); min-height: 100vh; }
.about-section { padding-top: 120px; }

.about-hero          { position: relative; overflow: clip; padding: calc(var(--nav-height, 72px) + clamp(3.5rem, 8vw, 6rem)) 0 clamp(4rem, 10vw, 8rem); }
.about-hero__texture { position: absolute; inset: 0; background-image: linear-gradient(rgba(184,151,90,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(184,151,90,0.06) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(circle at center, #000 18%, transparent 82%); opacity: 0.42; pointer-events: none; }
.about-hero__inner   { position: relative; z-index: 1; width: min(100% - 2rem, 1140px); margin: 0 auto; display: grid; grid-template-columns: minmax(42px, 84px) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: start; }
.about-hero__rail    { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; padding-top: 0.5rem; }
.about-hero__rail::after { content: ''; width: 1px; min-height: clamp(5rem, 12vw, 8rem); background: linear-gradient(to bottom, rgba(184,151,90,0.8), transparent); }
.about-hero__rail-label { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--font-body); font-size: 0.625rem; font-weight: 400; letter-spacing: 0.42em; text-transform: uppercase; color: rgba(184,151,90,0.9); }
.about-hero__content { display: grid; gap: clamp(2rem, 5vw, 3rem); }
.about-hero__heading { max-width: 52rem; }
.about-hero__eyebrow { margin: 0 0 0.875rem; font-family: var(--font-body); font-size: 0.72rem; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(184,151,90,0.9); }
.about-hero__title   { margin: 0; display: grid; gap: 0.3rem; font-family: var(--font-heading); font-size: clamp(2.5rem, 6vw, 4.75rem); font-weight: 300; line-height: 0.98; color: #171614; }
.about-hero__title strong { font-weight: 500; letter-spacing: 0.02em; }
.about-hero__title span   { display: block; color: rgba(184,151,90,0.95); font-style: italic; }
.about-hero__copy    { width: min(100%, 42rem); display: grid; gap: 1.2rem; }
.about-hero__copy p  { margin: 0; font-family: var(--font-body); font-size: clamp(0.96rem, 1.3vw, 1.02rem); font-weight: 300; line-height: 1.88; color: rgba(34,31,28,0.84); text-wrap: pretty; }
.about-hero__quote   { padding-top: 0.6rem; font-family: var(--font-heading) !important; font-size: clamp(1.2rem, 2vw, 1.5rem) !important; font-style: italic; line-height: 1.45 !important; color: #171614 !important; }


/* ========================================
   MOBILE
======================================== */

@media (max-width: 768px) {

  .about-hero {
    padding:
      calc(var(--nav-height, 72px) + 2.5rem)
      0
      6rem;
  }

  .about-hero__inner {
    width: min(100% - 1.5rem, 1140px);
    grid-template-columns: 1fr;
  }

  .about-hero__rail  {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.9rem;
    padding-top: 0;
  }

  .about-hero__rail::after {
    width: clamp(3rem, 18vw, 5rem);
    min-height: 1px;

    background: linear-gradient(
      to right,
      rgba(184,151,90,0.8),
      transparent
    );
  }

  .about-hero__rail-label {
    writing-mode: initial;
    transform: none;
  }

  .about-hero__title {
    font-size: clamp(2.3rem, 10vw, 4rem);
  }

  .about-hero__copy {
    width: 100%;
  }

  .about-hero__copy p {
    font-size: 0.96rem;
    line-height: 1.9;
  }

  .about-hero__quote {
    margin-top: 1rem;
  }

}