/* ── PAGE HEADER ─────────────────────────────────────────── */
.ab-header {
    background:    var(--carbon);
    /*background-image: url('/img/team/team-hero.jpeg');*/
    
    border-bottom: 3px solid var(--red);
    padding:       clamp(64px,9vw,112px) var(--pad-x) clamp(56px,8vw,96px);
    text-align:    center;
    position:      relative;
    overflow:      hidden;
}
.ab-header::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: repeating-linear-gradient(
        -45deg,
        rgba(255,255,255,.013) 0px, rgba(255,255,255,.013) 1px,
        transparent 1px, transparent 44px
    );
    pointer-events: none;
}
.ab-header-inner {
    position:  relative;
    z-index:   1;
    max-width: 760px;
    margin:    0 auto;
}
.ab-header-eyebrow {
    font-family:    var(--ff-ui);
    font-size:      9px;
    letter-spacing: .36em;
    text-transform: uppercase;
    color:          var(--red);
    display:        block;
    margin-bottom:  20px;
}
.ab-header-title {
    font-family:    var(--ff-display);
    font-size:      clamp(32px,5vw,58px);
    font-weight:    400;
    color:          #f5f5f0;
    letter-spacing: .06em;
    line-height:    1.15;
    margin-bottom:  24px;
}
.ab-header-rule {
    width:      48px;
    height:     1px;
    background: var(--red);
    margin:     0 auto 28px;
}
.ab-header-sub {
    font-family:    var(--ff-editorial);
    font-size:      clamp(16px,1.8vw,20px);
    font-weight:    300;
    font-style:     italic;
    color:          #666;
    line-height:    1.75;
    letter-spacing: .02em;
}


/* ── STORY SECTION ───────────────────────────────────────── */
.ab-story {
    background: var(--surface);
    padding:    clamp(72px,9vw,112px) var(--pad-x);
}
.ab-story-inner {
    max-width:             1100px;
    margin:                0 auto;
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   clamp(48px,7vw,100px);
    align-items:           center;
}
.ab-story-text {}
.ab-story-eyebrow {
    font-family:    var(--ff-ui);
    font-size:      9px;
    letter-spacing: .32em;
    text-transform: uppercase;
    color:          var(--red);
    display:        block;
    margin-bottom:  16px;
}
.ab-story-title {
    font-family:    var(--ff-display);
    font-size:      clamp(24px,3vw,36px);
    font-weight:    400;
    color:          var(--carbon);
    letter-spacing: .04em;
    line-height:    1.2;
}
.ab-story-rule {
    width:      40px;
    height:     2px;
    background: var(--red);
    margin:     20px 0 24px;
}
.ab-story-lead {
    font-family:    var(--ff-editorial);
    font-size:      clamp(16px,1.6vw,19px);
    font-weight:    300;
    font-style:     italic;
    color:          #444;
    line-height:    1.8;
    margin-bottom:  20px;
}
.ab-story-body {
    font-family:    var(--ff-ui);
    font-size:      14px;
    color:          #666;
    line-height:    1.9;
    letter-spacing: .02em;
}
.ab-story-body + .ab-story-body { margin-top: 14px; }

/* Pull-quote on the right */
.ab-story-quote {
    position:      relative;
    padding:       clamp(32px,4vw,48px);
    background:    var(--warm);
    border-top:    3px solid var(--red);
}
.ab-story-quote::before {
    content:        '\201C';
    font-family:    var(--ff-editorial);
    font-size:      120px;
    color:          rgba(176,42,32,.12);
    position:       absolute;
    top:            -10px;
    left:           24px;
    line-height:    1;
    pointer-events: none;
}
.ab-story-quote blockquote {
    font-family:    var(--ff-editorial);
    font-size:      clamp(18px,2.2vw,24px);
    font-weight:    300;
    font-style:     italic;
    color:          var(--carbon);
    line-height:    1.65;
    letter-spacing: .01em;
    margin:         0 0 20px;
    position:       relative;
    z-index:        1;
}
.ab-story-quote-attr {
    font-family:    var(--ff-ui);
    font-size:      10px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color:          var(--muted);
}

/* Stat row */
.ab-stats {
    display:    flex;
    gap:        0;
    margin-top: clamp(32px,4vw,52px);
    border-top: 1px solid var(--rule);
    padding-top:clamp(24px,3vw,36px);
}
.ab-stat {
    flex:       1;
    text-align: center;
    padding:    0 16px;
    border-right: 1px solid var(--rule);
}
.ab-stat:last-child { border-right: none; }
.ab-stat-num {
    font-family:    var(--ff-display);
    font-size:      clamp(32px,4vw,48px);
    font-weight:    400;
    color:          var(--carbon);
    letter-spacing: .02em;
    display:        block;
    line-height:    1;
    margin-bottom:  6px;
}
.ab-stat-num sup { font-size: 55%; vertical-align: super; }
.ab-stat-label {
    font-family:    var(--ff-ui);
    font-size:      10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color:          var(--muted);
    display:        block;
    line-height:    1.4;
}


/* ── TEAM SECTION ────────────────────────────────────────── */
.ab-team {
    background: var(--chalk);
    padding:    clamp(72px,9vw,112px) var(--pad-x);
}
.ab-team-inner {
    max-width: 1200px;
    margin:    0 auto;
}
.ab-team-header {
    text-align:    center;
    margin-bottom: clamp(48px,6vw,72px);
}
.ab-team-eyebrow {
    font-family:    var(--ff-ui);
    font-size:      9px;
    letter-spacing: .32em;
    text-transform: uppercase;
    color:          var(--red);
    display:        block;
    margin-bottom:  12px;
}
.ab-team-title {
    font-family:    var(--ff-display);
    font-size:      clamp(24px,3vw,36px);
    font-weight:    400;
    color:          var(--carbon);
    letter-spacing: .05em;
}
.ab-team-rule {
    width:      40px;
    height:     2px;
    background: var(--red);
    margin:     18px auto 0;
}

/* Grid */
.ab-team-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   clamp(24px,3vw,40px);
}

.ab-member {
    background: var(--surface);
    overflow:   hidden;
}

/* Portrait placeholder */
.ab-member-photo {
    aspect-ratio: 4/5;
    overflow:     hidden;
    background:   #1a1a1a;
    position:     relative;
}
.ab-member-photo img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    object-position: center top;
    display:    block;
    transition: transform .6s ease;
    filter:     brightness(.96) contrast(1.02);
}
.ab-member:hover .ab-member-photo img { transform: scale(1.04); }

/* Placeholder state (before photos uploaded) */
.ab-member-photo-placeholder {
    width:           100%;
    height:          100%;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             12px;
    background:      linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
}
.ab-member-photo-placeholder span:first-child {
    font-size:   40px;
    color:       rgba(212,175,80,.3);
}
.ab-member-photo-placeholder span:last-child {
    font-family:    var(--ff-ui);
    font-size:      10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color:          #333;
}

.ab-member-body {
    padding: clamp(20px,2.5vw,28px);
}
.ab-member-name {
    font-family:    var(--ff-display);
    font-size:      clamp(18px,2vw,22px);
    font-weight:    400;
    color:          var(--carbon);
    letter-spacing: .05em;
    line-height:    1.2;
    margin-bottom:  4px;
}
.ab-member-role {
    font-family:    var(--ff-ui);
    font-size:      10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color:          var(--red);
    margin-bottom:  16px;
    display:        block;
}
.ab-member-rule {
    width:      28px;
    height:     1px;
    background: var(--rule);
    margin:     0 0 16px;
}
.ab-member-bio {
    font-family:    var(--ff-ui);
    font-size:      13px;
    color:          #666;
    line-height:    1.85;
    letter-spacing: .02em;
    margin-bottom:  18px;
}

/* Personal detail chips */
.ab-member-tags {
    display:    flex;
    flex-wrap:  wrap;
    gap:        6px;
}
.ab-member-tag {
    font-family:    var(--ff-ui);
    font-size:      10px;
    letter-spacing: .08em;
    color:          var(--muted);
    border:         1px solid var(--rule);
    padding:        4px 10px;
    line-height:    1.4;
}


/* ── WHY ONLINE ──────────────────────────────────────────── */
.ab-online {
    background:  var(--carbon);
    border-top:  3px solid var(--red);
    padding:     clamp(72px,9vw,112px) var(--pad-x);
    position:    relative;
    overflow:    hidden;
}
.ab-online::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: repeating-linear-gradient(
        -45deg,
        rgba(255,255,255,.012) 0px, rgba(255,255,255,.012) 1px,
        transparent 1px, transparent 44px
    );
    pointer-events: none;
}
.ab-online-inner {
    max-width:             1100px;
    margin:                0 auto;
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   clamp(48px,7vw,96px);
    align-items:           center;
    position:              relative;
    z-index:               1;
}
.ab-online-text {}
.ab-online-eyebrow {
    font-family:    var(--ff-ui);
    font-size:      9px;
    letter-spacing: .32em;
    text-transform: uppercase;
    color:          var(--red);
    display:        block;
    margin-bottom:  16px;
}
.ab-online-title {
    font-family:    var(--ff-display);
    font-size:      clamp(26px,3.2vw,40px);
    font-weight:    400;
    color:          #f5f5f0;
    letter-spacing: .05em;
    line-height:    1.2;
}
.ab-online-rule {
    width:      40px;
    height:     1px;
    background: var(--red);
    margin:     20px 0 24px;
}
.ab-online-lead {
    font-family:    var(--ff-editorial);
    font-size:      clamp(16px,1.6vw,19px);
    font-weight:    300;
    font-style:     italic;
    color:          #888;
    line-height:    1.8;
    margin-bottom:  20px;
}
.ab-online-body {
    font-family:    var(--ff-ui);
    font-size:      13px;
    color:          #555;
    line-height:    1.9;
    letter-spacing: .02em;
}
.ab-online-body + .ab-online-body { margin-top: 12px; }

/* Perks list */
.ab-perks {
    display:        flex;
    flex-direction: column;
    gap:            0;
    border:         1px solid #1a1a1a;
}
.ab-perk {
    padding:       clamp(18px,2.5vw,28px) clamp(20px,2.5vw,28px);
    border-bottom: 1px solid #1a1a1a;
    display:       flex;
    gap:           20px;
    align-items:   flex-start;
}
.ab-perk:last-child { border-bottom: none; }
.ab-perk-icon {
    font-size:    20px;
    color:        rgba(212,175,80,.7);
    flex-shrink:  0;
    margin-top:   2px;
    line-height:  1;
}
.ab-perk-title {
    font-family:    var(--ff-display);
    font-size:      15px;
    font-weight:    400;
    color:          #ccc;
    letter-spacing: .04em;
    margin-bottom:  5px;
}
.ab-perk-body {
    font-family:    var(--ff-ui);
    font-size:      12px;
    color:          #444;
    line-height:    1.7;
}


/* ── CTA STRIP ───────────────────────────────────────────── */
.ab-cta {
    background: var(--warm);
    border-top: 1px solid var(--rule);
    padding:    clamp(56px,7vw,80px) var(--pad-x);
    text-align: center;
}
.ab-cta-inner { max-width: 720px; margin: 0 auto; }
.ab-cta-title {
    font-family:    var(--ff-display);
    font-size:      clamp(22px,3vw,34px);
    font-weight:    400;
    color:          var(--carbon);
    letter-spacing: .05em;
    line-height:    1.2;
    margin-bottom:  8px;
}
.ab-cta-title em {
    font-style:  italic;
    font-family: var(--ff-editorial);
    color:       #777;
}
.ab-cta-rule {
    width:      40px;
    height:     2px;
    background: var(--red);
    margin:     18px auto 24px;
}
.ab-cta-copy {
    font-family:    var(--ff-editorial);
    font-size:      clamp(15px,1.5vw,18px);
    font-style:     italic;
    font-weight:    300;
    color:          #666;
    line-height:    1.7;
    margin-bottom:  36px;
}
.ab-cta-btns {
    display:         flex;
    gap:             16px;
    justify-content: center;
    flex-wrap:       wrap;
}
.ab-btn-dark {
    font-family:     var(--ff-ui);
    font-size:       11px;
    letter-spacing:  .2em;
    text-transform:  uppercase;
    color:           #f5f5f0;
    background:      var(--carbon);
    border:          1px solid var(--carbon);
    padding:         14px 32px;
    text-decoration: none;
    transition:      background .2s;
    display:         inline-block;
}
.ab-btn-dark:hover { background: #1a1a1a; }
.ab-btn-outline {
    font-family:     var(--ff-ui);
    font-size:       11px;
    letter-spacing:  .2em;
    text-transform:  uppercase;
    color:           var(--carbon);
    background:      transparent;
    border:          1px solid #bbb;
    padding:         14px 32px;
    text-decoration: none;
    transition:      border-color .2s;
    display:         inline-block;
}
.ab-btn-outline:hover { border-color: var(--carbon); }


/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 960px) {
    .ab-story-inner  { grid-template-columns: 1fr; }
    .ab-online-inner { grid-template-columns: 1fr; }
    .ab-team-grid    { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .ab-team-grid    { grid-template-columns: 1fr; }
    .ab-stats        { flex-direction: column; gap: 24px; }
    .ab-stat         { border-right: none; border-bottom: 1px solid var(--rule); padding-bottom: 24px; }
    .ab-stat:last-child { border-bottom: none; }
    .ab-cta-btns     { flex-direction: column; align-items: center; }
    .ab-btn-dark,
    .ab-btn-outline  { width: 100%; text-align: center; max-width: 280px; }
}