/* ============================================================
   ABOUT.CSS — /about (.ab- namespace) — v3
   Image-led: editorial photography + typography. No drawn
   decoration. Layers on styles.css + pages-shared.css.

.ab-section { padding: 128px 0; }

/* ------------------------------------------------------------
   HERO — centered on the aurora wash
------------------------------------------------------------ */
.ab-hero { position: relative; padding: 176px 0 48px; }

.ab-hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 560px;
    background: var(--grad-mesh);
    opacity: 0.32;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 35%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 35%, transparent 100%);
    pointer-events: none;
}

.ab-hero .section-inner { position: relative; }

.ab-hero-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.ab-h1 {
    font-size: clamp(40px, 4.6vw, 60px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--c-n900);
    max-width: 18ch;
    text-wrap: balance;
    margin-bottom: 20px;
}

.ab-hero-sub {
    font-size: 18px;
    line-height: 1.6;
    color: var(--c-n600);
    max-width: 56ch;
    margin-bottom: 30px;
}

.ab-hero-actions { display: flex; gap: 12px; }

/* ------------------------------------------------------------
   PHOTOGRAPHY FRAMES
------------------------------------------------------------ */
.ab-photo {
    border-radius: var(--r-2xl, 28px);
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(22, 22, 23, 0.14), 0 8px 22px rgba(22, 22, 23, 0.06);
    background: var(--c-g50, #f5f6f6);
}

.ab-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ab-photo--wide {
    max-width: 1160px;
    margin: 0 auto 88px;
    aspect-ratio: 21 / 9;
}

/* Until the owner-generated image lands, hold a quiet neutral panel */
.ab-photo--pending {
    box-shadow: none;
    border: 1px solid var(--pg-hairline-soft);
}

.ab-photo--pending img { visibility: hidden; }

/* ------------------------------------------------------------
   ORIGIN — story prose
------------------------------------------------------------ */
.ab-story {
    max-width: 620px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.ab-story p {
    font-size: 17.5px;
    line-height: 1.7;
    color: var(--c-n600);
}

.ab-story p:first-child {
    font-size: 20px;
    line-height: 1.6;
    color: var(--c-n900);
}

/* ------------------------------------------------------------
   THE LOOP — typographic row
------------------------------------------------------------ */
.ab-loop-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: 1080px;
    margin-inline: auto;
}

.ab-loop-item {
    padding: 8px 32px 4px;
    border-left: 1px solid var(--pg-hairline-soft);
}

.ab-loop-item:first-child { border-left: none; }

.ab-loop-item h3 {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--c-n900);
    margin-bottom: 8px;
}

.ab-loop-item p {
    font-size: 14px;
    line-height: 1.55;
    color: var(--c-n500);
}

.ab-loop-foot {
    text-align: center;
    margin-top: 48px;
}

.ab-loop-foot a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--c-n900);
    transition: gap 150ms var(--ease);
}

.ab-loop-foot a:hover { gap: 10px; }

/* ------------------------------------------------------------
   SPLITS — photo + copy (who we are, family)
------------------------------------------------------------ */
.ab-split {
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    gap: 72px;
    align-items: center;
    max-width: 1120px;
    margin-inline: auto;
}

.ab-split .ab-photo { aspect-ratio: 4 / 3; }

.ab-split--flip .ab-photo { order: 2; }
.ab-split--flip .ab-split-copy { order: 1; }

.ab-split-copy .pg-kicker { margin-bottom: 14px; }

.ab-split-title {
    font-size: clamp(26px, 2.8vw, 34px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--c-n900);
    margin-bottom: 14px;
    text-wrap: balance;
}

.ab-split-sub {
    font-size: 16.5px;
    line-height: 1.65;
    color: var(--c-n500);
    max-width: 46ch;
}

.ab-split-copy .pg-check-list { margin-top: 22px; }

/* ------------------------------------------------------------
   WHAT WE OFFER — three linked cards
------------------------------------------------------------ */
.ab-offer-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 880px;
    margin-inline: auto;
}

.ab-offer-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 30px 28px;
    transition: transform 350ms var(--ease), box-shadow 350ms var(--ease), border-color 350ms var(--ease);
}

.ab-offer-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(79, 110, 247, 0.14), 0 24px 60px rgba(22, 22, 23, 0.08);
    border-color: var(--c-brand-400, #8ca8e7);
}

.ab-offer-icon {
    width: 42px;
    height: 42px;
    font-size: 21px;
    border-radius: 13px;
}

.ab-offer-card h3 {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--c-n900);
}

.ab-offer-card p {
    font-size: 14px;
    line-height: 1.55;
    color: var(--c-n500);
}

.ab-offer-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--c-n900);
    transition: gap 150ms var(--ease);
}

.ab-offer-card:hover .ab-offer-link { gap: 10px; }

/* ------------------------------------------------------------
   HOW WE OPERATE — facts band
------------------------------------------------------------ */
.ab-standards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    text-align: center;
    padding: 36px 0;
    border-top: 1px solid var(--pg-hairline-soft);
    border-bottom: 1px solid var(--pg-hairline-soft);
}

.ab-standard { display: flex; flex-direction: column; gap: 5px; }

.ab-standard b {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--c-n900);
}

.ab-standard span {
    font-size: 13px;
    line-height: 1.45;
    color: var(--c-n500);
}

/* ------------------------------------------------------------
   Reduced motion
------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .ab-offer-card { transition: none; }
}

/* ------------------------------------------------------------
   Responsive
------------------------------------------------------------ */
@media (max-width: 960px) {
    .ab-hero { padding-top: 148px; }
    .ab-section { padding: 88px 0; }
    .ab-photo--wide { aspect-ratio: 16 / 10; margin-bottom: 56px; }
    .ab-loop-list { grid-template-columns: 1fr 1fr; row-gap: 36px; }
    .ab-loop-item:nth-child(3) { border-left: none; }
    .ab-split { grid-template-columns: 1fr; gap: 36px; }
    .ab-split--flip .ab-photo { order: 1; }
    .ab-split--flip .ab-split-copy { order: 2; }
    .ab-offer-grid { grid-template-columns: 1fr; max-width: 480px; }
    .ab-standards { grid-template-columns: 1fr 1fr; row-gap: 28px; }
}

@media (max-width: 560px) {
    .ab-hero-actions { flex-direction: column; width: 100%; }
    .ab-hero-actions .pg-btn { width: 100%; }
    .ab-loop-list { grid-template-columns: 1fr; }
    .ab-loop-item { border-left: none; padding: 14px 4px; border-top: 1px solid var(--pg-hairline-soft); }
    .ab-loop-item:first-child { border-top: none; }
}