/* ==========================================================
   ABOUT.CSS — About page specific styles
   ========================================================== */

/* ── PAGE HERO VIDEO BACKGROUND ── */
.page-hero__bg-wrap {
    position: absolute;
    inset:    0;
}
.page-hero__bg-placeholder {
    position:   absolute;
    inset:      0;
    background:
        radial-gradient(ellipse at 65% 35%, rgba(46,92,71,0.5) 0%, transparent 60%),
        radial-gradient(ellipse at 20% 75%, rgba(15,42,25,0.7) 0%, transparent 55%),
        linear-gradient(150deg, #0d1a12 0%, #1b3a2d 45%, #0f2018 100%);
}
.page-hero__video {
    position:        absolute;
    inset:           0;
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: center;
    opacity:         0.55;
    display:         block;
}
.page-hero__overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(
        150deg,
        rgba(26,61,40,0.38)  0%,
        rgba(46,102,68,0.18) 45%,
        rgba(26,61,40,0.44)  100%
    );
    pointer-events: none;
}
/* Ensure content sits above video layers */
.page-hero .container { position: relative; z-index: 1; }

/* ── INTRO SPLIT ── */
.about-intro { padding: 96px 64px; background: var(--off-white); }
.about-intro__grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   80px;
    align-items:           center;
    max-width:             var(--container-max);
    margin-inline:         auto;
}
.about-intro__text { display: flex; flex-direction: column; gap: 20px; }
.about-intro__text h2 {
    font-family: var(--font-heading);
    font-size:   clamp(2rem, 3.5vw, 3rem);
    font-weight: 300;
    color:       var(--ink);
    line-height: 1.1;
}
.about-intro__text h2 em { font-style: italic; color: var(--emerald); }
.about-intro__text p {
    font-size:   15px;
    font-weight: 300;
    color:       var(--stone);
    line-height: 1.9;
}
.about-intro__image { position: relative; }
.about-intro__img {
    width:      100%;
    aspect-ratio: 4/5;
    object-fit:  cover;
    object-position: center;
    display:    block;
}
.about-intro__img-placeholder {
    width:      100%;
    aspect-ratio: 4/5;
    background: linear-gradient(145deg, #2d5c47 0%, #1b3a2d 100%);
}

/* ── VALUES / PILLARS ── */
.values-section { padding: 96px 64px; background: var(--parchment); }
.values-header  {
    text-align:     center;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            16px;
    margin-bottom:  72px;
}
.values-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   3px;
    max-width:             var(--container-max);
    margin-inline:         auto;
}
.value-card {
    background:     #fff;
    padding:        44px 36px;
    border-bottom:  2px solid transparent;
    transition:     border-color 0.3s, transform 0.3s;
    position:       relative;
}
.value-card:hover { border-color: var(--gold); transform: translateY(-4px); }
.value-icon {
    width:         52px;
    height:        52px;
    border:        0.5px solid rgba(201,169,110,0.4);
    display:       flex;
    align-items:   center;
    justify-content: center;
    margin-bottom: 24px;
    transition:    background 0.3s, border-color 0.3s;
}
.value-card:hover .value-icon { background: var(--gold); border-color: var(--gold); }
.value-card:hover .value-icon svg { stroke: var(--ink) !important; }
.value-num {
    position:    absolute;
    top:         20px;
    right:       24px;
    font-family: var(--font-heading);
    font-size:   56px;
    font-weight: 300;
    color:       rgba(201,169,110,0.08);
    line-height: 1;
    user-select: none;
}
.value-title { font-family: var(--font-body); font-size: 13px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); margin-bottom: 12px; }
.value-text  { font-size: 14px; font-weight: 300; color: var(--stone); line-height: 1.8; }

/* ── TEAM SECTION ── */
.team-section { padding: 96px 64px; background: var(--off-white); }
.team-header  {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    align-items:           end;
    gap:                   48px;
    margin-bottom:         64px;
}
.team-header-left  { display: flex; flex-direction: column; gap: 16px; }
.team-grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   3px;
    max-width:             var(--container-max);
    margin-inline:         auto;
}
.team-card {
    position: relative;
    overflow: hidden;
    cursor:   pointer;
}
.team-card-img-wrap {
    position:      relative;
    width:         100%;
    padding-bottom: 120%;
    overflow:      hidden;
    background:    var(--parchment-mid);
}
.team-card-img-wrap img {
    position:        absolute;
    inset:           0;
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: top;
    transition:      transform var(--transition-slow);
}
.team-card-img-placeholder {
    position:   absolute;
    inset:      0;
    background: linear-gradient(145deg, #2d5c47 0%, #1b3a2d 100%);
}
.team-card:hover .team-card-img-wrap img { transform: scale(1.05); }
.team-card-info {
    padding:       20px 0 4px;
}
.team-card-name { font-family: var(--font-heading); font-size: 22px; font-weight: 400; color: var(--ink); margin-bottom: 4px; }
.team-card-role { font-size: 11px; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }

/* ── STATS BAR ── */
.stats-bar {
    background: var(--emerald);
    padding:    72px 64px;
}
.stats-bar-inner {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    max-width:       var(--container-max);
    margin-inline:   auto;
    gap:             40px;
    flex-wrap:       wrap;
}
.stat-item {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    text-align:     center;
}
.stat-item__num {
    font-family:   var(--font-heading);
    font-size:     clamp(2.5rem, 5vw, 4rem);
    font-weight:   300;
    color:         #fff;
    line-height:   1;
    margin-bottom: 8px;
}
.stat-item__num em { font-style: normal; color: var(--gold-pale); }
.stat-item__label {
    font-size:      11px;
    font-weight:    300;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color:          rgba(255,255,255,0.45);
}
.stat-divider { width: 0.5px; height: 60px; background: rgba(255,255,255,0.1); }

/* ── ABOUT SPECIALTIES LIST ── */
.about-spec-list {
    list-style: none;
    padding:    0;
    margin:     0;
    display:    flex;
    flex-direction: column;
    gap:        10px;
}
.about-spec-list li {
    display:     flex;
    align-items: center;
    gap:         12px;
    font-size:   14px;
    font-weight: 300;
    color:       var(--stone);
}
.about-spec-list li::before {
    content:     '';
    width:       6px;
    height:      6px;
    background:  var(--gold);
    transform:   rotate(45deg);
    flex-shrink: 0;
}

/* ── MISSION SECTION ── */
.mission-section {
    padding:    72px 64px;
    background: var(--forest);
    overflow:   hidden;
}
.mission-inner {
    max-width:       var(--container-max);
    margin-inline:   auto;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             28px;
    text-align:      center;
}
.mission-quote {
    font-family:     var(--font-heading);
    font-size:       clamp(1.3rem, 2.5vw, 2rem);
    font-weight:     300;
    font-style:      italic;
    color:           rgba(255,255,255,0.9);
    line-height:     1.6;
    max-width:       860px;
    border-left:     none;
    margin:          0;
    padding:         0;
    position:        relative;
}
.mission-quote::before {
    content:     '"';
    font-family: var(--font-heading);
    font-size:   80px;
    font-weight: 300;
    color:       rgba(201,169,110,0.2);
    line-height: 0.6;
    position:    absolute;
    top:         0;
    left:        -20px;
}

/* ── WHO WE SERVE SECTION ── */
.who-serve-section {
    padding:    96px 64px;
    background: var(--parchment);
}
.who-serve-header {
    display:        flex;
    flex-direction: column;
    gap:            16px;
    margin-bottom:  64px;
}
.who-serve-grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   3px;
    max-width:             var(--container-max);
    margin-inline:         auto;
}
.who-serve-card {
    background:     #fff;
    padding:        44px 32px;
    border-bottom:  2px solid transparent;
    transition:     border-color 0.3s, transform 0.3s;
    display:        flex;
    flex-direction: column;
    gap:            16px;
}
.who-serve-card:hover { border-color: var(--gold); transform: translateY(-4px); }
.who-serve-icon {
    width:       52px;
    height:      52px;
    border:      0.5px solid rgba(201,169,110,0.4);
    display:     flex;
    align-items: center;
    justify-content: center;
    transition:  background 0.3s, border-color 0.3s;
}
.who-serve-card:hover .who-serve-icon { background: var(--gold); border-color: var(--gold); }
.who-serve-card:hover .who-serve-icon svg { stroke: var(--ink) !important; }
.who-serve-title {
    font-family:    var(--font-body);
    font-size:      13px;
    font-weight:    500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--ink);
}
.who-serve-text { font-size: 14px; font-weight: 300; color: var(--stone); line-height: 1.8; }

/* ── CORE CAPABILITIES ── */
section.capabilities-section {
    padding:    96px 64px !important;
    background: var(--off-white) !important;
}
section.capabilities-section .capabilities-header {
    display:        flex;
    flex-direction: column;
    gap:            16px;
    margin-bottom:  64px;
}
section.capabilities-section .capabilities-grid {
    display:               grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap:                   3px;
}
section.capabilities-section .capability-block {
    background:    #fff;
    padding:       44px 36px;
    border-bottom: 2px solid transparent;
    transition:    border-color 0.3s, transform 0.3s;
}
section.capabilities-section .capability-block:hover {
    border-color: var(--gold);
    transform:    translateY(-4px);
}
section.capabilities-section .capability-block__title-row {
    display:       flex;
    align-items:   flex-start;
    gap:           14px;
    margin-bottom: 24px;
}
section.capabilities-section .capability-check {
    width:       22px;
    height:      22px;
    stroke:      var(--gold);
    flex-shrink: 0;
    margin-top:  1px;
}
section.capabilities-section .capability-block__title {
    font-family:    var(--font-body);
    font-size:      14px;
    font-weight:    600;
    letter-spacing: 0.04em;
    color:          var(--ink);
    line-height:    1.4;
}
section.capabilities-section .capability-list {
    list-style:     none;
    padding:        0;
    margin:         0;
    display:        flex;
    flex-direction: column;
    gap:            12px;
    padding-left:   36px;
}
section.capabilities-section .capability-list li {
    font-size:   14px;
    font-weight: 300;
    color:       var(--stone);
    line-height: 1.7;
    display:     flex;
    align-items: flex-start;
    gap:         10px;
}
section.capabilities-section .capability-list li::before {
    content:     '•';
    color:       var(--gold);
    font-size:   16px;
    line-height: 1.4;
    flex-shrink: 0;
}

/* ── DIFFERENTIATORS ── */
section.diff-section {
    padding:    96px 64px !important;
    background: var(--forest) !important;
}
section.diff-section .diff-header {
    display:        flex;
    flex-direction: column;
    gap:            16px;
    margin-bottom:  64px;
}
section.diff-section .diff-header .section-heading { color: #fff; }
section.diff-section .diff-header .eyebrow         { color: var(--gold); }
section.diff-section .diff-header .eyebrow::before { background: var(--gold); }
section.diff-section .diff-grid {
    display:               grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap:                   3px;
}
section.diff-section .diff-item {
    background:     rgba(255,255,255,0.04);
    border:         0.5px solid rgba(255,255,255,0.07);
    border-bottom:  2px solid transparent;
    padding:        40px 36px;
    display:        flex;
    flex-direction: column;
    gap:            20px;
    transition:     border-color 0.3s, background 0.3s;
}
section.diff-section .diff-item:hover {
    border-color: var(--gold);
    background:   rgba(255,255,255,0.07);
}
section.diff-section .diff-icon {
    width:       28px;
    height:      28px;
    stroke:      var(--gold);
    flex-shrink: 0;
}
section.diff-section .diff-text {
    font-size:   15px;
    font-weight: 300;
    color:       rgba(255,255,255,0.82) !important;
    line-height: 1.75;
}

/* ── SLOGAN BAND ── */
.slogan-band {
    background:  var(--ink);
    padding:     96px 64px;
    text-align:  center;
}
.slogan-band__text {
    font-family: var(--font-heading);
    font-size:   clamp(2.4rem, 5.5vw, 5rem);
    font-weight: 300;
    color:       #fff;
    line-height: 1.15;
    margin:      0;
}
.slogan-band__text em {
    font-style:  italic;
    color:       var(--gold);
}

/* ── PHOTO GALLERY ── */
.about-gallery {
    padding:    0;
    background: var(--ink);
}
.about-gallery__inner {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   3px;
}
.about-gallery__img-wrap {
    position:    relative;
    overflow:    hidden;
    aspect-ratio: 3/4;
    background:  var(--forest);
}
.about-gallery__img-wrap img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    object-position: center;
    display:    block;
    transition: transform 0.6s ease;
}
.about-gallery__img-wrap:hover img {
    transform: scale(1.05);
}

/* ── ABOUT CTA BAND ── */
.about-cta-band {
    background:  var(--forest);
    padding:     80px 64px;
    position:    relative;
    overflow:    hidden;
}
.about-cta-band::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: repeating-linear-gradient(
        88deg,
        transparent 0px, transparent 3px,
        rgba(201,169,110,0.025) 3px, rgba(201,169,110,0.025) 6px
    );
    pointer-events: none;
}
.about-cta-inner {
    max-width:       var(--container-max);
    margin-inline:   auto;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             48px;
    flex-wrap:       wrap;
    position:        relative;
}
.about-cta-eyebrow {
    font-size:      10px;
    font-weight:    400;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color:          var(--gold);
    display:        flex;
    align-items:    center;
    gap:            12px;
    margin-bottom:  12px;
}
.about-cta-eyebrow::before { content: ''; display: block; width: 28px; height: 0.5px; background: var(--gold); }
.about-cta-h2 {
    font-family: var(--font-heading);
    font-size:   clamp(1.8rem, 3vw, 2.75rem);
    font-weight: 300;
    color:       #fff;
    line-height: 1.15;
}
.about-cta-h2 em { font-style: normal; font-weight: 300; color: var(--amber-pale); }
.about-cta-btns { display: flex; gap: 16px; flex-wrap: wrap; }

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
    .about-intro__grid  { grid-template-columns: 1fr; gap: 48px; }
    /* Image on top, text below — same feel as desktop side-by-side */
    .about-intro__image { order: -1; }
    .about-intro__img, .about-intro__img-placeholder { aspect-ratio: 16/9; }
    .values-grid        { grid-template-columns: 1fr 1fr; }
    .who-serve-grid     { grid-template-columns: 1fr 1fr; }
    .about-gallery__inner { grid-template-columns: 1fr 1fr; }
    .about-intro,
    .values-section,
    .stats-bar,
    .mission-section,
    .who-serve-section,
    .capabilities-section,
    .diff-section,
    .slogan-band,
    .about-cta-band { padding-left: 28px; padding-right: 28px; }
    section.capabilities-section .capabilities-grid { grid-template-columns: 1fr !important; }
    section.diff-section .diff-grid                { grid-template-columns: 1fr 1fr !important; }
    .stat-divider { display: none; }
    .stats-bar-inner { justify-content: center; gap: 52px; }
    .about-cta-inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
    .values-grid          { grid-template-columns: 1fr; }
    .who-serve-grid       { grid-template-columns: 1fr; }
    section.diff-section .diff-grid { grid-template-columns: 1fr !important; }
    .about-gallery__inner { grid-template-columns: 1fr 1fr; }
}