/* ============================================================================
   about.css — Trionic "About us" page-specific layout
   Mission, purpose, values, principles, vision quote. Load AFTER
   trionic-content.css (shared base). All rules scoped under #content.
   From the Claude Design handoff.
   ============================================================================ */

/* --- Hero --- */
#content .about-hero { background:var(--bg-blue); }
#content .about-hero h1 { font-size:clamp(56px,10vw,156px); line-height:0.88; margin:0 0 28px; }
#content .about-hero h1 em { color:var(--pms-1915); }
#content .about-hero .lead {
  font-size:clamp(19px,1.9vw,26px); line-height:1.35;
  max-width:44ch; font-weight:600; color:#141414; margin:0;
  font-family:var(--display); font-style:italic;
}

/* --- Mission statement (oversized, centred) --- */
#content .mission { text-align:center; margin:0 auto; }
#content .mission .ms-eyebrow {
  font-family:var(--display); font-weight:700; font-style:italic;
  font-size:13px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--pms-291); margin-bottom:28px;
}
#content .mission h2 {
  font-family:var(--display); font-weight:800; font-style:italic;
  font-size:clamp(40px,7vw,104px); line-height:0.98;
  letter-spacing:-0.03em; margin:0; color:#fff;
}
#content .mission h2 em { color:var(--pms-291); }

/* --- Purpose split --- */
#content .purpose { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
#content .purpose-visual {
  background:#fff; border:3px solid #141414; border-radius:4px;
  padding:32px; box-shadow:12px 12px 0 #141414;
  display:grid; place-items:center; aspect-ratio:4/3;
}
#content .purpose .tr-prose { max-width:none; }

/* --- Values --- */
#content .values-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
#content .value {
  background:#fff; border:3px solid #141414; border-radius:4px;
  padding:30px; display:flex; flex-direction:column; gap:14px; min-height:280px;
}
#content .value:nth-child(3n+1) { background:var(--web-bg-blue); }
#content .value:nth-child(3n) { background:var(--pms-012); }
#content .value .v-num {
  font-family:var(--display); font-weight:800; font-style:italic;
  font-size:13px; letter-spacing:0.06em; color:var(--pms-298);
}
#content .value:nth-child(3n) .v-num { color:#8e3a28; }
#content .value .v-glyph {
  width:56px; height:56px; border:2.5px solid #141414; border-radius:50%;
  display:grid; place-items:center; background:#fff;
}
#content .value h3 {
  font-family:var(--display); font-weight:800; font-style:italic;
  font-size:27px; line-height:1.05; letter-spacing:-0.02em; margin:0; color:#141414;
}
#content .value h3 em { color:var(--pms-1915); }
#content .value p { margin:0; font-size:14.5px; line-height:1.5; color:var(--ink-2); font-weight:500; }

/* --- Difference / feature rows (kopa-rullator "Funktioner" style) --- */
#content .principles { display:block; }
#content .principle {
  display:grid;
  grid-template-columns:56px minmax(0,0.85fr) minmax(0,1.15fr);
  gap:28px; align-items:center;
  padding:30px 0;
  border-top:2px solid #141414;
}
#content .principle:last-child { border-bottom:2px solid #141414; }
#content .principle .feat-glyph {
  width:52px; height:52px; border:2.5px solid #141414; border-radius:50%;
  display:grid; place-items:center; background:var(--pms-291); flex-shrink:0;
}
#content .principle h3 {
  font-family:var(--display); font-weight:800; font-style:italic;
  font-size:clamp(22px,2.3vw,30px); line-height:1.05; letter-spacing:-0.02em;
  margin:0; color:#141414;
}
#content .principle h3 em { color:var(--pms-1915); }
#content .principle .feat-desc { display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
#content .principle .feat-desc p { margin:0; font-size:14.5px; line-height:1.55; color:var(--ink-2); font-weight:500; }
#content .principle .feat-pill {
  font-family:var(--display); font-weight:700; font-style:italic;
  font-size:12.5px; letter-spacing:0.02em;
  padding:8px 16px; border:2px solid #141414; border-radius:999px;
  background:var(--pms-012); color:#141414;
}

/* (Vision quote band styles live in the shared trionic-content.css) */

/* --- Responsive --- */
@media (max-width:1000px) {
  #content .purpose { grid-template-columns:1fr; gap:32px; }
  #content .values-grid { grid-template-columns:1fr; }
}
@media (max-width:860px) {
  #content .principle { grid-template-columns:48px 1fr; gap:14px 18px; align-items:center; }
  #content .principle .feat-desc { grid-column:1 / -1; }
}