/* =====================================================================
   Gorilla Marketing Experts — About page (overrides/extends style.css)
   Loaded AFTER style.css. Prefixed .about-/.team-.
   ===================================================================== */

/* page content width = 1300px (banner + all sections, centered with side padding) */
.container{ max-width: calc(1300px + 2 * var(--pad-x)); }

/* ---------- HERO (gorilla-king background) ---------- */
.about-hero{
  position:relative; color:var(--ivory); overflow:hidden;
  background-color:#000;
  background-image:
    linear-gradient(90deg, #000 30%, rgba(0,0,0,.55) 48%, rgba(0,0,0,0) 66%),
    url('../assets/images/about/rectangle-240647831.png');
  background-repeat:no-repeat, no-repeat;
  background-position:center, right center;
  background-size:cover, auto 100%;
}
.about-hero-inner{ position:relative; z-index:1; padding-block:76px 88px; min-height:520px; }
.about-hero-copy{ max-width:560px; position:relative; z-index:2; padding-left:30px; }
.about-hero-title{
  font-family:var(--font-display); font-weight:400; font-size:54px; line-height:1.06;
  letter-spacing:-1px; text-transform:capitalize;
  background:linear-gradient(180deg,var(--ivory) 45%,var(--gold)); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.about-hero-title .rev{ position:relative; color:var(--gold); -webkit-text-fill-color:var(--gold); font-weight:700; }
.about-hero-title .rev::after{ content:""; position:absolute; left:0; right:-4px; bottom:-10px; height:14px;
  background:url('../assets/images/home/hero-underline-scribble.svg') no-repeat center/contain; }
.about-hero-desc{ color:var(--ivory); font-weight:500; font-size:16px; margin-top:22px; max-width:500px; line-height:1.6; }
.about-hero .hero-actions{ margin-top:32px; }
.about-hero .hero-proof{ margin-top:34px; }

/* ---------- WHY CHOOSE US — 4 value cards ---------- */
.about-values{ background:var(--ivory); padding:56px 0; }
.about-values-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.about-value{ background:transparent; border:1px solid var(--ink); border-radius:22px; padding:32px 28px; text-align:center; }
/* icon SVGs carry their own gold disc + glow, so the wrapper stays transparent */
.about-value-ico{ margin:0 auto 8px; display:grid; place-items:center; }
.about-value-ico img{ width:100px; height:100px; display:block; }
.about-value-title{ font-family:var(--font-display); font-weight:700; font-size:21px; line-height:1.22; color:var(--gold); margin-bottom:12px; }
.about-value-desc{ color:var(--ink); font-size:14px; line-height:1.55; }

/* ---------- MEET THE TEAM (dark cards) ---------- */
.about-team{ background:#fffad9; padding:56px 0 72px; }
.about-team .section-head{ text-align:center; margin-bottom:44px; }
.about-team-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.team-card{ background:var(--card-dark); border:1px solid var(--bd-gold); border-radius:20px; padding:18px; display:flex; flex-direction:column; transition:transform .2s ease; }
.team-card:hover{ transform:translateY(-4px); }
.team-tag{ align-self:flex-start; display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.05);
  border:1px solid var(--bd-gold); color:var(--gold); border-radius:40px; padding:5px 12px;
  font-family:var(--font-body); font-weight:700; font-size:10px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:14px; }
.team-tag i{ color:var(--gold); font-size:11px; }
.team-photo{ width:100%; aspect-ratio:1/1; border-radius:14px; overflow:hidden; background:#f4efe2; margin-bottom:16px; }
.team-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.team-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.team-name{ font-family:var(--font-display); font-size:18px; font-weight:700; color:var(--ivory); }
.team-role{ font-size:12px; color:var(--muted-dark); margin-top:3px; }
.team-badge{ width:34px; height:34px; flex:none; }

/* ---------- MISSION ---------- */
.about-mission{ background:var(--ink); color:var(--ivory); padding:80px 0; overflow:hidden; }
.about-mission-inner{ position:relative; max-width:960px; margin-inline:auto; text-align:center; }
.about-mission-title{ font-family:var(--font-display); font-weight:700; font-size:50px; line-height:1.12; letter-spacing:-1px; text-transform:capitalize; color:var(--ivory); }
.about-mission-title .g{ color:var(--gold); }
.about-mission-text{ color:var(--muted-dark); font-size:16px; line-height:1.7; margin-top:20px; max-width:760px; margin-inline:auto; }
.about-mission .btn{ margin-top:30px; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:1200px){
  .about-hero-title{ font-size:46px; }
  .about-values-grid{ grid-template-columns:repeat(2,1fr); }
  .about-team-grid{ grid-template-columns:repeat(3,1fr); }
  .about-mission-title{ font-size:38px; }
}
@media (max-width:900px){
  .about-team-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
  .about-hero{ background-image:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.9) 62%),
                   url('../assets/images/about/rectangle-240647831.png');
    background-position:center top; background-size:cover; }
  .about-hero-inner{ padding-block:56px 64px; min-height:0; }
  .about-hero-title{ font-size:34px; }
  .about-values-grid{ grid-template-columns:1fr; max-width:420px; margin:0 auto; }
  .about-team-grid{ grid-template-columns:1fr; max-width:360px; margin:0 auto; }
  .about-mission-title{ font-size:30px; }
}