/* About page (/about) · boards AbHero, AbStory2, AbRules3, AbContact */

.pg-about .ab-eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#657185}

/* ---------- 1. Hero (AbHero) ---------- */
.ab-hero{position:relative;overflow:hidden;background:#fff;padding:clamp(120px,calc(210px - 6.25vw),146px) var(--gutter) clamp(72px,10.21vw,147px)}
@media (min-width:1440px){.ab-hero{min-height:560px}}
.ab-hero-wash{position:absolute;inset:0 0 auto;height:100%;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.ab-hero-in{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px}
.ab-eyebrow-dot{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#4e5a6b}
.ab-eyebrow-dot::before{content:"";width:5px;height:5px;border-radius:50%;background:#4e5a6b}
.ab-hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(40px,4.584vw,66px);line-height:1.06;letter-spacing:-.035em;color:#141922}
.ab-hero-lead{font-size:clamp(16.5px,1.32vw,19px);line-height:1.21;color:#4e5a6b}
.ab-hero-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:8px}

/* ---------- 2. What we're building (AbStory2) ---------- */
.ab-story{background:#fff;min-height:clamp(560px,48.612vw,700px);display:flex;align-items:center;padding:88px var(--gutter)}
.ab-story-grid{width:100%;max-width:1200px;margin-inline:auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,5.556vw,80px);align-items:center}
.ab-story-l{display:flex;flex-direction:column;gap:22px}
.ab-story h2{font-family:var(--serif);font-weight:400;font-size:clamp(34px,3.056vw,44px);line-height:1.08;letter-spacing:-.035em;color:#141922}
.ab-quote{margin:10px 0 0;border-radius:24px;padding:8px}
.ab-quote blockquote{margin:0;border-radius:18px;padding:24px 26px}
.ab-quote p{font-family:var(--serif);font-size:clamp(19px,1.528vw,22px);line-height:1.4;letter-spacing:-.01em;color:#141922}
.ab-story-r{display:flex;flex-direction:column;gap:18px;font-size:16.5px;line-height:1.7;color:#3d4a5c}

/* ---------- 3. Promises we keep (AbRules3) ---------- */
.ab-rules{background:#fff;padding:48px min(var(--gutter),64px)}
.ab-rules-frame{max-width:1312px;margin-inline:auto;min-height:724px;border-radius:30px;padding:9px;display:grid;grid-template-columns:clamp(320px,30.556vw,440px) 1fr;box-shadow:0 34px 64px -38px rgba(15,20,30,.6)}
.ab-rules-l{border-radius:22px;display:flex;flex-direction:column;justify-content:space-between;gap:40px;padding:48px clamp(32px,3.056vw,44px)}
.ab-rules-head{display:flex;flex-direction:column;gap:16px}
.ab-rules-l .ab-eyebrow{color:#4e5a6b}
.ab-rules h2{font-family:var(--serif);font-weight:400;font-size:clamp(42px,3.889vw,56px);line-height:1.08;letter-spacing:-.035em;color:#141922}
.ab-rules-lead{font-size:16px;line-height:1.6;color:#3d4a5c}
.ab-rules-note{font-size:12px;line-height:1.21;color:#4e5a6b}
.ab-rules-note a{color:inherit;text-decoration:none;padding:16px 4px;margin:0 -4px}
.ab-rules-note a:hover{text-decoration:underline;text-underline-offset:2px}
.ab-rules-list{list-style:none;margin:0;display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(32px,3.889vw,56px);align-content:center;padding:24px clamp(32px,4.445vw,64px)}
.ab-rules-list li{display:flex;flex-direction:column;gap:10px;padding:26px 0;border-top:1px solid rgba(255,255,255,.12)}
.ab-num{align-self:flex-start;font-family:var(--ui);font-size:12px;line-height:1.21;color:#c9d1dc;padding:4px 10px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.ab-rules-list h3{font-weight:500;font-size:18px;line-height:1.21;color:#fff}
.ab-rules-list p{font-size:14.5px;line-height:1.55;color:#aab3c0}

/* ---------- 4. Contact (AbContact) ---------- */
.ab-contact{background:#fff;min-height:300px;padding:40px min(var(--gutter),64px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center}
.ab-contact h2{text-wrap:balance;font-family:var(--serif);font-weight:400;font-size:clamp(28px,2.5vw,36px);line-height:1.08;letter-spacing:-.035em;color:#141922}
.ab-mail{padding:12px 8px;margin:-12px -8px;font-size:18px;line-height:1.21;color:#141922;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:auto}
.ab-mail:hover{color:#3d4a5c}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .ab-rules-frame{min-height:0;grid-template-columns:1fr}
  .ab-rules-l{padding:44px 40px 36px;gap:28px}
  .ab-rules-l .ab-rules-head{max-width:560px}
  .ab-rules-list{padding:16px 40px 28px}
}
@media (max-width:900px){
  .ab-hero h1 br{display:none}
  .ab-hero-lead{line-height:1.5}
  .ab-story{min-height:0;padding:var(--sec-y) var(--gutter)}
  .ab-story-grid{grid-template-columns:1fr;gap:36px}
  .ab-rules{padding-block:24px}
  .ab-rules-frame{border-radius:26px;padding:8px}
  .ab-rules-l{border-radius:20px;padding:36px 28px 28px}
  .ab-rules-list{padding:12px 28px 18px}
  .ab-rules-list li:nth-child(-n+2){border-top:0}
  .ab-contact{min-height:0;padding-block:72px}
}
@media (max-width:700px){
  .ab-hero{padding-top:128px}
}
@media (max-width:640px){
  .ab-rules-list{grid-template-columns:1fr;padding:12px 20px 18px}
  .ab-rules-list li:nth-child(2){border-top:1px solid rgba(255,255,255,.12)}
  .ab-rules-l{padding:36px 22px 28px}
  .ab-rules-list p{font-size:15px}
  .ab-contact h2 br{display:none}
}
@media (max-width:480px){
  .ab-hero-btns .btn{flex:1 1 0;min-width:0}
  .ab-quote blockquote{padding:22px 22px}
  .ab-story-r{font-size:16px}
}