/* ═══════════════════════════════════════════════════
   SRP International — About Page (refined v2)
   ═══════════════════════════════════════════════════ */

/* ─── HERO ────────────────────────────────────────
   Heading sized to fit "Your Trusted Corporate Services
   Partner" on a single line at desktop widths. Allows
   natural wrap on tablet & mobile.                       */
.about-hero h1 {
  font-size: clamp(26px, 4vw, 48px);
  text-wrap: balance;
}
@media (min-width: 1100px) {
  .about-hero h1 { white-space: nowrap; }
}
.about-hero h1 em {
  font-style: normal;
  background: linear-gradient(130deg, #E8C97A 0%, var(--gold) 50%, #D4A84B 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── STORY ─────────────────────────────────────── */
.story-section { padding: var(--space-4xl) var(--gutter); }
.story-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 72px;
  align-items: start;
}
.story-text p {
  font-size: 15.5px;
  color: var(--text-mid);
  line-height: 1.85;
  margin-bottom: 18px;
  font-family: var(--font-body);
}
.story-text p:last-child { margin-bottom: 0; }
.story-lede {
  font-size: 18px !important;
  color: var(--text-dark) !important;
  font-weight: var(--fw-medium);
  line-height: 1.65 !important;
  letter-spacing: -.005em;
}

/* Highlights panel — premium gradient card with feature list */
.story-highlights {
  background: linear-gradient(140deg, var(--navy-dark) 0%, var(--navy) 55%, #0E2A9F 100%);
  border-radius: var(--radius-2xl);
  padding: 40px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(6,30,117,.25);
  color: var(--white);
}
.story-highlights::before {
  content: '';
  position: absolute;
  top: -30%; right: -20%;
  width: 70%; height: 70%;
  background: radial-gradient(circle, rgba(206,175,113,.10) 0%, transparent 65%);
  pointer-events: none;
}
.story-highlights::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
}
.highlights-header {
  position: relative;
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.highlights-kicker {
  display: inline-block;
  font-size: var(--fs-kicker);
  font-weight: var(--fw-bold);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 10px;
}
.highlights-header h3 {
  font-family: var(--font-family);
  font-size: 22px;
  font-weight: var(--fw-bold);
  letter-spacing: -.015em;
  line-height: 1.2;
  color: var(--white);
}
.highlights-list {
  list-style: none;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.highlights-list li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.hl-icon {
  width: 40px; height: 40px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.hl-icon svg {
  width: 18px; height: 18px;
  stroke: var(--gold-light);
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
.highlights-list strong {
  display: block;
  font-family: var(--font-family);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
  color: var(--white);
  margin-bottom: 4px;
  letter-spacing: -.005em;
}
.highlights-list span {
  display: block;
  font-size: 13px;
  color: rgba(255,255,255,.65);
  font-family: var(--font-body);
  line-height: 1.55;
}

/* ─── VALUES — editorial numbered list ──────────── */
.values-section { padding: var(--space-4xl) var(--gutter); }
.values-section .kicker {
  color: var(--gold);
  background: rgba(206,175,113,.12);
  border-color: rgba(206,175,113,.20);
}
.values-section .heading { color: var(--white); }
.values-section .subheading { color: rgba(255,255,255,.62); }

.values-list {
  list-style: none;
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.value-row {
  display: grid;
  grid-template-columns: 88px 1fr 56px;
  align-items: center;
  gap: 28px;
  padding: 28px 8px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  position: relative;
  transition: padding-left var(--dur-slow) var(--ease-out);
}
.value-row:first-child { border-top: 1px solid rgba(255,255,255,.08); }
.value-row::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--dur-slow) var(--ease-out);
}
.value-row:hover { padding-left: 24px; }
.value-row:hover::before { transform: scaleY(1); }

.value-num {
  font-family: var(--font-family);
  font-size: clamp(40px, 4vw, 56px);
  font-weight: var(--fw-extrabold);
  color: rgba(255,255,255,.18);
  letter-spacing: -.025em;
  line-height: 1;
  transition: color var(--dur-base) var(--ease-out);
}
.value-row:hover .value-num { color: var(--gold); }

.value-body { min-width: 0; }
.value-name {
  font-family: var(--font-family);
  font-size: 22px;
  font-weight: var(--fw-bold);
  color: var(--white);
  margin-bottom: 6px;
  letter-spacing: -.01em;
}
.value-text {
  font-size: 14.5px;
  color: rgba(255,255,255,.65);
  line-height: 1.7;
  font-family: var(--font-body);
}

.value-icon {
  width: 48px; height: 48px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-left: auto;
  transition: background var(--dur-base), border-color var(--dur-base);
}
.value-row:hover .value-icon {
  background: rgba(206,175,113,.15);
  border-color: rgba(206,175,113,.30);
}
.value-icon svg {
  width: 22px; height: 22px;
  stroke: var(--gold-light);
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  transition: stroke var(--dur-base);
}

/* ─── TECHNOLOGY — 3-col card grid ──────────────── */
.tech-section { padding: var(--space-4xl) var(--gutter); background: var(--surface-subtle); }
.tech-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.tech-card {
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 32px 28px;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-slow) var(--ease-out),
              box-shadow var(--dur-slow) var(--ease-out),
              border-color var(--dur-slow);
}
.tech-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--navy);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
}
.tech-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
  border-color: rgba(6,30,117,.10);
}
.tech-card:hover::before { transform: scaleX(1); }

.tech-card-icon {
  width: 52px; height: 52px;
  background: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 22px;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base);
}
.tech-card:hover .tech-card-icon {
  background: var(--navy);
  border-color: var(--navy);
}
.tech-card-icon svg {
  width: 24px; height: 24px;
  stroke: var(--navy);
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  transition: stroke var(--dur-base);
}
.tech-card:hover .tech-card-icon svg { stroke: var(--white); }

.tech-card h3 {
  font-family: var(--font-family);
  font-size: 17px;
  font-weight: var(--fw-bold);
  color: var(--text-dark);
  margin-bottom: 10px;
  letter-spacing: -.01em;
}
.tech-card p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.7;
  font-family: var(--font-body);
  margin: 0;
}
.tech-card-tag {
  display: inline-block;
  margin-top: 14px;
  padding: 4px 11px;
  font-family: var(--font-family);
  font-size: 10.5px;
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold-dark);
  background: rgba(206,175,113,.10);
  border: 1px solid rgba(206,175,113,.25);
  border-radius: var(--radius-full);
}

/* ─── CTA — light variant (inverts the default navy CTA) ─
   Used on About page so the section visually matches the
   Technology-Enabled section above it.                     */
.cta-band--light {
  background: var(--surface-subtle);
  color: var(--text-dark);
  border-top: 1px solid var(--border-subtle);
}
/* Disable the navy radial glow from the default .cta-band */
.cta-band--light::before { display: none; }
.cta-band--light h2 { color: var(--text-dark); }
.cta-band--light p  { color: var(--text-mid); }

/* ═══════════════════════════════════════════════════
   TEAM — Cinematic Accordion Gallery
   Hover expands hovered tile (flex 3), others shrink
   to flex 0.6. Resting state: all flex 1.
   Click any tile → opens the lightbox modal.
═══════════════════════════════════════════════════ */
.team-section {
  /* Deep cinematic charcoal — far darker than navy, which lets the
     monochrome portraits speak. A whisper of warm tone keeps it
     from feeling cold, complementing the warm-grade B&W photos.    */
  background: radial-gradient(
                ellipse 80% 100% at 50% 40%,
                #1A1A22 0%,
                #0E0E14 60%,
                #060609 100%
              );
  position: relative;
  overflow: hidden;
}
.team-section .kicker  { color: var(--gold); background: rgba(206,175,113,.12); border-color: rgba(206,175,113,.22); }
.team-section .heading { color: var(--white); }
.team-section .subheading { color: rgba(255,255,255,.62); }

.team-section::before,
.team-section::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: 0;                  /* background decor sits below the portraits */
}
/* Warm rim-light glow top-right — subtle gold */
.team-section::before {
  top: -10%; right: -8%;
  width: 50%; height: 70%;
  background: radial-gradient(ellipse, rgba(206,175,113,.08) 0%, transparent 70%);
}
/* Cool fill light bottom-left */
.team-section::after {
  bottom: -15%; left: -8%;
  width: 50%; height: 60%;
  background: radial-gradient(ellipse, rgba(120,140,200,.06) 0%, transparent 70%);
}

/* ─── Cinematic accordion gallery (original) ──────
   Hover any tile to expand; click opens a lightbox
   with name + role + LinkedIn link.                 */
/* ─── PANORAMIC STRIP PORTRAIT (referenced design) ──
   Faces butt edge-to-edge with no gaps, no rounded corners.
   Eye-line aligns horizontally across the row. Heavy grayscale
   + contrast for the cinematic editorial mood. Hover expands
   a single strip to reveal the full face + info.              */
.team-gallery {
  display: flex;
  gap: 0;                            /* hard edges — no gaps */
  height: 540px;
  margin: 56px auto 0;
  max-width: 100%;
  position: relative;
  z-index: 10;                       /* lift portraits above background decor for 100% face visibility */
}

.tg-tile {
  flex: 1;
  position: relative;
  overflow: hidden;
  border: none;
  padding: 0;
  margin: 0;
  background: var(--navy-dark);
  border-radius: 0;                  /* hard edges */
  cursor: default;
  font: inherit;
  color: inherit;
  text-align: left;
  transition: flex 0.6s cubic-bezier(0.65, 0, 0.35, 1);
  min-width: 0;
}
.tg-tile:focus-visible {
  outline: 2.5px solid var(--gold);
  outline-offset: -3px;
}

.team-gallery:hover .tg-tile          { flex: 0.8; }
/* Expanded card kept narrower (was 3) so the portrait scales up less —
   reduces the zoom-in and the vertical overflow that was cropping heads. */
.team-gallery:hover .tg-tile:hover    { flex: 2.3; }

/* Image — editorial B&W with strong contrast.
   Photos pre-cropped to 1122×1402 with face-attention so the
   eye-line aligns across all 10 strips at rest.               */
.tg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Framed lower (was 28%) so when a card expands the crop hides far less
     of the top — keeps the crown of the head inside the container. Note:
     on collapsed cards the cover is height-constrained, so this Y only
     affects the expanded card (no-op while collapsed). */
  object-position: center 12%;
  display: block;
  transition: transform 7s ease-out, filter 0.5s ease;
  transform: scale(1);
  /* Heavy grayscale + contrast gives the cinematic poster mood */
  filter: grayscale(1) contrast(1.18) brightness(0.92);
}

.tg-tile:hover .tg-img {
  /* No scale on hover — scaling pushed the portrait past the tile edges
     and cropped the face. Keep the image at 1:1 so the full portrait shows
     when the strip expands; only the colour grade lifts for feedback. */
  transform: scale(1);
  /* Hovered strip pops with full colour + extra contrast */
  filter: grayscale(0.35) contrast(1.22) brightness(1);
}

.tg-img--placeholder {
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: linear-gradient(140deg, var(--navy-dark), var(--navy));
}
.tg-img--placeholder span {
  font-family: var(--font-family);
  font-size: clamp(48px, 8vw, 96px);
  font-weight: var(--fw-extrabold);
  color: var(--gold);
  letter-spacing: 4px;
  opacity: .55;
}

/* Subtle dimming layer — much lighter than before so faces
   shine through. Hovered strip becomes fully clear.            */
.tg-veil {
  position: absolute;
  inset: 0;
  /* Neutral fade for the resting/collapsed cards (keeps the vertical name
     legible). The brand-blue treatment is reserved for hover — see .tg-info. */
  background: linear-gradient(180deg, rgba(2,6,27,0.10) 0%, rgba(2,6,27,0.55) 100%);
  opacity: 1;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.tg-tile:hover .tg-veil { opacity: 0.3; }
.team-gallery:hover .tg-tile:not(:hover) .tg-veil { opacity: 1; }

/* Vertical first-name label on collapsed tiles */
.tg-side-label {
  position: absolute;
  left: 16px;
  bottom: 24px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: var(--fw-bold);
  letter-spacing: .2em;
  color: var(--white);
  text-transform: uppercase;
  opacity: 0.9;
  transition: opacity 0.3s;
  pointer-events: none;
}
.tg-tile:hover .tg-side-label { opacity: 0; }

/* Bottom info block — appears when tile expands */
.tg-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  /* Padding sets the caption-bar height; the small top feather is on ::before. */
  padding: 18px 30px 16px;
  isolation: isolate;            /* contain the ::before gradient behind the text */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
/* Hover-only brand-blue band: HORIZONTAL gradient (deep blue → brighter blue),
   masked to fade from transparent at the top to solid at the bottom so it backs
   the name/role without covering the portrait. Only visible because .tg-info
   itself only appears on hover. */
.tg-info::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Frosted-glass caption bar: a translucent dark tint over a backdrop blur
     so the portrait reads softly through the glass. A 1px top highlight gives
     the crisp glass edge. */
  background: rgba(18, 30, 58, 0.30);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
          backdrop-filter: blur(16px) saturate(140%);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  pointer-events: none;
}
.tg-tile:hover .tg-info {
  opacity: 1;
  transform: translateY(0);
}

.tg-linkedin {
  width: 46px; height: 46px;
  flex-shrink: 0;
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.75);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--white);
  text-decoration: none;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
.tg-linkedin:hover {
  background: var(--gold);
  color: var(--navy-dark);
  transform: scale(1.05);
}
.tg-linkedin svg { width: 17px; height: 17px; }

.tg-text { display: flex; flex-direction: column; min-width: 0; }
.tg-name {
  font-family: var(--font-family);
  font-size: 20px;
  font-weight: var(--fw-bold);
  color: var(--white);
  line-height: 1.2;
  letter-spacing: -.01em;
  text-shadow: 0 1px 10px rgba(0,0,0,0.45);   /* legibility on the glass */
}
.tg-role {
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(255,255,255,0.82);
  margin-top: 4px;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
  line-height: 1.4;
}

/* Responsive */
@media (max-width: 1100px) {
  .team-gallery { height: 440px; }
}
@media (max-width: 768px) {
  .team-gallery {
    flex-direction: column;
    height: auto;
    gap: 8px;
  }
  .tg-tile { height: 120px; flex: 1; }
  /* Wide-short mobile tiles are width-constrained, so the desktop 12%
     focal point (tuned for the hover-expanded card) lands above the
     faces here. Re-centre on the eyes for the 120px strip. */
  .tg-img { object-position: center 30%; }
  .team-gallery:hover .tg-tile      { flex: 0.6; }
  .team-gallery:hover .tg-tile:hover{ flex: 2.5; }
  .tg-side-label { writing-mode: horizontal-tb; transform: none; left: 20px; bottom: 16px; }
  .tg-info { padding: 16px 20px; }
  .tg-name { font-size: 18px; }
}

/* ─── Responsive — refined sections ──────────── */
@media (max-width: 1024px) {
  .story-grid { grid-template-columns: 1fr; gap: 48px; }
  .tech-grid  { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .story-highlights { padding: 32px 26px; }
  .tech-grid        { grid-template-columns: 1fr; }
  .value-row        { grid-template-columns: 60px 1fr; padding: 22px 8px; gap: 18px; }
  .value-row .value-icon { display: none; }
  .value-num        { font-size: 36px; }
  .value-name       { font-size: 19px; }
}

/* ═══════════════════════════════════════════════════
   REGIONAL LEADERSHIP — small card per regional lead
═══════════════════════════════════════════════════ */
.regional-leadership-section { background: var(--surface-subtle, #FBFBFD); }

.regional-leads-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 40px;
}

.regional-lead-card {
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl, 16px);
  padding: 22px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.regional-lead-card:hover {
  transform: translateY(-2px);
  border-color: rgba(206,175,113,.45);
  box-shadow: 0 14px 32px rgba(6,30,117,.08);
}

.regional-lead-flag {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--gold) 0%, #A8893D 100%);
  color: var(--navy-dark);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .04em;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.regional-lead-meta { flex: 1; min-width: 0; }
.regional-lead-name {
  font-weight: var(--fw-bold);
  font-size: 15px;
  color: var(--text-dark);
  letter-spacing: -.005em;
  line-height: 1.2;
}
.regional-lead-role {
  font-size: 12px;
  color: var(--text-mid);
  font-family: var(--font-body);
  margin-top: 4px;
  line-height: 1.4;
}
.regional-lead-where {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-body);
  margin-top: 6px;
  letter-spacing: .04em;
}

.regional-lead-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--gold-dark);
  text-decoration: none;
  padding: 7px 12px;
  border: 1px solid rgba(206,175,113,.40);
  border-radius: var(--radius-full);
  white-space: nowrap;
  transition: background .2s, color .2s;
}
.regional-lead-link svg { stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.regional-lead-link:hover { background: var(--gold-dark); color: #fff; border-color: var(--gold-dark); }