/* ==========================================================================
   ABOUT.CSS — page-specific styles only.
   Mobile-first; breakpoints layered up through tablet, laptop, desktop.
   (.timeline itself lives in assets/css/animations.css as a shared motion
   primitive — this file only positions it on the page.)
   ========================================================================== */

/* ===================== FOUNDER HERO (split editorial, founder-first) ===================== */
/* Background is intentionally transparent — the site-wide fixed video
   (rendered in header.php whenever a hero video is set) shows through
   directly; this section adds no image/color layer of its own. */
.founder-hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column;
  padding:130px 20px 48px;
  color:var(--paper);
}
.founder-hero__content{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:flex-start;
  max-width:560px;
}
.founder-hero__content > *{ opacity:0; animation:founder-fade-up .8s var(--ease-reveal, var(--ease)) both; }
.founder-hero .founder-hero__eyebrow{ color:#a3ff47 !important; animation-delay:.05s; }
.founder-hero__eyebrow::before{ background:#a3ff47; }
.founder-hero .founder-hero__name{
  font-size:clamp(2.6rem, 1.9rem + 4.2vw, 5.2rem); line-height:0.95; letter-spacing:-0.01em;
  margin:16px 0 6px; color:var(--paper); text-wrap:balance;
  text-shadow:0 4px 24px rgba(0,0,0,0.4);
  animation-delay:.14s;
}
.founder-hero .founder-hero__name-first, .founder-hero .founder-hero__name-last{ color:inherit; }
.founder-hero .founder-hero__title{
  display:block; font-family:var(--font-label); font-size:0.85rem; letter-spacing:0.08em; text-transform:uppercase;
  color:rgba(247,246,241,0.68); margin-bottom:20px;
  animation-delay:.22s;
}
.founder-hero .founder-hero__desc{
  font-size:1.04rem; line-height:1.62; color:rgba(247,246,241,0.76);
  max-width:44ch; margin-bottom:26px;
  animation-delay:.3s;
}
.founder-hero__social{ display:flex; gap:12px; animation-delay:.38s; }
.founder-hero__social .social-icon{ animation:founder-fade-up .6s var(--ease-reveal, var(--ease)) both; }
.founder-hero__social .social-icon:nth-child(1){ animation-delay:.42s; }
.founder-hero__social .social-icon:nth-child(2){ animation-delay:.5s; }
.founder-hero__social .social-icon:nth-child(3){ animation-delay:.58s; }
.founder-hero__social .social-icon:nth-child(4){ animation-delay:.66s; }
@keyframes founder-fade-up{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:translateY(0); } }

.founder-hero__media{
  position:relative; z-index:1;
  margin-top:36px;
  height:56vh; max-height:520px;
  display:flex; justify-content:center;
}
.founder-hero__media::before{
  /* ambient glow behind the transparent cutout — bigger + softer than a
     rectangular-photo scrim would need, since there's no background edge
     left to hide, only the cutout's own edges to blend. */
  content:''; position:absolute; left:50%; bottom:10%; translate:-50% 0;
  width:92%; height:80%; z-index:-1; border-radius:50%;
  background:radial-gradient(circle, rgba(163,255,71,0.34) 0%, rgba(92,143,34,0.16) 42%, transparent 72%);
  filter:blur(44px); pointer-events:none;
}
.founder-hero__media::after{
  /* soft grounding shadow so the cutout doesn't look like it's floating */
  content:''; position:absolute; left:50%; bottom:2%; translate:-50% 0;
  width:46%; height:7%; z-index:-1; border-radius:50%;
  background:radial-gradient(ellipse, rgba(0,0,0,0.5) 0%, transparent 75%);
  filter:blur(10px); pointer-events:none;
}
.founder-hero__media img{
  height:100%; width:auto; max-width:100%;
  object-fit:contain; object-position:bottom center;
  display:block;
  filter:
    drop-shadow(0 26px 40px rgba(0,0,0,0.45))
    drop-shadow(0 0 34px rgba(163,255,71,0.22))
    drop-shadow(0 -1px 0 rgba(255,255,255,0.1))
    saturate(1.04);
  animation:founder-float 7s ease-in-out infinite, founder-media-in 1s var(--ease-reveal, var(--ease)) .1s both;
  /* Feathers the cutout's own bottom edge into the glow behind it, instead
     of ending in a hard crop line — the glow/shadow pseudo-elements handle
     the space around the photo, this handles the photo's own boundary. */
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 88%, transparent 100%);
  mask-image:linear-gradient(to bottom, #000 0%, #000 88%, transparent 100%);
}
@keyframes founder-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
@keyframes founder-media-in{ from{ opacity:0; transform:translateY(24px) scale(0.98); } to{ opacity:1; transform:translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce){
  .founder-hero__content > *, .founder-hero__social .social-icon, .founder-hero__media img{ animation:none !important; opacity:1 !important; transform:none !important; }
}

.founder-hero__scroll-cue{
  position:relative; z-index:2; align-self:center;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  margin-top:auto; padding-top:28px;
  animation:founder-breathe 2.6s ease-in-out infinite;
}
.founder-hero__scroll-cue .founder-hero__scroll-label{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-label); font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase;
  color:rgba(247,246,241,0.45);
}
.founder-hero__scroll-dot{ display:none; }
.founder-hero__scroll-arrow{ display:none; }
@media (prefers-reduced-motion: reduce){ .founder-hero__scroll-cue, .founder-hero__scroll-arrow{ animation:none; } }
@keyframes founder-breathe{ 0%,100%{ opacity:0.35; } 50%{ opacity:0.8; } }
@keyframes founder-arrow-bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(4px); } }

@media (min-width:700px){
  .founder-hero{ padding:140px 60px 56px; }
  .founder-hero__media{ height:62vh; max-height:640px; }
}

/* ---- Desktop only (≥980px) — mobile/tablet composition above is untouched.
   Desktop gets its own, bigger, more connected composition: wider content
   column, dramatically larger name, and a much larger founder photo so the
   two halves read as one balanced piece instead of two islands. ---- */
@media (min-width:980px){
  .founder-hero{
    flex-direction:row; align-items:center; justify-content:center;
    padding:120px clamp(40px, 6vw, 110px) 40px;
    gap:clamp(48px, 5vw, 96px);
  }
  .founder-hero__content{ max-width:clamp(480px, 36vw, 620px); flex-shrink:0; }
  .founder-hero__eyebrow{ margin-bottom:4px; }
  .founder-hero__name{
    font-size:clamp(4.6rem, 2.6rem + 6vw, 7.6rem); line-height:0.9;
    margin:14px 0 10px;
  }
  .founder-hero .founder-hero__name-last{ color:#a3ff47; }
  .founder-hero__title{ font-size:0.92rem; margin-bottom:24px; }
  .founder-hero__desc{ font-size:1.15rem; line-height:1.65; max-width:50ch; margin-bottom:32px; }

  .founder-hero__social{ gap:12px; }
  .founder-hero__social .social-icon{
    width:auto; height:auto; padding:10px 19px 10px 12px; border-radius:999px;
    display:inline-flex; align-items:center; gap:9px;
    background:rgba(255,255,255,0.03);
    -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
    box-shadow:0 2px 10px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.08);
    transition:border-color .35s var(--ease), color .35s var(--ease), background .35s var(--ease), transform .3s var(--ease), box-shadow .35s var(--ease);
  }
  .founder-hero__social .social-icon svg{ flex-shrink:0; transition:transform .35s var(--ease); }
  .founder-hero__social .social-icon::after{
    content:attr(aria-label); font-family:var(--font-label); font-size:0.82rem; white-space:nowrap;
  }
  .founder-hero__social .social-icon:hover{
    border-color:#a3ff47; color:#a3ff47; background:rgba(163,255,71,0.1); transform:translateY(-3px);
    box-shadow:0 10px 26px rgba(163,255,71,0.22), 0 0 0 1px rgba(163,255,71,0.14), inset 0 1px 0 rgba(255,255,255,0.1);
  }
  .founder-hero__social .social-icon:hover svg{ transform:scale(1.08); }
  .founder-hero__social .social-icon:active{ transform:translateY(-1px) scale(0.97); }

  .founder-hero__media{
    flex:0 1 auto; width:clamp(420px, 40vw, 700px);
    height:min(90vh, 900px); max-height:none;
    align-self:flex-end; justify-content:center;
  }
  .founder-hero__media img{ object-position:bottom center; }

  .founder-hero__scroll-cue{ position:absolute; left:50%; bottom:36px; translate:-50% 0; margin-top:0; }
  .founder-hero__scroll-dot{
    display:inline-block; width:6px; height:6px; border-radius:50%; background:#a3ff47; flex-shrink:0;
  }
  .founder-hero__scroll-arrow{
    display:flex; align-items:center; justify-content:center;
    width:34px; height:34px; border-radius:50%; border:1px solid rgba(247,246,241,0.28); color:#a3ff47;
    animation:founder-arrow-bob 1.8s ease-in-out infinite;
  }
}

/* Founder-hero desktop sizing beyond this base 980px tier (content/media
   width past 1200px, and the 1600px+ tier) now lives exclusively in
   desktop-enhancements.css — this file only carries the structural
   row-layout breakpoint. Convention going forward: page CSS = base
   responsive styles, desktop-enhancements.css = desktop override layer. */

/* ===================== TEAM HERO (full-screen, dark) ===================== */
.team-hero{
  position:relative; overflow:hidden;
  min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  background:var(--ink); color:var(--paper);
  padding:150px 0 60px;
  --octg-transition:800ms; --octg-anim-speed:1; --octg-glow:0.55;
}
.team-hero:not(:has(.team-carousel)){ justify-content:center; padding-bottom:150px; }
/* Let the site-wide fixed background video show through the globe hero
   instead of the solid --ink fill (video only renders when site--dark is
   active, so a non-dark fallback still needs the solid background). The
   founder hero's own photo is always its background, so it needs no fix. */
.site--dark .team-hero{ background:transparent; }
.breadcrumb--on-dark{ color:rgba(247,246,241,0.5); position:relative; z-index:3; }
.breadcrumb--on-dark a{ color:rgba(247,246,241,0.7); }
.breadcrumb--on-dark span[aria-current]{ color:var(--paper); }

/* "What We Believe" — same spaced, rounded-card look as the industries
   page. .why-grid/.why-item is shared with the homepage's "Why Us"
   section, which keeps its existing hairline-touching-grid look
   unchanged; this only applies on About. Background/blur already comes
   from the existing .site--dark .why-item rule in components.css. */
.page-about .why-grid{ gap:20px; background:transparent; border:none; }
@media (min-width:640px){ .page-about .why-grid{ gap:24px; } }
.page-about .why-item{
  border-radius:12px; border:1px solid var(--paper-line);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.page-about .why-item:hover{ transform:translateY(-6px); box-shadow:0 12px 30px rgba(0,0,0,0.04); border-color:var(--green-deep); }
.site--dark .page-about .why-item{ border-color:rgba(255,255,255,0.08); }
.site--dark .page-about .why-item:hover{ border-color:var(--green); box-shadow:0 12px 30px rgba(0,0,0,0.3); }

.team-hero__content{ position:relative; z-index:4; max-width:680px; text-align:center; margin-bottom:64px; }
.team-hero__content .eyebrow{ color:var(--green); justify-content:center; }
.team-hero__content .eyebrow::before{ background:var(--green); }
.team-hero__content h2{ color:var(--paper); margin:20px 0 18px; text-shadow:0 2px 10px rgba(21,21,15,0.8); }
.team-hero__content .lead{ color:rgba(247,246,241,0.68); margin-inline:auto; text-shadow:0 2px 8px rgba(21,21,15,0.8); }

#teamHeroParticles{ z-index:1; }

.globe-scene{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(76vw, 680px); height:min(76vw, 680px);
  z-index:2; opacity:0.75;
}
.globe-scene::before{
  content:''; position:absolute; inset:-10%; border-radius:50%; z-index:-1;
  background:radial-gradient(circle, rgba(163,255,71,var(--octg-glow,0.55)) 0%, rgba(92,143,34,calc(var(--octg-glow,0.55) * 0.35)) 38%, transparent 70%);
  filter:blur(28px); pointer-events:none;
}
#teamGlobe{ display:block; width:100%; height:100%; }

/* ---------- Carousel ---------- */
.team-carousel{ position:relative; z-index:3; width:100%; padding-top:20px; }
.team-carousel__stage{
  position:relative; height:520px; perspective:1400px;
}
.team-carousel__arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:6;
  width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(247,246,241,0.25); color:rgba(247,246,241,0.75);
  background:rgba(15,15,10,0.45); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease), transform .2s var(--ease);
}
.team-carousel__arrow--prev{ left:2px; }
.team-carousel__arrow--next{ right:2px; }
.team-carousel__arrow:hover{ border-color:#a3ff47; color:#a3ff47; background:rgba(163,255,71,0.1); }
.team-carousel__arrow:active{ transform:translateY(-50%) scale(0.92); }
.team-carousel__arrow:focus-visible{ outline:2px solid #a3ff47; outline-offset:2px; }

.team-card{
  position:absolute; top:50%; left:50%; width:300px; height:480px;
  margin-left:-150px; margin-top:-240px;
  background:rgba(15,15,10,0.5);
  border:1px solid rgba(255,255,255,0.1);
  -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px);
  border-radius:18px; padding:26px 24px 28px; text-align:center;
  display:flex; flex-direction:column; align-items:center;
  box-shadow:0 20px 50px rgba(0,0,0,0.35);
  transition:transform var(--octg-transition, 800ms) cubic-bezier(.22,.68,.32,1), opacity var(--octg-transition, 800ms) cubic-bezier(.22,.68,.32,1), border-color .4s var(--ease), box-shadow .4s var(--ease);
  will-change:transform, opacity;
}
.team-card.is-active{
  border-color:rgba(163,255,71,0.4);
  box-shadow:0 0 50px rgba(163,255,71,0.16), 0 25px 60px rgba(0,0,0,0.45);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .team-card{ background:rgba(15,15,10,0.94); }
}
.team-card__frame{
  position:relative; width:100%; height:190px; margin-bottom:16px; flex-shrink:0;
  display:flex; align-items:flex-end; justify-content:center;
}
.team-card__frame::before{
  content:''; position:absolute; left:50%; bottom:4%; translate:-50% 0;
  width:78%; height:72%; z-index:-1; border-radius:50%;
  background:radial-gradient(circle, rgba(163,255,71,0.3) 0%, transparent 70%);
  filter:blur(22px); opacity:0; transition:opacity .5s var(--ease);
}
.team-card.is-active .team-card__frame::before{ opacity:1; }
.team-card__frame img{
  position:relative; height:100%; width:auto; max-width:100%; object-fit:contain;
  filter:drop-shadow(0 12px 18px rgba(0,0,0,0.4));
  /* Same bottom-edge feather as the founder photo — softens the cutout's
     own crop line instead of leaving it hard against the card background. */
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 85%, transparent 100%);
  mask-image:linear-gradient(to bottom, #000 0%, #000 85%, transparent 100%);
}
.team-card .team-card__name{ color:var(--paper); font-size:1.2rem; margin-bottom:4px; }
.team-card .team-card__title{ display:block; font-family:var(--font-label); font-size:0.78rem; letter-spacing:0.06em; text-transform:uppercase; color:#a3ff47; margin-bottom:14px; }
.team-card .team-card__bio{
  font-size:0.87rem; color:rgba(247,246,241,0.64); line-height:1.55; margin-bottom:16px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.team-card__social{ display:flex; gap:14px; margin-top:auto; }
.social-icon{
  position:relative;
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(247,246,241,0.18); border-radius:50%; color:rgba(247,246,241,0.72);
  background:rgba(255,255,255,0.03);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:0 2px 8px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.08);
  transition:border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.social-icon svg{ width:14px; height:14px; transition:transform .3s var(--ease); }
.social-icon:hover{
  border-color:#a3ff47; color:#a3ff47; background:rgba(163,255,71,0.08);
  box-shadow:0 4px 16px rgba(163,255,71,0.25), 0 0 0 1px rgba(163,255,71,0.15), inset 0 1px 0 rgba(255,255,255,0.1);
  transform:translateY(-2px);
}
.social-icon:hover svg{ transform:scale(1.08); }
.social-icon:active{ transform:translateY(-1px) scale(0.96); }

.team-carousel__dots{ display:flex; justify-content:center; gap:10px; margin-top:24px; }
.team-dot{ width:8px; height:8px; border-radius:50%; background:rgba(247,246,241,0.25); transition:background .3s, transform .3s; }
.team-dot:hover{ background:rgba(247,246,241,0.5); }
.team-dot.is-active{ background:#a3ff47; transform:scale(1.3); }
.team-dot:focus-visible{ outline:2px solid #a3ff47; outline-offset:3px; }

@media (prefers-reduced-motion: reduce){
  .team-card{ transition:opacity .3s linear; }
}

/* ---------- Stats bar ---------- */
.team-stats{
  position:relative; z-index:3; width:min(94vw, 1000px); margin:56px auto 0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.08); border-radius:18px; overflow:hidden;
}
.team-stats__item{
  background:rgba(15,15,10,0.55);
  padding:26px 16px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px;
}
.team-stats__item svg{ width:24px; height:24px; color:#a3ff47; margin-bottom:2px; }
.team-stats .team-stats__value{ font-family:var(--font-display); font-weight:800; font-size:1.7rem; color:var(--paper); }
.team-stats .team-stats__label{ font-family:var(--font-label); font-size:0.68rem; letter-spacing:0.05em; text-transform:uppercase; color:rgba(247,246,241,0.55); }
@media (min-width:700px){ .team-stats{ grid-template-columns:repeat(4,1fr); margin-top:64px; } }

/* ===================== STORY / TIMELINE / VALUES (unchanged page body) ===================== */
.about-story{ padding-top:96px; }
.about-story__grid{ display:grid; gap:40px; }
.about-story__frame{ aspect-ratio:4/3; }
.about-story__copy h2{ margin-bottom:20px; }
.about-story__copy .lead{ margin-bottom:20px; max-width:none; }

/* ===================== TABLET (700px+) ===================== */
@media (min-width:700px){
  .team-card{ width:320px; height:500px; margin-left:-160px; margin-top:-250px; }
  .team-card__frame{ height:200px; }
  .team-carousel__stage{ height:540px; }
  .team-carousel__arrow{ left:12px; }
  .team-carousel__arrow--next{ right:12px; left:auto; }
}

/* ===================== LAPTOP (940px+) ===================== */
@media (min-width:940px){
  .team-hero{ padding:170px 0 80px; }
  .about-story{ padding-top:150px; }
  .about-story__grid{ grid-template-columns:1fr 1.1fr; gap:70px; align-items:center; }
  .team-carousel__stage{ height:560px; }

  /* Timeline (".timeline" is shared with process.php/case-study.php, which
     keep their existing narrow single-column look — this widened,
     image-beside-text row layout is scoped to the About page only, where
     the plain 760px-wide left-flush column left most of a wide screen
     empty. */
  .page-about .timeline{ max-width:1100px; }
  .page-about .timeline-item{
    display:grid; grid-template-columns:170px 1fr; column-gap:32px; align-items:start;
    padding-bottom:56px;
  }
  .page-about .timeline-item__frame{ grid-row:1/-1; width:170px; height:170px; margin-bottom:0; }
  .page-about .timeline-item__year,
  .page-about .timeline-item h3,
  .page-about .timeline-item p{ grid-column:2; }
  .page-about .timeline-item p{ max-width:60ch; }
  /* Container width + item sizing beyond this 940px tier now lives in
     desktop-enhancements.css (About Page section). */
}

/* ===================== DESKTOP (1300px+) — team-card only; founder-hero
   and timeline desktop sizing moved to desktop-enhancements.css ===================== */
@media (min-width:1300px){
  .team-card{ width:340px; height:520px; margin-left:-170px; margin-top:-260px; padding:32px 28px 30px; }
  .team-card__frame{ height:212px; }
  .team-carousel__arrow{ width:48px; height:48px; left:24px; }
  .team-carousel__arrow--next{ right:24px; left:auto; }
}