/* ==========================================================================
   Pax Family — About page styles
   Implementation of marketing_mocks/page-about.html from Claude Design.
   Loads after tokens.css. Everything scoped under .page.ab.
   ========================================================================== */

/* Page-frame override — warm cream */
.page.ab { background: #FBF5EA; }
.ab .topnav { padding-top: 28px; }

/* ===== HERO ===== */
.ab-hero {
    padding: 32px var(--page-gutter) 90px;
    text-align: center;
    position: relative;
}
.ab-hero::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 60px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1440' height='60' viewBox='0 0 1440 60' preserveAspectRatio='none'><path d='M0 30 Q 180 60 360 30 T 720 30 T 1080 30 T 1440 30 L 1440 60 L 0 60 Z' fill='%23ffffff'/></svg>") no-repeat center/cover;
}
.ab-hero .eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff; border: 1px solid #F4E4BC; color: #8A6A1F;
    font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 999px;
}
.ab-hero .eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: #C9A227; }
.ab-hero h1 {
    font-family: var(--font-display); font-size: 84px; font-weight: 800;
    letter-spacing: -0.04em; line-height: .96; color: #1b2a3a;
    margin: 22px auto 18px; max-width: 980px;
}
.ab-hero h1 em { font-style: italic; color: #66A367; font-weight: 800; }
.ab-hero p.sub {
    font-size: 20px; line-height: 1.55; color: #4a5568;
    max-width: 680px; margin: 0 auto;
}
.ab-hero p.sub em { font-style: italic; color: #1b2a3a; }

/* ===== INTRO TWO-COL ===== */
.ab-intro { padding: 90px var(--page-gutter); background: #fff; }
.ab-intro .wrap {
    max-width: 1100px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 64px; align-items: start;
}
.ab-intro .col h2 {
    font-family: var(--font-display); font-size: 38px; font-weight: 800;
    letter-spacing: -0.025em; line-height: 1.1; color: #1b2a3a;
    margin: 0 0 18px;
}
.ab-intro .col h2 em { font-style: italic; color: #66A367; }
.ab-intro .col p {
    font-size: 17px; line-height: 1.65; color: #4a5568; margin: 0 0 14px;
}
.ab-intro .col p strong { color: #1b2a3a; font-weight: 700; }
.ab-intro .col .tag {
    display: inline-flex; align-items: center; gap: 6px;
    background: #FDF4DC; color: #8A6A1F;
    font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    padding: 5px 12px; border-radius: 999px; margin-bottom: 14px;
}
.ab-intro .col:nth-child(2) .tag { background: #E8F1F9; color: #095FA1; }

/* ===== BELIEFS ===== */
.ab-bel {
    padding: 100px var(--page-gutter); background: #FBF5EA; position: relative;
}
.ab-bel::before {
    content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 60px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1440' height='60' viewBox='0 0 1440 60' preserveAspectRatio='none'><path d='M0 30 Q 180 0 360 30 T 720 30 T 1080 30 T 1440 30 L 1440 0 L 0 0 Z' fill='%23ffffff'/></svg>") no-repeat center/cover;
}
.ab-bel .sec-h { text-align: center; max-width: 680px; margin: 0 auto 56px; }
.ab-bel .sec-h .eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff; border: 1px solid #F4E4BC; color: #C9A227;
    font-size: 13px; font-weight: 700; padding: 7px 14px; border-radius: 999px;
    letter-spacing: .04em; text-transform: uppercase;
}
.ab-bel .sec-h h2 {
    font-family: var(--font-display); font-size: 48px; font-weight: 800;
    letter-spacing: -0.025em; line-height: 1.05; color: #1b2a3a;
    margin: 18px 0 0;
}
.ab-bel .sec-h h2 em { font-style: italic; color: #66A367; }
.ab-bel .grid {
    max-width: 1180px; margin: 0 auto;
    display: grid; grid-template-columns: repeat(2,1fr); gap: 24px;
}
.ab-bel .card {
    background: #fff; border: 1px solid #f0e7d5; border-radius: 24px;
    padding: 32px 32px; position: relative;
}
.ab-bel .card:nth-child(1) { background: #FDF4DC; border-color: #F4E4BC; }
.ab-bel .card:nth-child(2) { background: #E8F1F9; border-color: #C9DBEE; }
.ab-bel .card:nth-child(3) { background: #EEF6EC; border-color: #D4E8D3; }
.ab-bel .card:nth-child(4) { background: #fff; }
.ab-bel .num {
    position: absolute; top: 24px; right: 28px;
    font-family: var(--font-display); font-style: italic;
    font-weight: 800; font-size: 48px;
    color: rgba(15,23,42,.08); letter-spacing: -0.02em;
}
.ab-bel .ic {
    width: 56px; height: 56px; border-radius: 14px; background: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; margin-bottom: 18px;
    box-shadow: 0 2px 0 rgba(0,0,0,.04);
}
.ab-bel .card h3 {
    font-family: var(--font-display); font-size: 24px; font-weight: 800;
    letter-spacing: -0.015em; color: #1b2a3a; margin: 0 0 8px;
}
.ab-bel .card h3 em { font-style: italic; color: #66A367; }
.ab-bel .card p { font-size: 15.5px; line-height: 1.6; color: #4a5568; margin: 0; }

/* ===== WHO IT'S FOR ===== */
.ab-who { padding: 100px var(--page-gutter); background: #fff; }
.ab-who .wrap {
    max-width: 1100px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 56px; align-items: center;
}
.ab-who h2 {
    font-family: var(--font-display); font-size: 46px; font-weight: 800;
    letter-spacing: -0.025em; line-height: 1.05; color: #1b2a3a;
    margin: 0 0 16px; max-width: 480px;
}
.ab-who h2 em { font-style: italic; color: #66A367; }
.ab-who p { font-size: 17px; line-height: 1.65; color: #4a5568; margin: 0 0 14px; }
.ab-who p strong { color: #1b2a3a; font-weight: 700; }

.ab-who .stickies {
    display: grid; grid-template-columns: repeat(3,1fr);
    gap: 14px; margin-top: 8px;
}
.ab-who .sticky {
    background: #FDF4DC; border: 1px solid #F4E4BC;
    padding: 14px 16px; border-radius: 14px;
    font-size: 14px; font-weight: 700; color: #1b2a3a;
    text-align: center; transform: rotate(-1deg);
    box-shadow: 0 4px 12px rgba(201,162,39,.08);
}
.ab-who .sticky:nth-child(2n) {
    transform: rotate(1.5deg);
    background: #E8F1F9; border-color: #C9DBEE; color: #0A4F8A;
}
.ab-who .sticky:nth-child(3n) {
    transform: rotate(-0.5deg);
    background: #EEF6EC; border-color: #D4E8D3; color: #1e5a1e;
}

.ab-who .nope {
    display: flex; align-items: flex-start; gap: 14px;
    margin-top: 24px;
    background: #FBF5EA; border: 1px dashed #C9A227; border-radius: 14px;
    padding: 16px 20px;
}
.ab-who .nope .em { font-size: 22px; flex-shrink: 0; }
.ab-who .nope p { font-size: 14.5px; line-height: 1.5; color: #5a4a1f; margin: 0; }
.ab-who .nope p strong { color: #7C2D12; }

/* ===== BRAND STORY CARD ===== */
.ab-brand { padding: 0 var(--page-gutter) 100px; background: #fff; }
.ab-brand .wrap {
    max-width: 1100px; margin: 0 auto;
    background: linear-gradient(135deg, #095FA1 0%, #0d7cc4 100%);
    color: #fff; border-radius: 32px;
    padding: 48px 56px;
    display: grid; grid-template-columns: 200px 1fr auto;
    gap: 40px; align-items: center;
    position: relative; overflow: hidden;
}
.ab-brand .wrap::before {
    content: ""; position: absolute;
    width: 300px; height: 300px;
    background: rgba(201,162,39,.20);
    top: -150px; right: -100px; border-radius: 50%;
}
.ab-brand .fish {
    position: relative; z-index: 1;
    width: 200px; height: 200px; border-radius: 50%;
    background: rgba(255,255,255,.10);
    border: 2px solid rgba(255,255,255,.18);
    display: flex; align-items: center; justify-content: center;
    font-size: 90px;
}
.ab-brand .copy { position: relative; z-index: 1; }
.ab-brand .tag {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,.18); color: #FDE68A;
    font-size: 11px; font-weight: 800; letter-spacing: .08em;
    padding: 5px 12px; border-radius: 999px; text-transform: uppercase;
    margin-bottom: 12px;
}
.ab-brand h3 {
    font-family: var(--font-display); font-size: 32px; font-weight: 800;
    letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 10px;
}
.ab-brand h3 em { font-style: italic; color: #FDE68A; }
.ab-brand p {
    font-size: 16px; line-height: 1.55; color: rgba(255,255,255,.88);
    margin: 0; max-width: 540px;
}
.ab-brand p em { font-style: italic; color: #FDE68A; }
.ab-brand .arrow {
    position: relative; z-index: 1;
    background: rgba(255,255,255,.16); color: #fff;
    border-radius: 999px; padding: 14px 22px;
    font-size: 14px; font-weight: 700; text-decoration: none;
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid rgba(255,255,255,.28);
    white-space: nowrap;
    transition: background 0.15s;
}
.ab-brand .arrow:hover { background: rgba(255,255,255,.28); color: #fff; text-decoration: none; }

/* ===== CONTACT ===== */
.ab-contact {
    padding: 90px var(--page-gutter); background: #FBF5EA; position: relative;
}
.ab-contact::before {
    content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 60px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1440' height='60' viewBox='0 0 1440 60' preserveAspectRatio='none'><path d='M0 30 Q 180 0 360 30 T 720 30 T 1080 30 T 1440 30 L 1440 0 L 0 0 Z' fill='%23ffffff'/></svg>") no-repeat center/cover;
}
.ab-contact .wrap { max-width: 760px; margin: 0 auto; text-align: center; }
.ab-contact .eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff; border: 1px solid #F4E4BC; color: #C9A227;
    font-size: 13px; font-weight: 700; padding: 7px 14px; border-radius: 999px;
    letter-spacing: .04em; text-transform: uppercase;
}
.ab-contact h2 {
    font-family: var(--font-display); font-size: 46px; font-weight: 800;
    letter-spacing: -0.025em; line-height: 1.05; color: #1b2a3a;
    margin: 18px 0 14px;
}
.ab-contact h2 em { font-style: italic; color: #66A367; }
.ab-contact p { font-size: 17px; line-height: 1.6; color: #4a5568; margin: 0 0 28px; }
.ab-contact .email {
    display: inline-flex; align-items: center; gap: 14px;
    background: #fff; border: 2px solid #095FA1; border-radius: 18px;
    padding: 18px 28px; text-decoration: none;
    box-shadow: 0 4px 0 #074a80, 0 6px 16px rgba(9,95,161,.18);
    transition: all .15s ease;
}
.ab-contact .email:hover {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #074a80, 0 4px 10px rgba(9,95,161,.15);
    text-decoration: none;
}
.ab-contact .email .ic {
    width: 48px; height: 48px; border-radius: 12px;
    background: #E8F1F9; color: #095FA1;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
}
.ab-contact .email .label { text-align: left; }
.ab-contact .email .label .l1 {
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: #64748b;
    display: block;
}
.ab-contact .email .label .l2 {
    font-family: var(--font-display); font-size: 22px; font-weight: 800;
    color: #095FA1; letter-spacing: -0.01em;
    display: block;
}
.ab-contact .real {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 18px; font-size: 14px; color: #4a5568;
}
.ab-contact .real .dot {
    width: 8px; height: 8px; border-radius: 50%; background: #66A367;
    animation: abpulse 2s ease-in-out infinite;
}
@keyframes abpulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

/* ===== FINAL CTA BAND (sage green — about-specific variant) ===== */
.ab-cta {
    padding: 100px var(--page-gutter); background: #66A367; color: #fff;
    text-align: center; position: relative; overflow: hidden;
}
.ab-cta::before {
    content: ""; position: absolute;
    width: 300px; height: 300px;
    background: rgba(201,162,39,.20);
    top: -150px; left: -100px; border-radius: 50%;
}
.ab-cta::after {
    content: ""; position: absolute;
    width: 220px; height: 220px;
    background: rgba(9,95,161,.20);
    bottom: -100px; right: -80px; border-radius: 50%;
}
.ab-cta h2 {
    font-family: var(--font-display); font-size: 56px; font-weight: 800;
    letter-spacing: -0.025em; margin: 0 0 16px; position: relative;
}
.ab-cta h2 em { font-style: italic; color: #FDE68A; }
.ab-cta p {
    font-size: 19px; color: rgba(255,255,255,.92);
    max-width: 560px; margin: 0 auto 32px;
    line-height: 1.55; position: relative;
}
.ab-cta .cta-row {
    position: relative;
    display: flex; gap: 16px; align-items: center;
    flex-wrap: wrap; justify-content: center;
}
.ab-cta .sec-link {
    color: #fff; font-weight: 600; font-size: 15px;
    text-decoration: none; opacity: .9;
    border: 1px solid rgba(255,255,255,.4);
    border-radius: 12px; padding: 12px 20px;
    transition: opacity 0.15s, background 0.15s;
}
.ab-cta .sec-link:hover { opacity: 1; background: rgba(255,255,255,.08); color: #fff; }
.ab-cta .badges {
    position: relative; margin-top: 18px;
    display: flex; gap: 18px; flex-wrap: wrap; justify-content: center;
    font-size: 14px; color: rgba(255,255,255,.85);
}
.ab-cta .badges span { display: inline-flex; align-items: center; gap: 6px; }

/* Footer override — warm cream like home V3 */
.ab-footer { background: #FBF5EA; }

/* ===== RESPONSIVE ===== */
@media (max-width: 1100px) {
    .ab-hero { padding: 24px 32px 64px; }
    .ab-hero h1 { font-size: 60px; }

    .ab-intro { padding: 64px 32px; }
    .ab-intro .wrap { grid-template-columns: 1fr; gap: 48px; max-width: 620px; }

    .ab-bel { padding: 80px 32px; }
    .ab-bel .grid { grid-template-columns: 1fr; }

    .ab-who { padding: 80px 32px; }
    .ab-who .wrap { grid-template-columns: 1fr; gap: 32px; max-width: 620px; }

    .ab-brand { padding: 0 32px 80px; }
    .ab-brand .wrap {
        grid-template-columns: 1fr; gap: 24px;
        padding: 32px; text-align: center;
    }
    .ab-brand .fish { width: 140px; height: 140px; font-size: 64px; margin: 0 auto; }
    .ab-brand p { margin: 0 auto; }
    .ab-brand .arrow { margin: 0 auto; }

    .ab-contact { padding: 64px 32px; }
    .ab-cta { padding: 80px 32px; }
}

@media (max-width: 700px) {
    .ab-hero { padding: 16px 20px 48px; }
    .ab-hero h1 { font-size: 42px; }
    .ab-hero p.sub { font-size: 17px; }

    .ab-intro { padding: 48px 20px; }
    .ab-intro .col h2 { font-size: 30px; }

    .ab-bel { padding: 64px 20px; }
    .ab-bel .sec-h h2 { font-size: 32px; }
    .ab-bel .card { padding: 28px 24px; }
    .ab-bel .card h3 { font-size: 20px; }

    .ab-who { padding: 64px 20px; }
    .ab-who h2 { font-size: 32px; }
    .ab-who .stickies { grid-template-columns: repeat(2,1fr); }

    .ab-brand { padding: 0 20px 64px; }
    .ab-brand h3 { font-size: 24px; }

    .ab-contact { padding: 56px 20px; }
    .ab-contact h2 { font-size: 32px; }
    .ab-contact .email .label .l2 { font-size: 18px; }

    .ab-cta { padding: 64px 20px; }
    .ab-cta h2 { font-size: 32px; }
    .ab-cta p { font-size: 16px; }
    .ab-cta .cta-row { flex-direction: column; }
}