/* ============================================================
   ABOUT BAND
   Sits in the same family as the pricing hero and the Why Santa band:
   deep forest gradient, drifting snow, aurora wash, gold hairline rule
   over an eyebrow and a display headline.
   ============================================================ */

.about-band {
  position: relative; overflow: hidden;
  padding: 112px 0 104px;
  background:
    radial-gradient(ellipse at 16% 8%, rgba(198,160,72,0.13), transparent 34%),
    radial-gradient(ellipse at 86% 12%, rgba(77,148,153,0.16), transparent 36%),
    linear-gradient(160deg, #0d211c 0%, var(--forest-900) 46%, #07120f 100%);
}
/* Same faint starfield texture the credentials band uses, so the two read
   as one night rather than two different skies. */
.about-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image:
    radial-gradient(circle at 11% 21%, rgba(240,248,245,0.6) 0 1px, transparent 1.7px),
    radial-gradient(circle at 27% 12%, rgba(240,248,245,0.45) 0 1px, transparent 1.6px),
    radial-gradient(circle at 44% 26%, rgba(240,248,245,0.5) 0 1px, transparent 1.6px),
    radial-gradient(circle at 63% 9%, rgba(240,248,245,0.4) 0 1px, transparent 1.5px),
    radial-gradient(circle at 78% 24%, rgba(240,248,245,0.55) 0 1px, transparent 1.7px),
    radial-gradient(circle at 91% 15%, rgba(240,248,245,0.42) 0 1px, transparent 1.5px);
}
.about-band .snow-canvas { z-index: 1; }
.about-wrap { position: relative; z-index: 3; }


.about-aurora {
  position: absolute; inset: -20% -10% auto -10%; height: 62%; z-index: 0;
  pointer-events: none; opacity: 0.5; filter: blur(46px);
  background:
    radial-gradient(ellipse at 30% 40%, rgba(77,148,153,0.4), transparent 60%),
    radial-gradient(ellipse at 68% 30%, rgba(47,138,87,0.34), transparent 62%);
}

/* ---- Heading ---- */
.about-head { max-width: 760px; }
.about-head .so-rule { width: 120px; margin-bottom: 20px; }
.about-head .so-eyebrow { display: block; margin-bottom: 16px; color: var(--gold-200); letter-spacing: 0.28em; }
.about-head h2 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(30px, 3.9vw, 50px); line-height: 1.06; letter-spacing: -0.015em;
  margin: 0; color: var(--cream); text-wrap: pretty;
}

/* ---- Copy beside the portrait ---- */
.about-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: 56px; align-items: start; margin-top: 40px;
}
.about-copy p {
  font-size: 17px; line-height: 1.72; color: var(--ink-soft);
  margin: 0 0 18px; max-width: 62ch; text-wrap: pretty;
}
.about-copy p:last-of-type { margin-bottom: 0; }
.about-belief {
  margin-top: 26px; padding: 20px 24px;
  border-left: 2px solid var(--gold); border-radius: 0 10px 10px 0;
  background: linear-gradient(90deg, rgba(200,162,74,0.12), rgba(200,162,74,0.02));
}
.about-belief em {
  font-family: var(--display); font-style: italic; font-size: 20px;
  line-height: 1.5; color: var(--cream);
}
.about-sig {
  font-family: var(--display); font-size: 27px; color: var(--gold-200);
  margin-top: 26px;
}
.about-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

/* .so-btn-ink is built for light sections: ink-coloured text on an ink
   hairline. On this band that made "See Packages & Pricing" almost invisible.
   Restated here in the band's own palette rather than changed globally, since
   the only other use of the class sits on the cream gallery section where the
   original treatment is correct. */
.about-ctas .so-btn-ink {
  color: var(--cream);
  border-color: rgba(240,212,154,0.5);
  background: rgba(246,239,223,0.06);
}
@media (hover: hover) and (pointer: fine) {
  .about-ctas .so-btn-ink:hover {
    color: #fff6ea;
    border-color: var(--gold-200);
    background: rgba(240,212,154,0.16);
  }
}
.about-ctas .so-btn-ink:active { color: var(--gold-200); border-color: var(--gold-200); }

/* Portrait: the one photograph on the section. */
.about-portrait { position: relative; }
.about-portrait img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 4;
  object-fit: cover; border-radius: 14px;
  border: 1px solid rgba(240,212,154,0.34);
  box-shadow: 0 30px 60px -28px rgba(0,0,0,0.85);
}
.about-portrait figcaption {
  margin-top: 12px; font-size: 13px; color: var(--muted); text-align: center;
}

@media (max-width: 980px) {
  .about-grid { grid-template-columns: 1fr; gap: 34px; }
  .about-portrait { max-width: 420px; }
}
@media (max-width: 620px) {
  .about-band { padding: 82px 0 76px; }
}