/* About page-specific styles */
:root{ --brand:#081B25; --ink:#0E2330; --muted:#5B6D77; --stroke: rgba(8,27,37,.10); }

#about-main section{ padding: clamp(48px, 6vw, 96px) 0; }

.about-hero{ display:grid; place-items:center; text-align:center; min-height:46vh; }
.about-hero__inner{ max-width:960px; }
.about-hero .headline{ font-family:"Saira",sans-serif; font-weight:700; color:var(--brand); line-height:1.08; font-size:clamp(36px,6vw,60px); margin:12px 0; }
.about-hero .sub{ color:#29414f; margin:0 auto; max-width:780px; }
.about-hero__highlights{ margin-top:32px; display:flex; flex-direction:column; gap:18px; }
.about-highlight{ display:flex; flex-direction:column; gap:6px; align-items:center; padding:18px 22px; background:linear-gradient(150deg, rgba(232,244,255,.85), #ffffff); border-radius:18px; border:1px solid rgba(8,27,37,.08); box-shadow:0 12px 24px rgba(8,27,37,.12); }
.about-highlight__number{ font:700 clamp(28px,5vw,38px) "Saira",sans-serif; color:var(--brand); }
.about-highlight__label{ font-size:.95rem; color:#1f3442; }
.about-hero__media{ margin:32px auto 0; border-radius:24px; overflow:hidden; max-width:980px; border:1px solid rgba(8,27,37,.08); box-shadow:0 26px 60px rgba(8,27,37,.18); background:linear-gradient(145deg, rgba(232,244,255,.55), rgba(255,255,255,.92)); }
.about-hero__gallery{ display:grid; gap:16px; grid-template-columns:repeat(2, minmax(0, 1fr)); padding:18px; }
.about-hero__tile{ position:relative; border-radius:20px; overflow:hidden; aspect-ratio:4/3; background:#081B25; box-shadow:0 18px 32px rgba(8,27,37,.18); }
.about-hero__tile img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-hero__tile--primary{ grid-row:span 3; aspect-ratio:10/15.4; }
.about-hero__monogram{ position:absolute; left:18px; bottom:18px; width:128px; height:128px; border-radius:26px; background:rgba(8,27,37,.9); display:flex; align-items:center; justify-content:center; box-shadow:0 22px 46px rgba(8,27,37,.32); }
.about-hero__monogram img{ width:70%; height:auto; filter:drop-shadow(0 10px 24px rgba(0,0,0,.35)); }
.about-hero__media figcaption{ display:flex; align-items:center; gap:12px; padding:16px 20px; background:linear-gradient(135deg, rgba(232,244,255,.9), #ffffff); color:#1f3442; font-size:.96rem; border-top:1px solid rgba(8,27,37,.06); }
.about-hero__glyph{ width:48px; height:48px; flex-shrink:0; }

/* ================================
   Team Showcase Carousel
   ================================ */
.team-showcase{ position:relative; text-align:center; }
.team-showcase__inner{ display:grid; gap:32px; justify-items:center; }
.team-showcase__title{ margin:0; font-family:"Saira",sans-serif; font-weight:700; font-size:clamp(32px,6vw,60px); letter-spacing:-.01em; color:var(--brand); }
.team-carousel{ width:100%; max-width:1100px; position:relative; perspective:1200px; }
.team-carousel__viewport{ overflow:visible; height:420px; position:relative; }
.team-carousel__track{ position:absolute; inset:0; display:flex; justify-content:center; align-items:center; transform-style:preserve-3d; }
.team-card{ position:absolute; width:260px; height:360px; border-radius:22px; overflow:hidden; background:#ffffff; border:1px solid rgba(8,27,37,.08); box-shadow:0 24px 48px rgba(8,27,37,.16); transition:transform .7s cubic-bezier(.25,.46,.45,.94), opacity .7s ease, box-shadow .7s ease; cursor:pointer; }
.team-card img{ width:100%; height:100%; object-fit:cover; display:block; }
.team-card--center{ transform:translateX(0) scale(1.08) translateZ(0); z-index:5; box-shadow:0 28px 54px rgba(8,27,37,.22); filter:none; }
.team-card--left-1{ transform:translateX(-200px) scale(.9) translateZ(-100px); opacity:.9; z-index:4; filter:grayscale(35%); }
.team-card--left-2{ transform:translateX(-400px) scale(.8) translateZ(-280px); opacity:.7; z-index:2; filter:grayscale(75%); }
.team-card--right-1{ transform:translateX(200px) scale(.9) translateZ(-100px); opacity:.9; z-index:4; filter:grayscale(35%); }
.team-card--right-2{ transform:translateX(400px) scale(.8) translateZ(-280px); opacity:.7; z-index:2; filter:grayscale(75%); }
.team-card--hidden{ opacity:0; pointer-events:none; transform:translateZ(-420px) scale(.7); z-index:1; }

.team-carousel__arrow{ position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%; border:none; background:rgba(8,27,37,.72); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.6rem; cursor:pointer; transition:transform .25s ease, background .25s ease; z-index:6; }
.team-carousel__arrow:hover{ background:rgba(8,27,37,.9); transform:translateY(-50%) scale(1.08); }
.team-carousel__arrow:focus-visible{ outline:2px solid #2269b2; outline-offset:2px; }
.team-carousel__arrow--prev{ left:-12px; padding-right:2px; }
.team-carousel__arrow--next{ right:-12px; padding-left:2px; }

.team-showcase__details{ text-align:center; display:grid; gap:6px; }
.team-showcase__name{ margin:0; font:700 clamp(22px,3vw,32px) "Saira",sans-serif; color:var(--brand); transition:opacity .35s ease; }
.team-showcase__role{ margin:0; font-size:clamp(.95rem,2.4vw,1.15rem); color:#5b6d77; letter-spacing:.08em; text-transform:uppercase; transition:opacity .35s ease; }

.team-carousel__dots{ display:flex; gap:10px; justify-content:center; }
.team-carousel__dot{ width:12px; height:12px; border-radius:50%; border:none; background:rgba(8,27,37,.18); cursor:pointer; transition:transform .25s ease, background .25s ease; }
.team-carousel__dot.is-active{ background:var(--brand); transform:scale(1.25); }
.team-carousel__dot:focus-visible{ outline:2px solid #2269b2; outline-offset:2px; }

@media (max-width:960px){
  .team-carousel__viewport{ height:360px; }
  .team-card{ width:220px; height:320px; }
  .team-card--left-2{ transform:translateX(-280px) scale(.8) translateZ(-240px); opacity:.6; }
  .team-card--right-2{ transform:translateX(280px) scale(.8) translateZ(-240px); opacity:.6; }
  .team-carousel__arrow--prev{ left:0; }
  .team-carousel__arrow--next{ right:0; }
}

@media (max-width:720px){
  .team-carousel__viewport{ height:300px; }
  .team-card{ width:180px; height:250px; }
  .team-card--left-1{ transform:translateX(-120px) scale(.88) translateZ(-80px); }
  .team-card--right-1{ transform:translateX(120px) scale(.88) translateZ(-80px); }
  .team-card--left-2{ transform:translateX(-250px) scale(.78) translateZ(-220px); opacity:.5; }
  .team-card--right-2{ transform:translateX(250px) scale(.78) translateZ(-220px); opacity:.5; }
  .team-showcase__title{ font-size:clamp(26px,15vw,52px); }
  .about-hero__gallery{ grid-template-columns:1fr; padding:16px; }
  .about-hero__tile--primary{ grid-row:auto; aspect-ratio:4/3; }
  .about-hero__monogram{ width:110px; height:110px; }
  .about-hero__media figcaption{ flex-direction:column; text-align:center; }
}

@media (prefers-reduced-motion: reduce){
  .team-card,
  .team-carousel__track,
  .team-showcase__name,
  .team-showcase__role,
  .team-carousel__arrow,
  .team-carousel__dot{ transition:none !important; }
}

@media (min-width:840px){
  .about-hero__highlights{ flex-direction:row; justify-content:center; }
  .about-highlight{ flex:1; max-width:260px; }
}

.about-story__grid{ display:grid; gap:32px; }
.about-story p{ color:#2f4554; line-height:1.7; margin:0 0 16px; }
.about-story__media{ margin:24px 0 0; display:grid; gap:10px; justify-items:center; padding:22px; border-radius:22px; background:linear-gradient(150deg, rgba(239,247,255,.92), #ffffff); border:1px solid rgba(8,27,37,.08); box-shadow:0 18px 32px rgba(8,27,37,.12); }
.about-story__media img{ width:120px; height:auto; filter:drop-shadow(0 12px 24px rgba(8,27,37,.16)); }
.about-story__media figcaption{ font-size:.9rem; color:#1f3240; text-align:center; }
.about-approach{ background:linear-gradient(150deg, rgba(239,247,255,.92), #ffffff); padding:26px 28px 30px; border-radius:24px; border:1px solid rgba(8,27,37,.08); box-shadow:0 18px 32px rgba(8,27,37,.12); }
.about-list{ list-style:none; margin:0; padding:0; display:grid; gap:14px; color:#1f3240; font-size:.98rem; }
.about-list li{ position:relative; padding-left:22px; text-align: left;}
.about-list li::before{ content:""; position:absolute; left:0; top:10px; width:10px; height:10px; border-radius:50%; background:rgba(8,27,37,.32); }
.about-list strong{ font-weight:600; color:var(--brand); }

@media (min-width:900px){
  .about-story__grid{ grid-template-columns:1.15fr 1fr; align-items:start; }
}

.about-metrics__head{ text-align:center; max-width:740px; margin:0 auto 28px; }
.metrics-grid{ display:grid; gap:18px; grid-template-columns:1fr; }
.metric-card{ padding:26px 24px 30px; border-radius:22px; border:1px solid rgba(8,27,37,.08); background:linear-gradient(145deg, rgba(232,244,255,.9), #ffffff); box-shadow:0 18px 36px rgba(8,27,37,.12); }
.metric-card h3{ margin:0 0 10px; font:600 20px "Saira",sans-serif; color:var(--brand); }
.metric-card p{ margin:0; color:#2f4554; line-height:1.6; }

@media (min-width:900px){
  .metrics-grid{ grid-template-columns:repeat(3,1fr); }
}

.about-values{ text-align:center; }
.values-grid{ margin-top:24px; display:grid; gap:18px; grid-template-columns:1fr; }
.value-card{ padding:26px 24px 30px; border-radius:22px; border:1px solid rgba(8,27,37,.08); background:linear-gradient(160deg, rgba(239,247,255,.96), #ffffff); box-shadow:0 18px 40px rgba(8,27,37,.12); }
.value-card__icon{ width:48px; height:48px; margin-bottom:12px; }
.value-card h3{ margin:0 0 10px; font:600 20px "Saira",sans-serif; color:var(--brand); }
.value-card p{ margin:0; color:#2f4554; line-height:1.6; }

@media (min-width:900px){
  .values-grid{ grid-template-columns:repeat(3,1fr); }
}

.about-cta{ display:flex; justify-content:center; }
.about-cta__card{ max-width:720px; text-align:center; padding:40px 32px; border-radius:26px; border:1px solid rgba(8,27,37,.08); background:linear-gradient(160deg, rgba(232,244,255,.92), #ffffff); box-shadow:0 24px 48px rgba(8,27,37,.14); display:grid; gap:16px; }
.about-cta__card .cta-button{ justify-self:center; }

/* Preferred platforms (moved from industries) */
.brand-showcase{ padding-top: clamp(48px, 7vw, 96px); }
.brand-grid{ display:grid; gap:18px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top:24px; }
.brand-card{ position:relative; padding:18px 18px 22px; border-radius:20px; border:1px solid rgba(8,27,37,.08); background:linear-gradient(140deg, rgba(232,244,255,.92), #ffffff); box-shadow:0 14px 28px rgba(8,27,37,.12); transition: transform .25s ease, box-shadow .25s ease; cursor:pointer; }
.brand-card:hover{ transform:translateY(-6px) rotate3d(1,0,0,-3deg); box-shadow:0 22px 44px rgba(8,27,37,.2); }
.brand-card h3{ margin:12px 0 6px; font:600 18px "Saira",sans-serif; color:var(--brand); }
.brand-card p{ margin:0 0 12px; font-size:.92rem; color:#2f4554; line-height:1.6; }
.brand-tags{ list-style:none; margin:0; padding:0; display:flex; gap:8px; flex-wrap:wrap; }
.brand-tags li{ padding:6px 10px; font-size:.75rem; border-radius:999px; background:rgba(8,27,37,.08); color:#1d3442; }
.brand-logo{ width:66px; height:66px; border-radius:16px; background:linear-gradient(135deg, rgba(31,113,180,.85), rgba(8,27,37,.9)); color:#fff; display:grid; place-items:center; font:600 0.9rem "Saira",sans-serif; letter-spacing:.08em; text-transform:uppercase; box-shadow:0 12px 24px rgba(8,51,92,.24); }
.brand-card:focus-visible{ outline:2px solid #2269b2; outline-offset:4px; transform:translateY(-6px) rotate3d(1,0,0,-3deg); }

@media (prefers-reduced-motion: reduce){
  .brand-card,
  .about-highlight,
  .metric-card,
  .value-card,
  .about-cta__card,
  .about-hero__media,
  .about-story__media{ transition:none !important; }
}