/* Team Saint — about page.
   Tokens, page chrome (header, hero, footer) and pills are shared: see site.css,
   which must be loaded before this file. */

/* ---------- Reveal on scroll ----------
   about.js adds .reveal only to elements that start below the fold, so nothing flashes on load
   and the page stays fully visible without JavaScript. Declared first so component rules
   (e.g. .pillar) can extend the transition list. */

[data-reveal] {
  transition:
    opacity .9s var(--ease) var(--rd, 0s),
    translate .9s var(--ease) var(--rd, 0s);
}

[data-reveal].reveal { opacity: 0; translate: 0 22px; }
[data-reveal].reveal.is-visible { opacity: 1; translate: 0 0; }

/* ---------- Layout ---------- */

.section,
.cta {
  max-width: 1320px;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.section { padding-top: clamp(44px, 7vw, 88px); }

.section-head {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: clamp(24px, 3.4vw, 40px);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.section-head::after,
.cta-inner::before {
  content: "";
  position: absolute;
  left: 0;
  width: 64px;
  height: 1px;
  background: linear-gradient(90deg, var(--signal), var(--blue));
  box-shadow: 0 0 10px rgba(115, 144, 255, .5);
}

.section-head::after { bottom: -1px; }

.section-index { font: 500 10px var(--mono); letter-spacing: .2em; color: var(--signal); }
.section-title { margin: 0; font: 400 clamp(20px, 2.4vw, 28px) / 1.1 var(--serif); letter-spacing: .2em; text-transform: uppercase; }

/* ---------- Who we are ---------- */

.manifesto {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
}

.manifesto-lead {
  margin: 0;
  font: 400 clamp(24px, 3.1vw, 40px) / 1.32 var(--serif);
  letter-spacing: .005em;
  text-wrap: balance;
}

.manifesto-lead em { font-style: normal; color: var(--accent); }

.manifesto-body {
  --rd: .1s;
  display: grid;
  gap: 20px;
  padding-left: clamp(20px, 3vw, 40px);
  border-left: 1px solid var(--line);
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.8;
}

.manifesto-body p { margin: 0; }

/* ---------- What we stand for ---------- */

.pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pillar {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(22px, 2.4vw, 32px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
  transition:
    opacity .9s var(--ease) var(--rd, 0s),
    translate .9s var(--ease) var(--rd, 0s),
    transform .35s var(--ease),
    border-color .35s,
    box-shadow .35s;
}

.pillar:nth-child(2) { --rd: .09s; }
.pillar:nth-child(3) { --rd: .18s; }

.pillar::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), rgba(155, 136, 255, .18), transparent 65%);
  transition: opacity .4s;
}

.pillar > * { position: relative; }

.pillar:hover {
  transform: translateY(-4px);
  border-color: rgba(216, 198, 232, .5);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55), 0 0 34px rgba(143, 125, 255, .14);
}

.pillar:hover::before { opacity: 1; }

.pillar-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 14px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: rgba(255, 255, 255, .04);
  color: var(--accent);
  transition: background .3s, border-color .3s, color .3s;
}

.pillar:hover .pillar-icon { background: var(--accent); border-color: var(--accent); color: #0b0710; }

.pillar-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pillar h3 { margin: 0; font: 400 clamp(17px, 1.6vw, 20px) / 1.25 var(--serif); letter-spacing: .14em; text-transform: uppercase; }
.pillar p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.75; }

/* ---------- Team expectations ---------- */

.expect {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  padding: clamp(26px, 4.4vw, 56px);
  border: 1px solid rgba(155, 136, 255, .32);
  border-radius: 22px;
  background: linear-gradient(110deg, rgba(155, 136, 255, .12), rgba(97, 186, 255, .05) 55%, rgba(255, 255, 255, .01));
}

.expect-list { margin: 0; padding: 0; list-style: none; }

.expect-list li {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: clamp(14px, 1.8vw, 20px) 0;
  border-top: 1px solid var(--line);
  font: 400 clamp(22px, 3vw, 38px) / 1.1 var(--serif);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.expect-list li:first-child { padding-top: 0; border-top: 0; }
.expect-list li:last-child { padding-bottom: 0; }
.expect-list .signal-dot { width: 7px; height: 7px; }

.expect-copy { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.8; }

/* ---------- Call to action ---------- */

.cta { padding-top: clamp(56px, 9vw, 112px); padding-bottom: clamp(64px, 10vw, 128px); }

.cta-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding-top: clamp(32px, 5vw, 56px);
  border-top: 1px solid var(--line);
}

.cta-inner::before { top: -1px; }

.cta h2 {
  margin: 6px 0 0;
  max-width: 18ch;
  font: 400 clamp(30px, 5.4vw, 68px) / 1.08 var(--serif);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-wrap: balance;
}

.cta-copy { margin: 0; max-width: 52ch; color: var(--muted); font-size: 16px; line-height: 1.7; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.pill-lg { height: 46px; padding: 0 24px; font-size: 10.5px; }
.cta-note { margin: 18px 0 0; max-width: 64ch; color: var(--dim); font-size: 12.5px; line-height: 1.7; }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .manifesto,
  .expect { grid-template-columns: 1fr; }

  .manifesto-body { padding-left: 0; border-left: 0; }
  .pillars { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .section-head { gap: 12px; }
  .section-title { letter-spacing: .14em; }
  .expect-list li { gap: 14px; letter-spacing: .06em; }
  .cta h2 { letter-spacing: .08em; }
  .cta-actions { width: 100%; }
  .cta-actions .pill { flex: 1 1 auto; }
}