/* ====================================================================
   About page (Scalebiz) — hero fit, philosophy, why-grid tint, team.
   Everything else on the page comes from the shared components in
   homepage.css (editorial hero, sb-eyebrow/sb-reveal, edge-card grid,
   split CTA). Built from existing tokens only.
   ==================================================================== */

/* --- 1. Hero: exactly one screen under the 70px sticky nav, content
   centred; the next section starts at the fold and never bleeds in --- */
.hero--about{min-height:calc(100svh - 70px);display:flex;align-items:center}
.hero--about .container{width:100%}
/* Ring sized to hug "Two people." (two words, wider than the homepage's
   single circled word) */
.hero--about .ed-circle{width:clamp(230px,25vw,350px);height:clamp(85px,9vw,128px)}
@media (max-width:480px){.hero--about .ed-circle{width:clamp(200px,58vw,250px);height:clamp(88px,26vw,108px)}}
/* homepage.css pulls the next section up 4rem on mobile (.hero
   margin-bottom:-4rem) — the about hero must end at the fold instead */
@media (max-width:768px){.hero--about{margin-bottom:0}}
@media (max-width:480px){.hero--about .ed-link{margin-bottom:0}}

/* --- 2. Our Philosophy: plain and typographic --- */
.about-philosophy{background:#fff;padding:clamp(72px,9vw,110px) 0}
.about-philosophy__inner{max-width:820px;margin:0 auto;padding:0 var(--gutter)}
.about-philosophy h2{font-family:"Playfair Display",Georgia,serif;font-size:2.4rem;font-weight:600;color:var(--text-heading);letter-spacing:.02em;text-align:left;margin:0 0 2rem}
.about-philosophy p{font-size:1.2rem;color:var(--text-muted);line-height:1.75;margin:0 0 1.6rem;max-width:62ch}
.about-philosophy p:last-child{margin-bottom:0}
.about-philosophy__closer{color:var(--text-heading);font-weight:600;border-left:4px solid var(--primary-blue);padding-left:1.5rem}
@media (max-width:768px){
.about-philosophy h2{font-size:1.8rem;margin-bottom:1.5rem}
.about-philosophy p{font-size:1.05rem;line-height:1.65}
.about-philosophy__closer{padding-left:1.1rem}
}

/* --- 3. Why Scalebiz: tint the reused edge-card section so it reads
   as its own band between the two white sections --- */
.about-why{background:linear-gradient(180deg,#fff 0,#f8f9fb 100%)}

/* --- 4. Team: two large portraits (skiper79 treatment, adapted).
   The base styles below ARE the fallback: static, full colour, all
   text readable — what mobile, prefers-reduced-motion, no-JS and a
   failed GSAP download all get. about.js layers the scroll scale-in
   on top (desktop + motion-safe only), and the grayscale/hover
   treatment is gated to the same audience below. --- */
.about-team{background:#fff;padding:80px 0 100px;scroll-margin-top:80px}
.about-team__wrapper{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter)}
.team-duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.75rem,4vw,3.5rem);max-width:980px;margin:0 auto}
/* isolation scopes the caption's blend mode to the image/slot behind
   it; no z-index anywhere in here — a z-indexed ancestor would form
   its own isolated group and cut the text off from its backdrop,
   leaving it plain white */
.team-portrait__media{position:relative;aspect-ratio:3/4;border-radius:20px;overflow:hidden;background:#efece5;box-shadow:0 10px 30px rgba(11,77,255,.08);isolation:isolate}
.team-portrait__media img{width:100%;height:100%;object-fit:cover;display:block}
/* blend-mode text over the image: white in difference mode inverts
   whatever sits behind it, so it stays legible on photo and empty
   slot alike. The caption carries its own readability scrim (not
   blended) over photos; the placeholder slot drops it so the text
   inverts against the light slot instead */
.team-portrait__caption{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:.15rem;padding:4rem 1.6rem 1.5rem;background:linear-gradient(180deg,transparent,rgba(22,22,22,.55))}
.team-portrait__name{font-family:"Playfair Display",Georgia,serif;font-size:clamp(1.7rem,2.6vw,2.4rem);font-weight:600;line-height:1.15;color:#fff;mix-blend-mode:difference}
.team-portrait__role{font-family:Manrope,sans-serif;font-size:.95rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#fff;mix-blend-mode:difference}
.team-portrait__bio{font-size:1rem;color:var(--text-muted);line-height:1.65;margin:1.25rem 0 0;max-width:44ch}
/* placeholder slot: clearly a slot, not a design choice */
.team-portrait__photo-slot{position:absolute;inset:14px;border:2px dashed var(--chip-border);border-radius:12px;display:flex;align-items:center;justify-content:center}
/* grayscale with hover reveal — desktop pointers, motion-safe only;
   everyone else keeps full colour */
@media (min-width:1025px) and (prefers-reduced-motion:no-preference){
.team-portrait__media img{filter:grayscale(1);transition:filter .5s var(--e-out)}
.team-portrait:hover .team-portrait__media img{filter:grayscale(0)}
}
/* bridge: hide the portraits only while about.js is downloading GSAP
   (the class is added on desktop + motion-safe only, and removed if
   the download fails) */
.team-motion .team-portrait{opacity:0}
@media (max-width:900px){
.about-team{padding:56px 0 72px}
.team-duo{grid-template-columns:1fr;gap:2.5rem;max-width:480px}
}

/* --- Reduced motion: settle everything instantly --- */
@media (prefers-reduced-motion:reduce){
.team-motion .team-portrait{opacity:1}
.team-portrait__media img{filter:none;transition:none}
}