/* ============================================================
   Protemics — company.css
   Seite Company: Mission, About us, Team, Directions
   (laedt nach product.css und site.css).
   ============================================================ */

/* Sprungziele unter der fixierten Navigation */
#mission,#about,#team,#directions{scroll-margin-top:72px}

/* Hero: Wuerfel ueber dem Mission-Panel */
.hero-side{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
.hero-cube{display:block;width:100%;max-width:320px;height:auto;margin:-19px auto 0}
.hero-side .mission-panel{width:100%}

/* Hero: Mission-Panel */
.mission-panel{display:flex;flex-direction:column}
.mq{margin:0;padding:40px 36px 44px;position:relative}
.mq::before{content:"\201C";position:absolute;left:28px;top:6px;font-family:var(--font-display);font-size:96px;line-height:1;color:var(--signal);opacity:.55}
.mq p{position:relative;margin-top:28px;font-family:var(--font-display);font-weight:700;font-size:26px;line-height:1.3;letter-spacing:-.01em;color:#F2F6F8}

/* Mission */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair)}
.pl{background:var(--paper);padding:32px 30px;display:flex;flex-direction:column;gap:12px}
.pl-n{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:var(--tr-label);color:var(--signal-dim)}
.pl h3{font-size:21px}
.pl p{color:var(--mist);font-size:15.5px;line-height:1.6}

/* About us */
.sec-head p a,.dir-p a,.kv a{color:var(--signal-dim);border-bottom:1px solid currentColor}
.about-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair)}
.ab{background:var(--paper-2);padding:30px 28px;display:flex;flex-direction:column;gap:10px}
.ab-l{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--signal-dim)}
.ab h3{font-size:19px}
.ab p{color:var(--mist);font-size:15px;line-height:1.6}
.ab-list{list-style:none;margin:4px 0 0;padding:0}
.ab-list li{position:relative;padding:6px 0 6px 20px;font-size:14.5px;line-height:1.5;color:var(--graphite)}
.ab-list li::before{content:"";position:absolute;left:2px;top:1.05em;width:10px;height:1px;background:var(--signal-dim)}

.sec-head-sub{margin-top:72px;margin-bottom:28px}
.sec-head-sub h3{font-size:24px;font-weight:800}
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.member{border-top:2px solid var(--graphite);padding-top:20px}
.member .role{display:block;font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--signal-dim);margin-bottom:12px}
.member h3{font-size:20px}
.member p{margin-top:12px;color:var(--mist);font-size:15px;line-height:1.6}
.more-pubs{margin-top:40px}

/* Directions */
/* Foto buendig ueber der linken Spalte (Address) der dir-grid: gleiche Spaltenteilung, 1px-Rahmen deckungsgleich */
.dir-photo{margin:0 0 24px;padding:0 1px;display:grid;grid-template-columns:1fr 1.25fr;column-gap:1px}
.dir-photo img,.dir-photo figcaption{grid-column:1}
.dir-photo img{display:block;width:calc(100% + 2px);max-width:none;margin-left:-1px;height:auto;border:1px solid var(--hair);border-radius:var(--radius)}
.dir-photo figcaption{margin-top:10px;font-size:14px;color:var(--mist)}
.dir-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:1px;background:var(--hair);border:1px solid var(--hair)}
.dir-card{background:var(--paper);padding:32px 30px;display:flex;flex-direction:column;gap:14px;min-width:0}
.dir-addr{font-style:normal;font-size:17px;line-height:1.6;color:var(--graphite)}
.dir-addr b{font-weight:600}
.dir-p{color:var(--mist);font-size:15px;line-height:1.6}
.dir-links{margin-top:4px;border-top:1px solid var(--hair)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:8px 0 0;padding-top:16px;border-top:1px solid var(--hair)}
.kv dt{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--mist);padding-top:2px}
.kv dd{margin:0;font-size:14.5px;line-height:1.5;color:var(--graphite)}

@media (max-width:860px){
  .pillars,.about-grid,.team,.dir-grid,.dir-photo{grid-template-columns:1fr}
  .team{gap:32px}
  .mq{padding:32px 24px 34px}
  .mq p{font-size:21px}
  .hero-cube{max-width:240px;margin-top:0}
  .pl,.ab,.dir-card{padding:26px 22px}
}