/* =========================================================================
   Trelven — consulting pages, on the Chart theme.

   chart.css (shared by every Trelven site) supplies the paper, ink, type,
   masthead, footer and buttons. This file carries the components the
   consulting pages are built from — pillar cards, the engagement stepper,
   flow diagrams, assessment cards, the contact form, FAQ — expressed in
   Chart tokens, so the consulting section reads as part of the same site.
   Loaded only on trelven.com pages.
   ========================================================================= */

/* The names these components were written against, mapped onto Chart. */
:root {
  --bg: var(--paper);
  --bg-elev: var(--paper-2);
  --bg-card: var(--card);
  --border: var(--rule);
  --border-strong: var(--ink-faint);
  --text: var(--ink);
  --text-muted: var(--ink-soft);
  --text-dim: var(--ink-soft);
  --accent: var(--magenta);
  --accent-hover: var(--magenta-2);
  --accent-glow: transparent;
  --success: var(--magenta);
  --danger: #b3261e;
  --font-sans: var(--font);
  --font-serif: var(--font);
  --font-mono: var(--mono);
  --radius-sm: 0px;
  --radius: 0px;
  --radius-lg: 0px;
  --max-w: var(--page);
}

/* ---------- Layout helpers ---------- */
.container {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section { padding-block: clamp(80px, 12vw, 140px); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 20px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--border-strong);
}

.section-title {
  font-weight: 600;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
}
.section-title em {
  color: var(--accent);
}

.section-lead {
  font-size: clamp(17px, 1.6vw, 19px);
  color: var(--text-muted);
  max-width: 64ch;
  margin: 0 0 56px;
}

/* ---------- Hero ---------- */
.hero {
  padding-block: clamp(100px, 14vw, 180px) clamp(80px, 12vw, 140px);
  position: relative;
}

.hero-inner {
  display: grid;
  gap: 32px;
  max-width: 880px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(52, 211, 153, 0.08);
  border: 1px solid rgba(52, 211, 153, 0.18);
  color: var(--success);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  width: max-content;
}
.badge .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6);
  animation: pulse 2s var(--ease) infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55); }
  50%      { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); }
}

.hero h1 {
  font-weight: 600;
  font-size: clamp(48px, 9vw, 104px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  margin: 0;
}
.hero h1 em {
  color: var(--accent);
}

.hero-sub {
  font-size: clamp(17px, 1.7vw, 20px);
  color: var(--text-muted);
  max-width: 60ch;
  margin: 0;
}

.hero-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* ---------- Cards / Grids ---------- */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.card {
  position: relative;
  padding: 32px;
  border-radius: var(--radius);
  background: var(--bg-card);
  border: 1px solid var(--border);
  transition: border-color 220ms var(--ease), transform 220ms var(--ease),
              background 220ms var(--ease);
  overflow: hidden;
}
.card:hover {
  border-color: var(--border-strong);
  transform: translateY(-3px);
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--magenta) 40%, transparent), transparent 40%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 260ms var(--ease);
  pointer-events: none;
}
.card:hover::before { opacity: 1; }

.card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--magenta) 12%, transparent);
  color: var(--accent);
  margin-bottom: 22px;
}
.card h3 {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}
.card p {
  margin: 0;
  color: var(--text-muted);
  font-size: 15px;
}

/* ---------- About section ---------- */
.about .section-title { max-width: 16ch; }

/* ---------- Apps section ---------- */
.app-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 36px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--bg-card), var(--card));
  border: 1px solid var(--border);
  min-height: 280px;
  transition: border-color 220ms var(--ease), transform 220ms var(--ease);
}
.app-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-3px);
}
.app-status {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.app-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.app-card h3 {
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1.1;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.015em;
}
.app-card p {
  margin: 0;
  color: var(--text-muted);
  max-width: 50ch;
}

/* ---------- Values ---------- */
.values-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}
.value {
  padding: 36px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.value-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.1em;
}
.value h3 {
  font-weight: 600;
  font-size: clamp(26px, 3vw, 32px);
  line-height: 1.15;
  margin: 0;
  letter-spacing: -0.01em;
}
.value p {
  margin: 0;
  color: var(--text-muted);
}

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 64px;
  align-items: start;
}
.contact-email {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(24px, 3vw, 32px);
  color: var(--text);
  margin-top: 8px;
}
.contact-email:hover { color: var(--accent-hover); }

form.contact-form {
  display: grid;
  gap: 18px;
  padding: 36px;
  border-radius: var(--radius);
  background: var(--bg-card);
  border: 1px solid var(--border);
}
.field { display: grid; gap: 8px; }
.field label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.field input,
.field textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  transition: border-color 180ms var(--ease), background 180ms var(--ease);
}
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--card);
}
.field textarea {
  min-height: 130px;
  resize: vertical;
}
.form-note {
  font-size: 13px;
  color: var(--text-dim);
  margin: 0;
}
.form-status {
  font-size: 13px;
  color: var(--success);
  min-height: 1em;
}

/* ---------- Legal / standalone pages ---------- */
.legal {
  padding-block: clamp(60px, 10vw, 120px);
}
.legal-inner {
  max-width: 760px;
  margin-inline: auto;
}
.legal h1 {
  font-weight: 600;
  font-size: clamp(40px, 6vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}
.legal .updated {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 48px;
  display: block;
}
.legal h2 {
  font-weight: 600;
  font-size: clamp(24px, 2.6vw, 30px);
  letter-spacing: -0.01em;
  margin: 48px 0 14px;
}
.legal h3 {
  font-size: 17px;
  font-weight: 500;
  margin: 28px 0 10px;
}
.legal p,
.legal li {
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.75;
}
.legal a {
  color: var(--accent-hover);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--magenta) 40%, transparent);
  text-underline-offset: 3px;
}
.legal ul,
.legal ol {
  padding-left: 22px;
}
.legal ul li,
.legal ol li {
  margin-bottom: 8px;
}

/* ---------- FAQ ---------- */
.faq {
  display: grid;
  gap: 12px;
  margin-top: 8px;
}
.faq details {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  padding: 22px 26px;
  transition: border-color 200ms var(--ease);
}
.faq details[open] { border-color: var(--border-strong); }
.faq summary {
  list-style: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.005em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  color: var(--text);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 20px;
  color: var(--text-dim);
  transition: transform 220ms var(--ease);
}
.faq details[open] summary::after { content: "−"; }
.faq details > p,
.faq details > ul {
  margin: 14px 0 0;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.7;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: 36px; }
}

@media (max-width: 720px) {

  .hero-ctas { width: 100%; }
  .btn { width: 100%; justify-content: center; }
  .card, .app-card, form.contact-form { padding: 26px; }
  .value { padding: 28px 24px; }
}


/* ---------- Sub-hero (interior pages) ---------- */
.subhero { padding-block: clamp(56px, 9vw, 96px) clamp(28px, 5vw, 56px); }
.breadcrumb {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  margin: 0 0 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.breadcrumb a { color: var(--text-dim); }
.breadcrumb a:hover { color: var(--text-muted); }
.breadcrumb span[aria-current] { color: var(--text-muted); }
.subhero h1 {
  font-weight: 600;
  font-size: clamp(38px, 6.5vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0 0 22px;
  max-width: 18ch;
}
.subhero h1 em { color: var(--accent); }
.subhero .subhero-lead {
  font-size: clamp(17px, 1.7vw, 20px);
  color: var(--text-muted);
  max-width: 64ch;
  margin: 0;
}
.subhero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; }

/* ---------- Pillar / solution cards ---------- */
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.pillar-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 34px;
  border-radius: var(--radius);
  background: var(--bg-card);
  border: 1px solid var(--border);
  transition: border-color 220ms var(--ease), transform 220ms var(--ease);
  color: var(--text);
}
.pillar-card:hover { border-color: var(--border-strong); transform: translateY(-3px); color: var(--text); }
.pillar-card .card-icon { margin-bottom: 4px; }
.pillar-card h3 {
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
}
.pillar-card p { margin: 0; color: var(--text-muted); font-size: 15px; }
.pillar-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 8px; }
.tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--paper-2);
}
.pillar-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--accent-hover);
  margin-top: 4px;
}
.pillar-link .arrow { transition: transform 200ms var(--ease); }
.pillar-card:hover .pillar-link .arrow { transform: translateX(3px); }

/* ---------- Engagement model stepper ---------- */
.engage-steps {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  counter-reset: step;
  margin-top: 8px;
}
.engage-step {
  position: relative;
  padding: 28px 20px 28px 0;
}
.engage-step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
  display: block;
  margin-bottom: 16px;
}
.engage-step::after {
  content: "";
  position: absolute;
  top: 40px; left: 0; right: 20px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
  opacity: 0.4;
}
.engage-step:last-child::after { right: 0; }
.engage-step h3 {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}
.engage-step p { margin: 0; font-size: 13.5px; color: var(--text-muted); line-height: 1.6; }
.engage-note {
  font-size: clamp(22px, 3vw, 30px);
  color: var(--text);
  margin: 48px 0 0;
  letter-spacing: -0.01em;
}
.engage-note em { color: var(--accent); }

/* ---------- Flow diagram (migration / pipeline) ---------- */
.flow {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
  margin-top: 8px;
}
.flow-node {
  flex: 1 1 auto;
  min-width: 120px;
  padding: 18px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  text-align: center;
}
.flow-node .flow-k {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  display: block;
  margin-bottom: 6px;
}
.flow-node strong { font-weight: 500; font-size: 15px; letter-spacing: -0.01em; }
.flow-node.is-endpoint { border-color: color-mix(in srgb, var(--magenta) 50%, transparent); background: color-mix(in srgb, var(--magenta) 6%, transparent); }
.flow-arrow {
  align-self: center;
  color: var(--text-dim);
  font-family: var(--font-mono);
  flex: 0 0 auto;
}

/* ---------- Assessment ("start small") cards ---------- */
.assess-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.assess-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--bg-card), var(--card));
  border: 1px solid var(--border);
  transition: border-color 220ms var(--ease), transform 220ms var(--ease);
}
.assess-card:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.assess-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.assess-card h3 { font-size: 17px; font-weight: 500; margin: 0; letter-spacing: -0.01em; }
.assess-card p { margin: 0; font-size: 14px; color: var(--text-muted); }
.assess-card .assess-out {
  margin-top: auto;
  padding-top: 12px;
  font-size: 13px;
  color: var(--text-dim);
  border-top: 1px solid var(--border);
}

/* ---------- Tech expertise grid ---------- */
.tech-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.tech-col h4 {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  font-weight: 500;
}
.tech-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tech-col li { font-size: 14px; color: var(--text-muted); }

/* ---------- Use-case / problems list ---------- */
.usecase-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--border); }
.usecase {
  display: flex;
  gap: 18px;
  padding: 26px 8px;
  border-bottom: 1px solid var(--border);
}
.usecase-num { font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); flex: 0 0 auto; padding-top: 3px; }
.usecase p { margin: 0; font-size: 16px; color: var(--text); letter-spacing: -0.005em; }

/* ---------- Capabilities columns (solution pages) ---------- */
.cap-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.cap-col h3 {
  font-size: 16px;
  font-weight: 500;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  letter-spacing: -0.01em;
}
.cap-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.cap-col li { font-size: 14.5px; color: var(--text-muted); padding-left: 18px; position: relative; }
.cap-col li::before {
  content: "";
  position: absolute; left: 0; top: 9px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); opacity: 0.7;
}

/* ---------- Outcome / why cards (compact) ---------- */
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.why h3 {
  font-weight: 600; font-size: clamp(22px, 2.4vw, 27px);
  line-height: 1.15; margin: 0 0 10px; letter-spacing: -0.01em;
}
.why p { margin: 0; color: var(--text-muted); font-size: 15px; }

/* ---------- CTA band ---------- */
.cta-band {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(600px 300px at 20% 0%, color-mix(in srgb, var(--magenta) 14%, transparent), transparent 70%),
    var(--bg-card);
  padding: clamp(40px, 7vw, 72px);
  text-align: center;
}
.cta-band h2 {
  font-weight: 600;
  font-size: clamp(30px, 4.5vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 auto 18px;
  max-width: 22ch;
}
.cta-band h2 em { color: var(--accent); }
.cta-band p { color: var(--text-muted); max-width: 60ch; margin: 0 auto 32px; font-size: clamp(16px,1.5vw,18px); }
.cta-band .hero-ctas { justify-content: center; }

/* ---------- Section header helper (centered variant) ---------- */
.section-head { max-width: 720px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head.center .section-lead { margin-inline: auto; }

/* ---------- Expanded contact form ---------- */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field select {
  width: 100%;
  padding: 14px 16px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%239a9aae' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
.field select:focus { outline: none; border-color: var(--accent); background-color: var(--card); }

/* ---------- Meta list (about page) ---------- */
.meta-list { display: grid; gap: 0; border-top: 1px solid var(--border); }
.meta-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--border);
}
.meta-row dt { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); margin: 0; }
.meta-row dd { margin: 0; color: var(--text-muted); }

/* ---------- Insights / perspectives ---------- */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.post {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  border-radius: var(--radius);
  background: var(--bg-card);
  border: 1px solid var(--border);
}
.post .post-cat {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.post h3 { font-size: 18px; font-weight: 500; margin: 0; letter-spacing: -0.01em; line-height: 1.3; }
.post p { margin: 0; font-size: 14px; color: var(--text-muted); }

/* ---------- Responsive additions ---------- */
@media (max-width: 1040px) {
  .tech-grid { grid-template-columns: repeat(2, 1fr); }
  .engage-steps { grid-template-columns: repeat(3, 1fr); }
  .engage-step::after { display: none; }
  .cap-cols { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 900px) {
  .pillar-grid { grid-template-columns: 1fr; }
  .assess-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .post-grid { grid-template-columns: 1fr; }
  .usecase-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .meta-row { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 720px) {
  .engage-steps { grid-template-columns: 1fr; }
  .tech-grid { grid-template-columns: 1fr; }
  .flow-arrow { display: none; }
  .flow-node { flex-basis: 100%; }
  /* Mobile dropdown → inline accordion */
}

/* ---------- Home solutions: 3-up capability grid ---------- */
.pillar-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1040px) { .pillar-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px)  { .pillar-grid--3 { grid-template-columns: 1fr; } }

/* =========================================================================
   Chart alignment
   Everything above keeps the consulting layouts; this block makes them
   speak Chart: Archivo at weight 600, magenta instead of italics, square
   corners, hairline rules, mono labels.
   ========================================================================= */

main > section { padding-block: clamp(44px, 6vw, 84px); border-top: 1px solid var(--rule); }
main > section:first-child { border-top: 0; }
main > section.subhero, main > section.hero { padding-block: clamp(48px, 7vw, 92px) clamp(34px, 5vw, 60px); }
main > section.subhero + section, main > section.hero + section { border-top: 1px solid var(--ink); }

main h1, main h2, main h3, main h4 { font-family: var(--font); font-weight: 600; letter-spacing: -0.03em; }
main h1 em, main h2 em, main h3 em, .engage-note em { font-style: normal; color: var(--magenta); }
.hero h1, .subhero h1 { font-size: clamp(38px, 5.6vw, 66px); line-height: 1; letter-spacing: -0.04em; max-width: 18ch; }
.section-title { font-size: clamp(28px, 3.8vw, 44px); line-height: 1.06; letter-spacing: -0.035em; margin: 0 0 16px; }
.section-lead { margin: 0 0 clamp(26px, 4vw, 40px); font-size: 17px; }
.hero-sub, .subhero-lead { font-size: clamp(17px, 2vw, 21px); line-height: 1.45; color: var(--ink-soft); }
.hero-inner { gap: 22px; max-width: var(--page); }
.hero-sub, .subhero-lead { max-width: 62ch; }
main p { margin: 0 0 14px; }
main p:last-child { margin-bottom: 0; }

/* labels: the Chart tick */
.eyebrow, .badge, .assess-kicker, .post-cat {
  font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-soft);
}
.eyebrow { margin: 0 0 14px; gap: 9px; }
.eyebrow::before { width: 18px; background: var(--magenta); }
.badge { background: none; border: 0; padding: 0; border-radius: 0; color: var(--magenta); gap: 9px; }
.badge .dot { width: 18px; height: 1px; border-radius: 0; background: var(--magenta); box-shadow: none; animation: none; }
.breadcrumb { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.breadcrumb a:hover { color: var(--magenta); }
.tag, .pillar-tags span { font-family: var(--mono); border-radius: 0; }

/* buttons: Chart's .btn is the primary; ghost is the outline */
.btn { white-space: nowrap; transition: background 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn-ghost:hover { border-color: var(--magenta); color: var(--magenta); background: transparent; }
.btn .arrow { transition: transform 220ms var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.hero-ctas, .subhero-ctas { gap: 12px; }

/* surfaces: cards sit on the paper with a hairline, no glow */
.pillar-card, .assess-card, .why, .usecase, .post, .engage-step, .flow-node, .tech-col, .cap-col, .contact-form, .cta-band, .card {
  box-shadow: none;
}
.pillar-card:hover, .assess-card:hover, .post:hover { border-color: var(--magenta); transform: translateY(-3px); box-shadow: none; }
.pillar-card::before, .assess-card::before { display: none; }
.cta-band { background: var(--card); border: 1px solid var(--ink); }
.card-icon { border-radius: 0; background: var(--water); color: var(--magenta); border: 1px solid var(--rule); }
.pillar-link, .contact-email { color: var(--magenta); }
main a:not(.btn):not(.pillar-card):not(.assess-card):not(.post):hover { color: var(--magenta); }

/* forms */
.field input, .field select, .field textarea { background: var(--card); border: 1px solid var(--rule); border-radius: 0; color: var(--ink); font-family: var(--font); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--magenta); outline: none; }
.field label { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.ready { margin-top: 18px; padding: 18px; border: 1px solid var(--ink); background: var(--paper); display: grid; gap: 12px; }
.ready[hidden] { display: none; }
.ready h3 { font-size: 18px; margin: 0; }
.ready-body { margin: 0; padding: 14px; background: var(--card); border: 1px solid var(--rule); font-family: var(--mono); font-size: 13px; line-height: 1.5; white-space: pre-wrap; max-height: 220px; overflow: auto; }

/* documents (privacy, terms) and FAQ */
main.legal { padding-block: clamp(40px, 6vw, 80px); }
.legal-inner { max-width: 760px; }
.legal-inner h1 { font-size: clamp(36px, 5vw, 58px); line-height: 1; margin: 0 0 12px; }
.legal-inner h2 { font-size: clamp(22px, 2.6vw, 28px); margin: 40px 0 12px; padding-top: 22px; border-top: 1px solid var(--rule); }
.legal-inner h3 { font-size: 18px; margin: 26px 0 8px; }
.legal-inner ul, .legal-inner ol { margin: 0 0 14px; padding-left: 22px; }
.legal-inner li { margin-bottom: 6px; }
.legal-inner a { color: var(--magenta); text-decoration: underline; text-underline-offset: 3px; }
.updated { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.faq details { border: 0; border-top: 1px solid var(--rule); border-radius: 0; background: none; }
.faq details:last-child { border-bottom: 1px solid var(--rule); }
.faq summary { font-weight: 600; }
.faq a { color: var(--magenta); text-decoration: underline; text-underline-offset: 3px; }

/* scroll reveal, same motion as Chart's .rise */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 620ms var(--ease), transform 620ms var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

.contact-grid { padding-top: clamp(24px, 3vw, 36px); }
.contact-form { border: 1px solid var(--rule); background: var(--card); }