/* /team.html (+ /en/team.html) — Team / About. Loaded only on that page.
   Uses the shared tokens + the .team / .team__grid / .team__card rules
   from main.css; this file adds the page hero + the company-story block
   and bumps the portraits up a notch from the home teaser. */
@layer reset, base, components, utilities;

@layer components{

  /* Page hero — a clean heading line on a token surface. */
  .team-hero{padding-block:clamp(20px,3vw,32px) clamp(40px,6vw,64px);background:var(--c-bg);color:var(--c-text)}
  .team-hero__inner{max-width:760px}
  .team-hero__eyebrow{margin:0 0 14px;color:var(--c-accent);font-size:13px;letter-spacing:.04em}
  .team-hero h1{margin:0 0 14px;font-size:clamp(1.9rem,4.5vw,2.8rem);font-weight:700;letter-spacing:-.01em;line-height:1.1;color:var(--c-text)}
  .team-hero__intro{margin:0;color:var(--c-text-muted);font-size:clamp(1.05rem,1.6vw,1.2rem);line-height:1.6}

  /* Company story — a measured prose column on the surface tone. */
  .story{padding-block:var(--section-pad);background:var(--c-surface);color:var(--c-text)}
  .story__inner{max-width:760px}
  .story h2{margin:0 0 16px;font-size:clamp(1.4rem,2.8vw,1.9rem);font-weight:700;letter-spacing:-.01em;color:var(--c-text)}
  .story p{margin:0 0 16px;color:var(--c-text-muted);font-size:clamp(1rem,1.5vw,1.1rem);line-height:1.75}
  .story p:last-child{margin:0}
  .story a{color:var(--c-accent);text-decoration:none}
  .story a:hover{text-decoration:underline}

  /* Team grid — same cards as the home teaser, just larger portraits and a
     bit more breathing room (this is the destination, not a teaser). */
  .team-page .team{background:var(--c-bg)}
  .team-page .team__grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(20px,2.6vw,32px)}
  .team-page .team__card{padding:26px 18px}
  .team-page .team__card img{width:164px;height:164px;margin:0 0 18px}
  .team-page .team__card h3{font-size:18px}
  .team-page .team__role{font-size:13px;margin:0 0 12px}
  .team-page .team__quote{font-size:14px;line-height:1.6}

  /* A small "where we fly" recap link back to the home section. */
  .team-back{padding-block:clamp(40px,6vw,64px) clamp(56px,8vw,96px);background:var(--c-bg)}
  .team-back__inner{max-width:760px}
  .team-back p{margin:0;color:var(--c-text-muted);font-size:15.5px;line-height:1.7}
  .team-back a{color:var(--c-accent);font-weight:600;text-decoration:none}
  .team-back a:hover{text-decoration:underline}

}