/* about.css — Our story, in Aurora Glass. Photos sit in frosted frames with a
   gentle tilt, like prints pinned up in the workshop; the words do the rest. */

.ab main{padding-bottom:var(--s-7);overflow-x:clip}

/* ---- hero ---- */
.ab-hero{display:grid;gap:clamp(24px,4vw,56px);align-items:center;padding-top:clamp(16px,4vw,48px);padding-bottom:clamp(24px,5vw,56px)}
@media (min-width:900px){.ab-hero{grid-template-columns:1.05fr .95fr}}
.ab-title{margin:0 0 18px;font:800 var(--fs-h1)/var(--lh-tight) var(--font-display);letter-spacing:-.02em;text-wrap:balance}
.ab-glow{background:var(--grad-aurora);-webkit-background-clip:text;background-clip:text;color:transparent}
.ab-lead{max-width:34ch;margin:0;font:500 clamp(19px,2.2vw,23px)/1.5 var(--font-body);color:var(--mist);text-wrap:pretty}
.ab-sign{margin:22px 0 0;font:700 13.5px/1.5 var(--font-body);letter-spacing:.02em;color:var(--dim)}

/* ---- photos ---- */
.ab-photo{
  position:relative;margin:0;padding:10px 10px 0;border-radius:26px;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.05));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),var(--glass-hi),var(--shadow-hi);
}
.ab-photo img{display:block;width:100%;height:auto;border-radius:18px;background:var(--fjord)}
.ab-photo figcaption{padding:12px 6px 14px;font:700 14.5px/1.35 var(--font-display);color:var(--snow);text-align:center}
.ab-photo--hero{max-width:560px;justify-self:center;transform:rotate(1.6deg)}
.ab-photo--hero::before{
  content:"";position:absolute;inset:-14% -10%;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(92,242,176,.28),rgba(79,216,240,.12) 55%,transparent);filter:blur(10px)
}
.ab-photo--tilt-r{transform:rotate(1.8deg)}
.ab-photo--tilt-l{transform:rotate(-1.8deg)}

/* drift up into place as they scroll in */
.ab-reveal{opacity:0;translate:0 26px;transition:opacity .7s var(--ease-out),translate .8s var(--ease-out)}
.ab-reveal.is-in{opacity:1;translate:0 0}
:root[data-calm] .ab-reveal{opacity:1;translate:none;transition:none}
@media (prefers-reduced-motion:reduce){.ab-reveal{opacity:1;translate:none;transition:none}}

/* ---- the chapters ---- */
.ab-story{display:grid;gap:clamp(48px,8vw,96px);padding-top:clamp(16px,3vw,32px)}
.ab-chapter{display:grid;gap:28px;align-items:center}
@media (min-width:900px){
  .ab-chapter{grid-template-columns:1.1fr .9fr;gap:64px}
  .ab-chapter--flip .ab-chapter__text{order:2}
}
.ab-chapter .ab-photo{max-width:460px;width:100%;justify-self:center}
.ab-chapter__text{max-width:58ch}
.ab-chapter .ab-chapter__n{
  display:grid;place-items:center;width:40px;height:40px;margin:0 0 14px;border-radius:13px;
  font:800 18px/1 var(--font-display);color:var(--ink);background:var(--grad-aurora);letter-spacing:0;
  box-shadow:0 10px 24px -10px rgba(92,242,176,.7)
}
.ab-chapter h2{margin:0 0 14px;font:800 var(--fs-h2)/1.1 var(--font-display);letter-spacing:-.015em}
.ab-chapter p{margin:0 0 14px;font:500 17.5px/1.7 var(--font-body);color:#C9D5EA}
.ab-chapter p em{font-style:normal;color:var(--snow);font-weight:800}

.ab-quote{
  margin:26px 0 0;padding:20px 24px;border-radius:20px;
  font:700 clamp(21px,2.4vw,27px)/1.35 var(--font-display);color:var(--snow);
  background:rgba(255,255,255,.05);box-shadow:inset 3px 0 0 var(--mint),inset 0 0 0 1px rgba(255,255,255,.08)
}
.ab-quote em{font-style:normal;color:var(--mint)}
.ab-quote cite{display:block;margin-top:10px;font:700 13.5px/1.3 var(--font-body);font-style:normal;color:var(--dim)}

/* ---- the promise ---- */
.ab-promise{padding:clamp(24px,4vw,44px);text-align:center;justify-items:center;display:grid}
.ab-promise__big{max-width:22ch;margin:6px 0 24px;font:800 clamp(28px,4.2vw,48px)/1.15 var(--font-display);letter-spacing:-.015em;text-wrap:balance}
.ab-promise__big em{font-style:normal;background:var(--grad-aurora);-webkit-background-clip:text;background-clip:text;color:transparent}
.ab-promise__list{display:grid;gap:12px;margin:0;padding:0;list-style:none;text-align:left}
.ab-promise__list li{display:flex;align-items:center;gap:14px;font:600 16.5px/1.45 var(--font-body)}
.ab-promise__list span{
  display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;
  font:800 14px/1 var(--font-display);color:var(--c);box-shadow:inset 0 0 0 2px var(--c)
}

.ab-thanks{margin-top:24px !important;font:600 17px/1.5 var(--font-body) !important}
.ab-thanks strong{font:800 22px/1.3 var(--font-display);color:var(--snow)}
.ab-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}

.ab-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding-top:28px;padding-bottom:calc(32px + var(--sab));border-top:1px solid rgba(255,255,255,.07);font:600 13.5px/1.5 var(--font-body);color:var(--dim)}
.ab-foot p{margin:0}

.ab-hero__copy{position:relative;z-index:1}