/* ================================================================
   READYLAYER — about.css
   Page-specific styles for /about only.
   Load order: after main.css and services.css
   All classes prefixed abt- to avoid collision with rl- and svc- namespaces.

   Reused from main.css (no new CSS needed):
     rl-eyebrow, rl-btn-primary, rl-btn-ghost, rl-stat-grid,
     rl-stat-card, rl-stat-num, rl-stat-label, rl-footer-*

   Reused from services.css (no new CSS needed):
     svc-hero, svc-hero-grid, svc-hero-h1, svc-hero-sub,
     svc-page-cta, svc-page-cta-inner, svc-cta-row, svc-inline-link
   ================================================================ */


/* ----------------------------------------------------------------
   SHARED TWO-COLUMN LAYOUT
   Used by: who, indep sections (and approach via modifier)
   ---------------------------------------------------------------- */
.abt-two-col {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   80px;
  align-items:           start;
}

/* Approach section keeps same columns but aligns to start */
.abt-two-col--approach { align-items: start; }

.abt-two-col h2 {
  font-size:      clamp(1.8rem, 3vw, 2.5rem);
  font-weight:    800;
  letter-spacing: -0.02em;
  margin-bottom:  1.25rem;
}
.abt-two-col h2 em { font-style: italic; color: var(--rl-accent); }

/* Light heading override (approach section) */
.abt-h2--light {
  color:          var(--rl-off-white);
  font-size:      clamp(1.8rem, 3vw, 2.5rem);
  font-weight:    800;
  letter-spacing: -0.02em;
  margin-bottom:  1.25rem;
}

.abt-body p {
  font-size:     0.97rem;
  color:         #444;
  line-height:   1.8;
  margin-bottom: 1.1rem;
}
.abt-body p:last-child { margin-bottom: 0; }

.abt-body--light {
  font-size:     0.97rem;
  color:         rgba(245,242,236,.55);
  line-height:   1.8;
  margin-bottom: 1.1rem;
  display:       block;
}

/* Section header block (what we do) */
.abt-section-header {
  max-width:     640px;
  margin-bottom: 4rem;
}
.abt-section-header h2 {
  font-size:      clamp(1.8rem, 3vw, 2.5rem);
  font-weight:    800;
  letter-spacing: -0.02em;
  margin-bottom:  1rem;
}
.abt-section-header p {
  font-size:   1rem;
  color:       var(--rl-mid);
  line-height: 1.75;
}

@media (max-width: 991.98px) {
  .abt-two-col { grid-template-columns: 1fr; gap: 40px; }
}


/* ----------------------------------------------------------------
   WHO WE ARE
   ---------------------------------------------------------------- */
.abt-who {
  background:    var(--rl-off-white);
  padding:       var(--rl-section-pad) 0;
  border-bottom: 1px solid var(--rl-border);
}


/* ----------------------------------------------------------------
   WHAT WE DO
   ---------------------------------------------------------------- */
.abt-what {
  background: var(--rl-warm);
  padding:    var(--rl-section-pad) 0;
}

.abt-service-cards {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   2px;
}

.abt-service-card {
  background: var(--rl-off-white);
  padding:    2.25rem;
  border:     1px solid var(--rl-border);
}

.abt-sc-tag {
  font-family:    var(--rl-font-mono);
  font-size:      0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--rl-accent);
  margin-bottom:  1rem;
  display:        block;
}

.abt-service-card h3 {
  font-family:   var(--rl-font-display);
  font-size:     1.3rem;
  font-weight:   700;
  color:         var(--rl-black);
  margin-bottom: 0.65rem;
}

.abt-service-card p {
  font-size:   0.85rem;
  color:       var(--rl-mid);
  line-height: 1.7;
  margin:      0;
}

@media (max-width: 991.98px) {
  .abt-service-cards { grid-template-columns: 1fr; }
}


/* ----------------------------------------------------------------
   OUR APPROACH
   ---------------------------------------------------------------- */
.abt-approach {
  background: var(--rl-near-black);
  padding:    var(--rl-section-pad) 0;
  position:   relative;
  overflow:   hidden;
}
.abt-approach::before {
  content:    '';
  position:   absolute;
  bottom:     -150px;
  left:       -100px;
  width:      600px;
  height:     600px;
  background: radial-gradient(ellipse, rgba(200,80,42,.06) 0%, transparent 65%);
  pointer-events: none;
}

/* Pillars list */
.abt-pillars {
  display:        flex;
  flex-direction: column;
  gap:            1px;
}

.abt-pillar {
  display:     flex;
  align-items: flex-start;
  gap:         1.25rem;
  background:  rgba(255,255,255,.03);
  padding:     1.4rem 1.75rem;
  border-left: 3px solid rgba(200,80,42,.2);
  transition:  background 0.2s, border-left-color 0.2s;
}
.abt-pillar:hover {
  background:        rgba(255,255,255,.05);
  border-left-color: var(--rl-accent);
}

.abt-pillar-icon {
  font-size:  1rem;
  flex-shrink: 0;
  margin-top: 3px;
}

.abt-pillar-text strong {
  display:       block;
  font-size:     0.88rem;
  font-weight:   600;
  color:         var(--rl-off-white);
  margin-bottom: 0.2rem;
}
.abt-pillar-text span {
  font-size:   0.8rem;
  color:       rgba(245,242,236,.4);
  line-height: 1.6;
}


/* ----------------------------------------------------------------
   THE FOUNDER
   ---------------------------------------------------------------- */
.abt-founder {
  background: var(--rl-warm);
  padding:    var(--rl-section-pad) 0;
}

.abt-founder-grid {
  display:               grid;
  grid-template-columns: 280px 1fr;
  gap:                   80px;
  align-items:           start;
}

/* Sticky portrait col */
.abt-founder-portrait {
  position: sticky;
  top:      88px; /* clears fixed nav */
}

.abt-portrait-frame {
  width:         100%;
  aspect-ratio:  3 / 4;
  background:    #1a1a1a;
  border-radius: 2px;
  display:       flex;
  align-items:   flex-end;
  padding:       1.5rem;
  position:      relative;
  overflow:      hidden;
}
/* Gradient overlay */
.abt-portrait-frame::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(180deg, transparent 40%, rgba(10,10,10,.8) 100%);
}

/* Large monogram watermark */
.abt-portrait-mono {
  position:    absolute;
  top:         50%;
  left:        50%;
  transform:   translate(-50%, -60%);
  font-family: var(--rl-font-display);
  font-size:   5rem;
  font-weight: 800;
  color:       rgba(200,80,42,.12);
  user-select: none;
}

.abt-portrait-label {
  position: relative;
  z-index:  1;
}
.abt-portrait-label strong {
  display:       block;
  font-size:     1rem;
  font-weight:   600;
  color:         var(--rl-off-white);
  margin-bottom: 0.2rem;
}
.abt-portrait-label span {
  font-size:   0.75rem;
  color:       rgba(245,242,236,.45);
  font-family: var(--rl-font-mono);
}

/* Founder content */
.abt-founder-content h2 {
  font-size:     clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight:   800;
  margin-bottom: 0.35rem;
}

.abt-founder-role {
  font-family:    var(--rl-font-mono);
  font-size:      0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--rl-accent);
  display:        block;
  margin-bottom:  2rem;
}

.abt-founder-body p {
  font-size:     0.97rem;
  color:         #333;
  line-height:   1.8;
  margin-bottom: 1.25rem;
}
.abt-founder-body p:last-child { margin-bottom: 0; }

.abt-founder-creds {
  margin-top:            2.5rem;
  padding-top:           2.5rem;
  border-top:            1px solid var(--rl-border);
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   1rem;
}

.abt-cred-label {
  font-family:    var(--rl-font-mono);
  font-size:      0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          var(--rl-mid);
  display:        block;
  margin-bottom:  0.25rem;
}
.abt-cred-value {
  font-size:   0.85rem;
  color:       var(--rl-black);
  font-weight: 500;
  line-height: 1.45;
}

@media (max-width: 991.98px) {
  .abt-founder-grid   { grid-template-columns: 1fr; gap: 40px; }
  .abt-founder-portrait { position: static; }
  .abt-portrait-frame { max-width: 220px; }
  .abt-founder-creds  { grid-template-columns: 1fr; }
}


/* ----------------------------------------------------------------
   OUR INDEPENDENCE
   ---------------------------------------------------------------- */
.abt-indep {
  background: var(--rl-off-white);
  padding:    var(--rl-section-pad) 0;
  border-top: 1px solid var(--rl-border);
}

.abt-commitments {
  display:        flex;
  flex-direction: column;
  gap:            0.75rem;
}

.abt-commitment {
  display:     flex;
  align-items: flex-start;
  gap:         1rem;
  padding:     1.25rem 1.5rem;
  background:  var(--rl-warm);
  border:      1px solid var(--rl-border);
}

.abt-c-check {
  width:           26px;
  height:          26px;
  border-radius:   50%;
  background:      rgba(42,107,74,.1);
  border:          1px solid rgba(42,107,74,.25);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  font-size:       0.65rem;
  color:           #2a6b4a;
  font-weight:     700;
  margin-top:      1px;
}

.abt-c-text strong {
  display:       block;
  font-size:     0.88rem;
  font-weight:   600;
  color:         var(--rl-black);
  margin-bottom: 0.2rem;
}
.abt-c-text span {
  font-size:   0.8rem;
  color:       var(--rl-mid);
  line-height: 1.55;
}