/* =========================================================
   Noventra — About page (over-ons.html).
   Shared light-page blocks (hero, section heads, CTA card) are in light.css.
   ========================================================= */

/* ---- group photo below the hero ---- */
.about-photo{margin:0; border-radius:clamp(16px,2vw,26px); overflow:hidden; position:relative;
             box-shadow:0 40px 80px -48px rgba(13,14,17,.55)}
.about-photo img{display:block; width:100%; height:auto; aspect-ratio:2400/1250; object-fit:cover; object-position:center 62%}
.about-photo figcaption{position:absolute; left:clamp(.8rem,2vw,1.4rem); bottom:clamp(.8rem,2vw,1.4rem);
                        padding:.5rem .85rem; border-radius:999px; font-size:.78rem; font-weight:600; color:#fff;
                        background:rgba(13,14,17,.55); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
@media(max-width:600px){
  /* a taller crop on phones, otherwise the people get tiny */
  .about-photo img{aspect-ratio:4/3; object-position:center 70%}
  .about-photo figcaption{font-size:.68rem; padding:.4rem .7rem}
}

/* ---- the three founders, side by side ---- */
.team-grid{display:grid; gap:clamp(1rem,2vw,1.6rem); grid-template-columns:repeat(3, minmax(0,1fr))}
.team-card{display:flex; flex-direction:column; margin:0; background:var(--surface); border:1px solid var(--line);
           border-radius:clamp(16px,1.6vw,22px); overflow:hidden;
           transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s}
.team-card:hover{transform:translateY(-4px); box-shadow:0 30px 60px -36px rgba(13,14,17,.45)}
.team-portrait{position:relative; aspect-ratio:4/5; overflow:hidden; background:#e9e5df}
.team-portrait img{display:block; width:100%; height:100%; object-fit:cover; object-position:center 30%;
                   transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.team-card:hover .team-portrait img{transform:scale(1.035)}
.team-text{display:flex; flex-direction:column; flex:1; padding:clamp(1.3rem,2.2vw,1.8rem)}
.team-name{margin:0; font-size:clamp(1.25rem,1.8vw,1.5rem); line-height:1.15; letter-spacing:-.02em;
           font-weight:800; color:var(--ink)}
.team-role{margin:.35rem 0 1rem; font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
           color:var(--red)}
.team-text p:not(.team-role){margin:0 0 1.4rem; font-size:.95rem; line-height:1.72; color:var(--text)}
/* the e-mail address closes the card, at the same height in all three cards */
.team-mail{display:flex; align-items:center; gap:.7rem; margin-top:auto; padding-top:1.1rem; border-top:1px solid var(--line);
           font-size:.93rem; font-weight:600; text-decoration:none; overflow-wrap:anywhere}
.light-main a.team-mail{color:var(--ink)}
.light-main a.team-mail:hover{color:var(--red)}
.team-mail svg{width:30px; height:30px; padding:7px; flex:none; border-radius:50%; background:rgba(243,56,1,.1);
               fill:none; stroke:var(--red); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}

@media(max-width:979px){
  /* tablet: photo beside the story; phone: stacked */
  .team-grid{grid-template-columns:1fr}
  .team-card{flex-direction:row}
  .team-portrait{flex:0 0 clamp(190px,32vw,260px); aspect-ratio:auto; min-height:100%}
}
@media(max-width:600px){
  .team-card{flex-direction:column}
  .team-portrait{flex:none; aspect-ratio:4/5; min-height:0}
}

/* ---- shared story ---- */
.story{display:grid; gap:2rem 4rem}
.story-lead{margin:0; font-size:clamp(1.15rem,1.9vw,1.4rem); line-height:1.55; color:var(--ink); font-weight:600;
            letter-spacing:-.01em}
.story-body p{margin:0 0 1.1rem; line-height:1.78; color:var(--text)}
.story-body p:last-child{margin-bottom:0}
@media(min-width:960px){
  .story{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}
  .story-lead{position:sticky; top:calc(var(--nav-h) + 2rem); align-self:start}
}

.pillars{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(1rem,2vw,1.6rem);
         margin:clamp(2.6rem,5vw,4rem) 0 0; padding:0; list-style:none}
.pillars li{padding:clamp(1.3rem,2.2vw,1.8rem); border-radius:18px; background:var(--surface); border:1px solid var(--line)}
.pillars .num{display:block; margin-bottom:1.6rem; font-size:.78rem; font-weight:700; letter-spacing:.14em; color:var(--red)}
.pillars h3{margin:0 0 .5rem; font-size:1.12rem; letter-spacing:-.01em; color:var(--ink)}
.pillars p{margin:0; font-size:.93rem; line-height:1.65; color:var(--text)}
@media(max-width:760px){ .pillars{grid-template-columns:1fr} }

@media(prefers-reduced-motion:reduce){
  .team-card, .team-card:hover, .team-portrait img{transition:none; transform:none}
}