/* ==========================================================================
   pages.css — page-specific rules only.

   Shared components (breadcrumbs, byline, article-body, faq, heros,
   legal-body, disclaimer, reviewed-by, pullquote, service-card hover,
   footer cols) live in components.css.

   Structure: one block per page OR page-family, headed with a comment.
   Re-running scripts/extract-inline-css.js would overwrite this file —
   those scripts are retired in favour of hand-maintained components.
   ========================================================================== */

/* ==========================================================================
   Homepage (/)
   ========================================================================== */
.trust-rail {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-6);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.trust-rail .item { display: flex; align-items: center; gap: var(--space-2); }
.trust-rail .dot { background: var(--color-primary); width: 5px; height: 5px; }
@media (max-width: 1024px) { .trust-rail { grid-template-columns: repeat(3, 1fr); row-gap: var(--space-3); } }
@media (max-width: 640px)  { .trust-rail { grid-template-columns: 1fr 1fr; row-gap: var(--space-3); } }

.people {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
@media (max-width: 1024px) { .people { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .people { grid-template-columns: 1fr; } }

.updates {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
@media (max-width: 1024px) { .updates { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .updates { grid-template-columns: 1fr; } }
.update {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-raised);
  display: grid; gap: var(--space-2);
}
.update time { font-family: var(--font-mono); font-size: 0.75rem; color: var(--color-text-tertiary); letter-spacing: 0.04em; }
.update h3 { font-size: 1.0625rem; font-weight: var(--weight-semibold); line-height: 1.35; }
.update p { font-size: 0.9375rem; color: var(--color-text-secondary); line-height: 1.5; font-family: var(--font-serif); }

.ruler {
  display: flex; gap: var(--space-4); align-items: baseline;
  font-family: var(--font-mono); font-size: 0.75rem;
  color: var(--color-text-tertiary);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  letter-spacing: 0.05em;
  flex-wrap: wrap;
}
.ruler span + span { padding-left: var(--space-4); border-left: 1px solid var(--color-border); }

/* ==========================================================================
   Person / associate card (home + /about/ + /about/experts/)
   ========================================================================== */
.person,
.people-grid .person {
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--duration-base) var(--ease-default),
              transform var(--duration-base) var(--ease-default),
              box-shadow var(--duration-base) var(--ease-default);
}
.person:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.person__portrait { aspect-ratio: 4/5; overflow: hidden; background: var(--color-bg-subtle); }
.person__portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.person__body { padding: var(--space-5); }
.person__kicker { font-family: var(--font-mono); font-size: 0.75rem; color: var(--color-text-tertiary); letter-spacing: 0.04em; }
.person__name { font-size: 1.1875rem; font-weight: var(--weight-semibold); margin-top: 2px; letter-spacing: -0.01em; }
.person__role { font-size: 0.875rem; color: var(--color-text-secondary); margin-top: 2px; }
.person__bio { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-border); font-family: var(--font-serif); font-size: 0.9375rem; line-height: 1.55; color: var(--color-text-secondary); }
.person__topics { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-border); display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: 0.75rem; color: var(--color-text-secondary); }

.people-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
@media (max-width: 1024px) { .people-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .people-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   About page (/about/) — principles grid + scope list
   ========================================================================== */
.principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-8);
}
@media (max-width: 1024px) { .principles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .principles { grid-template-columns: 1fr; } }
.principle {
  padding: var(--space-5);
  border-top: 2px solid var(--color-primary);
  background: var(--color-bg-raised);
}
.principle h3 { font-family: var(--font-sans); font-size: 1.125rem; font-weight: var(--weight-semibold); margin-bottom: var(--space-3); }
.principle p { font-family: var(--font-serif); font-size: 1rem; line-height: 1.6; color: var(--color-text-secondary); }

.scope {
  margin-top: var(--space-9);
  padding-top: var(--space-7);
  border-top: 1px solid var(--color-border);
}
.scope ul {
  list-style: none; padding: 0;
  margin-top: var(--space-5);
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
@media (max-width: 640px) { .scope ul { grid-template-columns: 1fr; } }
.scope li {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans); font-size: 0.9375rem;
  background: var(--color-bg-raised);
}
.scope li strong { color: var(--color-primary); }

/* ==========================================================================
   Persona landing (/about/experts/{slug}/) — profile + bio + topics
   ========================================================================== */
.profile-grid {
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap: var(--space-9);
  padding-block: var(--space-9);
}
@media (max-width: 1024px) { .profile-grid { grid-template-columns: 320px 1fr; gap: var(--space-7); } }
@media (max-width: 820px)  { .profile-grid { grid-template-columns: 1fr; } }

.portrait img {
  width: 100%; height: auto;
  aspect-ratio: 4/5; object-fit: cover;
  border-radius: var(--radius-md);
}

.bio h1 { font-size: 56px; line-height: 1.08; letter-spacing: -0.02em; margin-bottom: var(--space-2); }
@media (max-width: 640px) { .bio h1 { font-size: 36px; line-height: 1.15; } }
.bio .role { font-family: var(--font-mono); font-size: 0.875rem; color: var(--color-text-tertiary); letter-spacing: 0.04em; text-transform: uppercase; }
.bio .lede { font-family: var(--font-serif); font-size: 19px; line-height: 1.6; color: var(--color-text-primary); margin-top: var(--space-5); }
.bio dl {
  display: grid; grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  font-family: var(--font-sans); font-size: 0.9375rem;
}
.bio dt { font-family: var(--font-mono); font-size: 0.75rem; color: var(--color-text-tertiary); letter-spacing: 0.04em; text-transform: uppercase; padding-top: 4px; }
.bio dd { color: var(--color-text-primary); }

.topics { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--color-border); }
.topics h2 { font-family: var(--font-sans); font-size: 1.25rem; margin-bottom: var(--space-4); letter-spacing: -0.01em; }
.topics ul {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
@media (max-width: 640px) { .topics ul { grid-template-columns: 1fr; } }
.topics li {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-raised);
}
.topics li a { display: block; color: inherit; text-decoration: none; font-family: var(--font-sans); font-size: 0.9375rem; font-weight: var(--weight-medium); }
.topics li a:hover { color: var(--color-link); }
.topics li small { color: var(--color-text-tertiary); font-size: 0.8125rem; display: block; margin-top: 2px; font-weight: var(--weight-regular); }

.notes {
  margin-top: var(--space-7);
  padding: var(--space-5);
  background: var(--color-bg-subtle);
  border-radius: var(--radius-md);
  font-family: var(--font-sans); font-size: 0.9375rem;
  color: var(--color-text-secondary);
}
.notes strong { color: var(--color-text-primary); font-weight: var(--weight-semibold); }

/* ==========================================================================
   Contact page (/contact/)
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-9);
  padding-block: var(--space-9);
}
@media (max-width: 1024px) { .contact-grid { grid-template-columns: 1.3fr 1fr; gap: var(--space-7); } }
@media (max-width: 820px)  { .contact-grid { grid-template-columns: 1fr; } }

.form { display: flex; flex-direction: column; gap: var(--space-4); }
.form-row { display: flex; flex-direction: column; gap: var(--space-2); }
.form label { font-family: var(--font-sans); font-weight: var(--weight-semibold); font-size: 0.875rem; }
.form label small { display: block; font-weight: var(--weight-regular); color: var(--color-text-tertiary); margin-top: 2px; }
.form input, .form textarea, .form select {
  font-family: var(--font-sans); font-size: 1rem;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-raised);
  color: var(--color-text-primary);
  width: 100%;
}
.form input:focus, .form textarea:focus, .form select:focus {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-color: var(--color-focus);
}
.form textarea { min-height: 140px; resize: vertical; font-family: var(--font-sans); }
.form-help { font-size: 0.8125rem; color: var(--color-text-tertiary); font-family: var(--font-sans); margin-top: var(--space-1); }
.form-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form button {
  margin-top: var(--space-4);
  align-self: flex-start;
  font-family: var(--font-sans); font-size: 1rem;
  font-weight: var(--weight-semibold);
  padding: var(--space-3) var(--space-5);
  background: var(--color-primary); color: #fff;
  border: none; border-radius: var(--radius-sm);
  cursor: pointer;
}
.form button:hover { background: var(--color-primary-hover); }

.contact-info h3 {
  font-family: var(--font-sans);
  font-size: 1.125rem;
  font-weight: var(--weight-semibold);
  margin-top: var(--space-6);
}
.contact-info h3:first-child { margin-top: 0; }
.contact-info dl { margin-top: var(--space-3); display: grid; gap: var(--space-2); }
.contact-info dt { font-family: var(--font-mono); font-size: 0.75rem; color: var(--color-text-tertiary); letter-spacing: 0.04em; text-transform: uppercase; }
.contact-info dd { font-family: var(--font-sans); font-size: 0.9375rem; color: var(--color-text-primary); }
.contact-info dd small { color: var(--color-text-tertiary); font-size: 0.8125rem; }

/* ==========================================================================
   404 — suggestions list + actions
   ========================================================================== */
.notfound-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-7); }

.suggestions { padding-block: var(--space-8); }
.suggestions h2 { font-family: var(--font-sans); font-size: 1.25rem; font-weight: var(--weight-semibold); margin-bottom: var(--space-5); }
.suggestions ul {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
@media (max-width: 640px) { .suggestions ul { grid-template-columns: 1fr; } }
.suggestions li {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-raised);
}
.suggestions li a { color: var(--color-link); text-decoration: none; font-family: var(--font-sans); font-size: 0.9375rem; font-weight: var(--weight-semibold); }
.suggestions li small { display: block; color: var(--color-text-tertiary); font-size: 0.8125rem; margin-top: 2px; font-family: var(--font-sans); }

/* ==========================================================================
   Typographic hero (one insight — GmbH registration capital display)
   ========================================================================== */
.typographic-hero {
  padding: var(--space-9) var(--space-7);
  margin: var(--space-7) 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  text-align: center;
}
.typographic-hero .capital {
  font-family: var(--font-mono);
  font-size: clamp(3rem, 10vw, 6rem);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.03em;
  color: var(--color-text-primary);
  line-height: 1;
}
.typographic-hero .capital-label {
  display: block;
  font-family: var(--font-mono); font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--color-text-tertiary);
  margin-top: var(--space-4);
}

/* ==========================================================================
   Utilities — consolidated, deduplicated.
   Semantic names for styles previously extracted from inline attributes.
   ========================================================================== */

/* Text colour + opacity */
.text-white        { color: #fff; }
.text-on-dark-dim  { color: rgba(255, 255, 255, 0.55); }
.text-link         { color: var(--color-link); }
.op-60             { opacity: 0.6; }

/* Positioning / reset */
.pos-abs           { position: absolute; }
.link-reset        { text-decoration: none; color: inherit; }
.link-block-reset  { display: block; color: inherit; text-decoration: none; }

/* Button padding (header CTA) */
.pad-btn           { padding: 0.5rem 1rem; }

/* Footer tagline */
.footer-tagline    { margin-top: var(--space-5); font-size: 0.8125rem; opacity: 0.6; max-width: 34ch; line-height: 1.5; }

/* Section dividers + spacing */
.section-divider   { margin-top: var(--space-9); padding-top: var(--space-5); border-top: 1px solid var(--color-border); }
.text-center       { text-align: center; }

/* Figure & image helpers */
.my-7              { margin: var(--space-7) 0; }
.img-rounded       { width: 100%; height: auto; border-radius: var(--radius-md); }
.icon-14           { width: 14px; height: 14px; vertical-align: middle; }

/* Margin-top shorthands (prefer .stack primitive for new layouts) */
.mt-3              { margin-top: var(--space-3); }
.mt-6              { margin-top: var(--space-6); }
.mt-7              { margin-top: var(--space-7); }
.mt-8              { margin-top: var(--space-8); }
.mt-9              { margin-top: var(--space-9); }

/* Button rows */
.btn-row           { display: flex; gap: var(--space-3); margin-top: var(--space-6); flex-wrap: wrap; }
.btn-row-mt-7      { display: flex; gap: var(--space-3); margin-top: var(--space-7); flex-wrap: wrap; }
.row-end-between   { display: flex; align-items: end; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; margin-bottom: var(--space-7); }

/* Lede — ONE standard (17 px serif). Full-width in content zone — no max-width. */
.body-lede,
.body-lede-wide,
.body-lede-compact,
.body-lede-52 {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin-top: var(--space-5);
}

/* Heading ch-constraint — legacy aliases, now no-ops (full-width headings).
   Retained so existing HTML classes don't break, but the constraint is removed. */
.heading-constrained-20,
.heading-constrained-22,
.heading-constrained-24,
.heading-constrained-26 {
  margin-top: var(--space-3);
}

/* Grid-12 column spans (used in homepage) */
.col-span-5-serif  { grid-column: span 5; font-family: var(--font-serif); color: var(--color-text-secondary); }
.col-span-6        { grid-column: span 6; }
.col-span-6-accent { grid-column: span 6; border-top-color: var(--color-accent); }
.col-span-7        { grid-column: span 7; }

/* Grid-12 alignment pairings */
.flex-end-gap-7    { align-items: end; gap: var(--space-7); }
.flex-start-gap-8  { align-items: start; gap: var(--space-8); }

/* 3-col grid (services + updates) */
.grid-3            { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
@media (max-width: 1024px) { .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .grid-3 { grid-template-columns: 1fr; } }

.grid-3-mt-7       { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-top: var(--space-7); }
@media (max-width: 1024px) { .grid-3-mt-7 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .grid-3-mt-7 { grid-template-columns: 1fr; } }