/* ========================================================================
   WOLF ABOUT PAGE v38
   Scoped to .page-about only. Does not target or rebuild header/footer.
   Typography, weights, spacing, and colors are locked to the provided design.
   ======================================================================== */
.page-about .about-page-root,
.page-about .about-page-root *{box-sizing:border-box;}
.page-about .about-page-root{
  --about-orange:#ff6800;
  --about-white:#f7f7f7;
  --about-muted:rgba(255,255,255,.66);
  --about-soft:rgba(255,255,255,.45);
  --about-black:#020202;
  background:#020202;
  color:var(--about-white);
  overflow:hidden;
  font-family:"Montserrat", Arial, sans-serif;
  font-weight:200;
  letter-spacing:0;
}
.page-about .about-wrap{
  width:min(1280px,calc(100% - 96px));
  margin:0 auto;
  position:relative;
  z-index:3;
}
.page-about .about-highlight,
.page-about .about-title .about-highlight{color:var(--about-orange)!important;}
.page-about .about-title,
.page-about .about-story .about-title,
.page-about .about-story .about-title *:not(.about-highlight){color:#ffffff!important;}

/* Hero: uses the supplied finger/wolf background image as a real background. */
.page-about .about-hero{
  position:relative;
  min-height:760px;
  padding:0 0 92px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background-color:#010101;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center top;
  isolation:isolate;
}
.page-about .about-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:
    radial-gradient(circle at 50% 28%, rgba(255,104,0,.16), transparent 23%),
    linear-gradient(180deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,.03) 48%, #040404 98%);
  pointer-events:none;
}
.page-about .about-pill{
  position:absolute;
  left:34px;
  top:34px;
  z-index:3;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:9px 17px;
  border:1px solid rgba(255,104,0,.62);
  border-radius:999px;
  color:#fff;
  font-family:"Montserrat", Arial, sans-serif;
  font-size:13px;
  font-weight:700;
  line-height:1;
  letter-spacing:1.9px;
  text-transform:uppercase;
  background:rgba(8,8,8,.72);
  box-shadow:0 0 24px rgba(255,104,0,.12), inset 0 0 18px rgba(255,104,0,.03);
}
.page-about .about-pill::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--about-orange);
  box-shadow:0 0 12px rgba(255,104,0,.92);
}
.page-about .about-hero-content{
  max-width:720px;
  margin:305px auto 0;
  position:relative;
  z-index:2;
}
.page-about .about-hero h1,
.page-about .about-hero h2{
  margin:0;
  color:#fff;
  font-family:"Montserrat", Arial, sans-serif;
  font-size:clamp(34px,4.25vw,60px);
  line-height:1.03;
  font-weight:700;
  letter-spacing:-1.8px;
  text-transform:none;
}
.page-about .about-hero h1 span{color:var(--about-orange)!important;}
.page-about .about-hero p{
  margin:30px auto 0;
  max-width:650px;
  color:rgba(255,255,255,.70);
  font-family:"Montserrat", Arial, sans-serif;
  font-size:16px;
  line-height:1.65;
  font-weight:200;
  letter-spacing:-.05px;
}
.page-about .about-divider{
  position:relative;
  width:160px;
  height:1px;
  margin:31px auto 0;
  background:linear-gradient(90deg,transparent,rgba(255,104,0,.9),transparent);
}
.page-about .about-divider::after{
  content:"⌄";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-52%);
  color:var(--about-orange);
  background:#030303;
  font-size:20px;
  line-height:1;
  padding:0 13px;
}

/* Story section */
.page-about .about-story{
  position:relative;
  padding:56px 0 110px;
  background:linear-gradient(180deg,#090a0e 0%, #050508 52%, #030304 100%);
  isolation:isolate;
  overflow:hidden;
}
.page-about .about-story::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background-image:var(--about-story-bg);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center center;
  opacity:1;
  filter:brightness(.78) contrast(1.06);
  pointer-events:none;
}
.page-about .about-story::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg,rgba(3,3,5,.18) 0%, rgba(3,3,5,.10) 38%, rgba(3,3,5,.36) 100%);
  pointer-events:none;
}
.page-about .about-story-grid{
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  gap:64px;
  align-items:center;
}
.page-about .about-section-mark{
  display:block;
  width:34px;
  height:2px;
  margin:0 0 38px;
  background:var(--about-orange);
}
.page-about .about-title{
  margin:0;
  color:#fff;
  font-family:"Montserrat", Arial, sans-serif;
  font-size:clamp(42px,5vw,72px);
  line-height:1.05;
  font-weight:700;
  letter-spacing:-2.2px;
  text-transform:none;
}
.page-about .about-copy{
  margin-top:32px;
  max-width:560px;
  color:rgba(255,255,255,.74);
  font-family:"Montserrat", Arial, sans-serif;
  font-size:15px;
  line-height:1.72;
  font-weight:200;
}
.page-about .about-copy p{margin:0 0 23px;}
.page-about .about-copy strong{color:var(--about-orange);font-weight:700;}
.page-about .about-story-image{
  position:relative;
  min-height:520px;
  overflow:hidden;
  border-radius:0;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center center;
  box-shadow:0 34px 90px rgba(0,0,0,.50);
}
.page-about .about-story-image::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.22),rgba(0,0,0,.03));
  pointer-events:none;
}
.page-about .about-signature{
  margin-top:70px;
  color:rgba(255,255,255,.18);
  font-family:"Montserrat", Arial, sans-serif;
  font-size:25px;
  font-weight:300;
  line-height:1.2;
  letter-spacing:.1px;
}

/* Team: the supplied chart/market image is a real background layer above the existing dark color. */
.page-about .about-team{
  position:relative;
  padding:48px 0 58px;
  background-color:#020202;
  background-image:linear-gradient(180deg,#020202 0%,#030303 52%,#020202 100%);
  isolation:isolate;
  overflow:hidden;
}
.page-about .about-team::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  width:100%;
  height:680px;
  z-index:0;
  background-image:var(--about-team-bg);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center top;
  opacity:.62;
  filter:brightness(.88) contrast(1.12);
  pointer-events:none;
}
.page-about .about-team::after{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:720px;
  z-index:1;
  background:linear-gradient(180deg,rgba(2,2,2,.06) 0%,rgba(2,2,2,.36) 50%,#020202 100%);
  pointer-events:none;
}
.page-about .about-team-intro{
  position:relative;
  z-index:3;
  max-width:690px;
  margin-bottom:26px;
}
.page-about .about-eyebrow{
  margin:0 0 26px;
  color:var(--about-orange);
  font-family:"Montserrat", Arial, sans-serif;
  font-size:13px;
  font-weight:700;
  line-height:1;
  letter-spacing:.8px;
  text-transform:uppercase;
}
.page-about .about-team-intro p{
  margin:18px 0 0;
  max-width:590px;
  color:rgba(255,255,255,.72);
  font-family:"Montserrat", Arial, sans-serif;
  font-size:17px;
  line-height:1.65;
  font-weight:200;
}
.page-about .about-team-grid{
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}
 .page-about .about-team-card{
  position:relative;
  min-height:430px;
  overflow:hidden;
  border-radius:18px;
  background:#0b0b0b;
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 26px 80px rgba(0,0,0,.44);
  transition:transform .32s ease, border-color .32s ease, box-shadow .32s ease;
}
.page-about .about-team-card::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--member-image);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center top;
  filter:brightness(.52) saturate(.92);
  transform:scale(1);
  transition:filter .32s ease, transform .32s ease;
}
.page-about .about-team-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,.22) 36%,rgba(0,0,0,.70) 100%),
    radial-gradient(circle at 78% 62%,rgba(255,104,0,.16),transparent 36%);
  transition:background .32s ease;
}
.page-about .about-team-card:hover{
  transform:translateY(-8px);
  border-color:rgba(255,255,255,.18);
  box-shadow:0 34px 92px rgba(0,0,0,.58), 0 0 40px rgba(255,104,0,.08);
}
.page-about .about-team-card:hover::before{
  filter:brightness(.48) saturate(.94);
  transform:scale(1.035);
}
.page-about .about-team-card:hover::after{
  background:
    linear-gradient(180deg,rgba(0,0,0,.24) 0%,rgba(0,0,0,.34) 36%,rgba(0,0,0,.82) 100%),
    radial-gradient(circle at 76% 62%,rgba(255,104,0,.18),transparent 36%);
}
.page-about .about-team-card-content{
  position:absolute;
  left:30px;
  right:30px;
  bottom:24px;
  z-index:2;
  padding:0;
  text-align:left;
  transition:all .32s ease;
}
.page-about .about-team-card-content::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:96px;
  height:96px;
  border-radius:50%;
  background-image:var(--member-image);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center top;
  border:3px solid rgba(255,255,255,.34);
  box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 15px 35px rgba(0,0,0,.45);
  opacity:0;
  transform:translate(-50%,-42%) scale(.74);
  pointer-events:none;
  transition:opacity .32s ease, transform .32s ease;
}
.page-about .about-team-card:hover .about-team-card-content{
  left:40px;
  right:40px;
  bottom:20px;
  min-height:250px;
  padding:74px 34px 26px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:15px;
  background:linear-gradient(180deg,rgba(36,36,36,.58),rgba(10,10,10,.72));
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:inset 0 0 26px rgba(255,255,255,.035), 0 22px 60px rgba(0,0,0,.45);
  text-align:center;
}
.page-about .about-team-card:hover .about-team-card-content::before{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}
.page-about .about-card-line{
  display:block;
  width:28px;
  height:2px;
  margin:0 0 15px;
  background:var(--about-orange);
  transition:width .32s ease, margin .32s ease, opacity .32s ease;
}
.page-about .about-team-card:hover .about-card-line{
  width:100%;
  max-width:260px;
  margin:0 auto 19px;
  opacity:.78;
}
.page-about .about-team-card h3{
  margin:0;
  color:#fff;
  font-family:"Montserrat", Arial, sans-serif;
  font-size:24px;
  line-height:1.12;
  font-weight:700;
  letter-spacing:-.55px;
}
.page-about .about-team-card h4{
  margin:8px 0 14px;
  color:var(--about-orange);
  font-family:"Montserrat", Arial, sans-serif;
  font-size:15px;
  line-height:1.15;
  font-weight:700;
}
.page-about .about-team-card p{
  margin:0;
  color:rgba(255,255,255,.78);
  font-family:"Montserrat", Arial, sans-serif;
  font-size:13.5px;
  line-height:1.55;
  font-weight:200;
}
.page-about .about-linkedin{
  display:inline-flex;
  margin-top:18px;
  color:rgba(255,255,255,.62);
  font-family:"Montserrat", Arial, sans-serif;
  font-size:18px;
  font-weight:700;
  line-height:1;
  text-decoration:none;
}
.page-about .about-linkedin:hover{color:#fff;}

@media(max-width:1100px){
  .page-about .about-story-grid,
  .page-about .about-team-grid{grid-template-columns:1fr;}
  .page-about .about-story-image{min-height:420px;}
  .page-about .about-team-card{min-height:470px;}
  .page-about .about-team-card .about-team-card-content{left:34px;right:34px;bottom:24px;}
  .page-about .about-wrap{width:min(100% - 44px,1280px);}
  .page-about .about-team::before{width:100%;left:0;right:0;opacity:.48;height:560px;background-position:center top;}
}
@media(max-width:640px){
  .page-about .about-hero{min-height:650px;padding:0 0 72px;background-position:center top;}
  .page-about .about-pill{left:22px;top:22px;font-size:11px;padding:8px 13px;}
  .page-about .about-hero-content{margin-top:205px;}
  .page-about .about-hero p{font-size:15px;}
  .page-about .about-story{padding:54px 0 70px;}
  .page-about .about-title{font-size:42px;}
  .page-about .about-team-card{min-height:440px;}
  .page-about .about-team-card-content{left:22px;right:22px;bottom:24px;}
}
