/* ==========================================================================
   ERRORMATIC — INNER PAGE STYLES
   Shared by: About sub-pages, Services hub + sub-pages, Contact.
   Load after shared.css.
   ========================================================================== */

/* ---------- Page intro (lighter hero variant, no 3D canvas) ---------- */
.page-intro {
  padding-top: var(--sp-9);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--c-line);
}
.page-intro .intro-row {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--sp-6);
  align-items: end;
}
.page-intro h1 { max-width: 18ch; }
.page-intro .intro-sub { color: var(--c-slate); font-size: var(--fs-body-lg); max-width: 46ch; }
@media (max-width: 860px) { .page-intro .intro-row { grid-template-columns: 1fr; } }

/* ---------- Value / highlight strip (3-up) ---------- */
.values-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.value-item { padding-top: var(--sp-4); border-top: 3px solid var(--c-signal); }
.value-item:nth-child(3n+2) { border-top-color: var(--c-violet); }
.value-item:nth-child(3n+3) { border-top-color: var(--c-circuit); }
.value-item .idx { font-family: var(--f-mono); font-size: 0.8125rem; color: var(--c-signal); text-shadow: 0 0 10px currentColor; }
.value-item:nth-child(3n+2) .idx { color: var(--c-violet); }
.value-item:nth-child(3n+3) .idx { color: var(--c-circuit); }
.value-item h4 { font-size: var(--fs-h5); margin-top: var(--sp-2); }
.value-item p { color: var(--c-slate); margin-top: var(--sp-2); }
@media (max-width: 760px) { .values-list { grid-template-columns: 1fr; } }

/* ---------- Prose block (rich text, optionally split with a side list) ---------- */
.prose-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7); align-items: start; }
.prose-row p + p { margin-top: var(--sp-4); }
.prose-row p { color: var(--c-slate); font-size: var(--fs-body-lg); line-height: var(--lh-normal); }
.prose-list { display: flex; flex-direction: column; gap: var(--sp-4); }
.prose-list li { display: flex; gap: var(--sp-3); align-items: flex-start; }
.prose-list .mark { font-family: var(--f-mono); font-size: 0.8125rem; color: var(--c-signal); flex-shrink: 0; padding-top: 3px; }
.prose-list .body strong { display: block; font-family: var(--f-display); font-weight: 600; font-size: 1.0625rem; }
.prose-list .body span { color: var(--c-slate); font-size: 0.9375rem; }
@media (max-width: 860px) { .prose-row { grid-template-columns: 1fr; } }

/* ---------- Timeline (History page) ---------- */
.timeline { display: flex; flex-direction: column; }
.timeline-item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--sp-5);
  padding-block: var(--sp-5);
  border-top: 1px solid var(--c-line);
}
.timeline-item:last-child { border-bottom: 1px solid var(--c-line); }
.timeline-item .year { font-family: var(--f-mono); font-size: 1.125rem; color: var(--c-signal); }
.timeline-item h4 { font-size: var(--fs-h5); }
.timeline-item p { color: var(--c-slate); margin-top: var(--sp-2); max-width: 60ch; }
@media (max-width: 700px) { .timeline-item { grid-template-columns: 1fr; gap: var(--sp-2); } }

/* ---------- FAQ accordion (native <details>) ---------- */
.faq-list { border-top: 1px solid var(--c-line); }
.faq-item { border-bottom: 1px solid var(--c-line); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  cursor: pointer;
  font-family: var(--f-display);
  font-size: var(--fs-h5);
  font-weight: 500;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .plus { flex-shrink: 0; width: 22px; height: 22px; position: relative; }
.faq-item summary .plus::before, .faq-item summary .plus::after {
  content: ""; position: absolute; background: var(--c-text);
  transition: transform var(--dur-fast) var(--ease-out);
}
.faq-item summary .plus::before { left: 0; top: 50%; width: 100%; height: 2px; transform: translateY(-50%); }
.faq-item summary .plus::after { top: 0; left: 50%; width: 2px; height: 100%; transform: translateX(-50%); }
.faq-item[open] summary .plus::after { transform: translateX(-50%) rotate(90deg); opacity: 0; }
.faq-item .faq-answer { color: var(--c-slate); font-size: var(--fs-body-lg); max-width: 68ch; padding-bottom: var(--sp-4); }

/* ---------- Job cards (Careers page) ---------- */
.job-list { display: flex; flex-direction: column; }
.job-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-5);
  border-top: 1px solid var(--c-line);
  flex-wrap: wrap;
}
.job-list .job-card:last-child { border-bottom: 1px solid var(--c-line); }
.job-card h4 { font-size: var(--fs-h5); }
.job-card .job-meta { display: flex; gap: var(--sp-3); margin-top: var(--sp-2); font-family: var(--f-mono); font-size: 0.8125rem; color: var(--c-slate); }
.job-card .job-meta span { display: flex; align-items: center; gap: 4px; }

/* ---------- Feature grid (Service page "what's included") ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
.feature-item {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-paper-raised);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.feature-item:hover { border-color: var(--c-signal); box-shadow: 0 10px 28px var(--glow-signal); transform: translateY(-2px); }
.feature-item .icon-badge {
  width: 44px; height: 44px; border-radius: var(--r-sm); flex-shrink: 0;
  background: var(--c-signal-soft); color: var(--c-signal);
  display: flex; align-items: center; justify-content: center;
}
.feature-item:nth-child(4n+2) .icon-badge { background: var(--c-violet-soft); color: var(--c-violet); }
.feature-item:nth-child(4n+3) .icon-badge { background: var(--c-circuit-soft); color: var(--c-circuit); }
.feature-item .icon-badge svg { width: 22px; height: 22px; }
.feature-item h4 { font-size: 1.0625rem; }
.feature-item p { color: var(--c-slate); font-size: 0.9375rem; margin-top: var(--sp-1); }
@media (max-width: 760px) { .feature-grid { grid-template-columns: 1fr; } }

/* ---------- Pricing / engagement tiers (Service pages) ---------- */
.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.tier-card {
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  background: var(--c-paper-raised);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.tier-card.is-featured { border-color: var(--c-signal); box-shadow: var(--shadow-md); position: relative; }
.tier-card .tier-badge { font-family: var(--f-mono); font-size: 0.75rem; color: var(--c-signal); text-transform: uppercase; letter-spacing: 0.06em; }
.tier-card h4 { font-size: var(--fs-h4); }
.tier-card .tier-desc { color: var(--c-slate); font-size: 0.9375rem; }
.tier-card ul { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: auto; }
.tier-card li { display: flex; gap: var(--sp-2); font-size: 0.9375rem; align-items: flex-start; }
.tier-card li svg { width: 16px; height: 16px; color: var(--c-circuit); flex-shrink: 0; margin-top: 2px; }
@media (max-width: 900px) { .tier-grid { grid-template-columns: 1fr; } }

/* ---------- Contact page ---------- */
.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7); align-items: start; }
.contact-info { display: flex; flex-direction: column; gap: var(--sp-6); }
.info-block .eyebrow { margin-bottom: var(--sp-2); }
.info-block a, .info-block p { color: var(--c-slate); font-size: 1rem; }
.info-block a { color: var(--c-text); transition: color var(--dur-fast); }
.info-block a:hover { color: var(--c-signal); }
.info-block .addr { margin-top: var(--sp-1); }

.contact-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.form-field { display: flex; flex-direction: column; gap: var(--sp-2); }
.form-field label { font-family: var(--f-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-slate); }
.form-field input, .form-field textarea, .form-field select {
  font-family: var(--f-body);
  font-size: 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-paper-raised);
  color: var(--c-text);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
  outline: none;
  border-color: var(--c-signal);
  box-shadow: 0 0 0 3px var(--c-signal-soft);
}
.form-field textarea { resize: vertical; min-height: 140px; }
.form-status { font-family: var(--f-mono); font-size: 0.875rem; min-height: 1.2em; }
.form-status[data-state="success"] { color: var(--c-circuit); }
.form-status[data-state="error"] { color: var(--c-warn); }
.contact-form .btn-primary { align-self: flex-start; }
@media (max-width: 860px) {
  .contact-layout { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
}

/* ---------- Map embed frame ---------- */
.map-frame { border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16 / 7; }
.map-frame iframe { width: 100%; height: 100%; border: 0; }

/* ---------- Per-page Three.js background canvas ----------
   Sits behind the page-intro content. Each page passes a different
   data-scene value so no two pages share the same ambient animation. */
.page-intro { position: relative; overflow: hidden; }
.page-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.5;
  pointer-events: none;
}
.page-intro > .container { position: relative; z-index: 1; }

/* Placeholder text must not sink into the input surface. */
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--c-slate); opacity: 1; }