/* ============================================================
   Harrimont Team — the people page
   Loaded AFTER css/styles.css (reuses :root tokens, header/footer,
   .section, .btn, .partner-photo / .avatar, .eyebrow, .snum).
   No new colours, radii, shadows or fonts — tokens only.

   Each section has its own form on purpose:
   hero (dark, typographic) → partners (editorial hairline rows)
   → engineers (dark, centred trio) → staffing (one-line strip)
   → CTA band.
   ============================================================ */

/* ---------- hero ---------- */
.team-hero{
  position:relative;min-height:62vh;min-height:62svh;display:flex;align-items:center;overflow:hidden;color:var(--white);
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(200,164,106,.10), transparent 55%),
    linear-gradient(160deg,#0D1321 0%,#121b2c 58%,#0a0f1a 100%);
}
.team-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:64px 64px;mask-image:radial-gradient(circle at 74% 42%,#000,transparent 72%);
}
.team-hero .hero-motif{
  position:absolute;right:-8vw;top:50%;transform:translateY(-50%);
  width:min(60vw,640px);opacity:.5;pointer-events:none;z-index:0;
}
.team-hero .wrap{position:relative;z-index:2;padding-top:150px;padding-bottom:70px;max-width:62rem;}
.team-hero .eyebrow{margin-bottom:26px;}
.team-hero h1{
  font-size:clamp(2.3rem,5.6vw,4.1rem);font-weight:500;line-height:1.06;
  letter-spacing:-0.02em;margin-bottom:22px;max-width:24ch;
}
.team-hero h1 em{font-style:italic;color:var(--gold);font-weight:400;}
.team-lede{font-size:clamp(1.05rem,2vw,1.25rem);color:var(--gray-100);line-height:1.6;max-width:52ch;margin:0 0 34px;}
.team-hero .hero-cta{margin-bottom:clamp(26px,4vw,40px);}

/* headcount line under the CTA */
.team-count{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gray-100);font-weight:500;
}
.team-count .dot{width:4px;height:4px;border-radius:50%;background:var(--gold);}
.team-count .lbl{display:inline-flex;align-items:center;gap:9px;}
.team-count .lbl::before{content:"";width:6px;height:6px;border:1px solid var(--gold);transform:rotate(45deg);display:inline-block;}

/* CSS-only staggered entrance (no .reveal in the hero — content must never
   wait on the observer above the fold; reduced-motion kill-switch in
   styles.css zeroes these durations) */
@keyframes teamRise{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:none;}}
.team-hero .eyebrow,.team-hero h1,.team-hero .team-lede,
.team-hero .hero-cta,.team-hero .team-count{animation:teamRise .8s var(--ease) both;}
.team-hero h1{animation-delay:.08s;}
.team-hero .team-lede{animation-delay:.16s;}
.team-hero .hero-cta{animation-delay:.24s;}
.team-hero .team-count{animation-delay:.32s;}

/* ---------- partners: editorial hairline rows ---------- */
.p-list{border-top:1px solid var(--line);}
.p-row{
  display:grid;grid-template-columns:auto 1fr auto;gap:clamp(22px,4vw,56px);align-items:center;
  padding:clamp(28px,4.5vw,48px) 0;border-bottom:1px solid var(--line);
  position:relative;
}
.p-row::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:var(--gold-soft);
  transition:width .35s var(--ease);z-index:0;
}
.p-row:hover::before{width:6px;background:var(--gold);}
.p-row>*{position:relative;z-index:1;transition:transform .35s var(--ease);}
.p-row:hover>*{transform:translateX(18px);}
.p-row .partner-photo{width:104px;height:104px;}
.p-row .partner-photo .avatar{font-size:2.1rem;}
.p-id h3{font-size:clamp(1.6rem,3.2vw,2.3rem);margin-bottom:8px;}
.p-id .role{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink);font-weight:600;}
.p-id p{margin:12px 0 0;color:var(--ink-soft);font-size:.98rem;line-height:1.6;max-width:46ch;}
.p-links{display:flex;flex-direction:column;gap:13px;}
.p-links a{display:flex;align-items:center;gap:12px;color:var(--ink-soft);font-size:.92rem;transition:color .25s var(--ease);}
.p-links a:hover{color:var(--gold-ink);}
.p-links svg{width:18px;height:18px;stroke:var(--gold-ink);flex:none;}
.p-links svg.li{fill:var(--gold-ink);stroke:none;}

/* ---------- engineers: dark, centred trio ---------- */
.team-eng .eng-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;margin-bottom:clamp(40px,6vw,72px);}
.team-eng .eng-head h2{font-size:clamp(1.9rem,4.4vw,3.2rem);color:var(--white);}
.eng-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12);}
.eng{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:clamp(36px,5vw,56px) clamp(20px,3vw,40px);
  border-right:1px solid rgba(255,255,255,.12);position:relative;
  transition:background .35s var(--ease);
}
.eng:last-child{border-right:0;}
.eng:hover{background:var(--navy-700);}
.eng::before{content:"";position:absolute;top:-1px;left:0;width:0;height:2px;background:var(--gold);transition:width .4s var(--ease);}
.eng:hover::before{width:100%;}
.eng .partner-photo{width:96px;height:96px;margin-bottom:24px;}
.eng .partner-photo .avatar{font-size:1.9rem;}
/* the wrapper is layout-transparent on desktop (children centre as flex items)
   and becomes a left-aligned text block in the mobile row layout */
.eng-main{display:contents;}
.eng h3{font-size:1.4rem;color:var(--white);margin-bottom:10px;}
.eng .role{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:600;}
.eng .tag{
  margin-top:14px;font-family:"Playfair Display",serif;font-style:italic;
  font-size:1rem;color:var(--gray-100);opacity:.75;
}

/* ---------- staffing: one-line strip ---------- */
.team-strip{background:var(--navy-700);color:var(--white);}
.team-strip .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px 24px;padding-block:clamp(28px,4vw,42px);}
.tp{display:flex;align-items:baseline;gap:14px;transition:transform .3s var(--ease);}
.tp:hover{transform:translateY(-3px);}
.tp .tn{font-family:"Playfair Display",serif;font-style:italic;color:var(--gold);font-size:1.15rem;}
.tp span:last-child{font-family:"Playfair Display",serif;font-size:clamp(1rem,1.6vw,1.25rem);font-weight:500;letter-spacing:.01em;}

/* ---------- closing CTA band ---------- */
.team-cta{background:var(--navy-900);color:var(--white);padding:clamp(60px,9vw,110px) 0;position:relative;overflow:hidden;}
.team-cta::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 130% at 80% 8%,rgba(200,164,106,.10),transparent 55%);}
.team-cta .wrap{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:30px;}
.team-cta p{
  margin:0;font-family:"Playfair Display",serif;font-weight:400;font-style:italic;
  font-size:clamp(1.5rem,3.2vw,2.4rem);line-height:1.32;letter-spacing:-0.01em;max-width:26ch;
}
.team-cta p b{color:var(--gold);font-weight:400;}

/* ---------- responsive ---------- */
@media(max-width:880px){
  /* partners: photo + identity in row one, contacts become an inline strip */
  .p-row{grid-template-columns:auto 1fr;row-gap:18px;}
  .p-row:hover>*{transform:none;}
  .p-row .partner-photo{width:84px;height:84px;}
  .p-row .partner-photo .avatar{font-size:1.7rem;}
  .p-links{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;gap:10px 24px;}
  /* engineers stack with horizontal dividers */
  .eng-grid{grid-template-columns:1fr;}
  .eng{border-right:0;border-bottom:1px solid rgba(255,255,255,.12);
    flex-direction:row;text-align:left;gap:20px;padding:22px 6px;}
  .eng:last-child{border-bottom:0;}
  .eng .partner-photo{width:70px;height:70px;margin-bottom:0;}
  .eng .partner-photo .avatar{font-size:1.4rem;}
  .eng-main{display:block;text-align:left;}
  .eng h3{margin-bottom:5px;font-size:1.25rem;}
  .eng .role{display:block;}
  .eng .tag{margin-top:8px;display:block;}
  .team-strip .wrap{flex-direction:column;align-items:flex-start;gap:14px;}
}
@media(max-width:760px){
  .team-hero{min-height:0;}
  .team-hero .wrap{padding-top:126px;padding-bottom:48px;}
  .team-hero .hero-motif{width:78vw;right:-18vw;opacity:.35;}
  .team-count{gap:12px;row-gap:10px;}
}
@media(max-width:420px){
  .team-hero .eyebrow{font-size:.62rem;letter-spacing:.14em;}
  .p-row{grid-template-columns:1fr;}
  .p-row .partner-photo{width:72px;height:72px;}
  .p-id p{margin-top:10px;}
  .p-links{gap:10px 18px;}
}