/* ---------- Talk to an Engineer — premium consultation-page styles ----------
   Uses the site's standard hub-banner (from ../styles.css) for nav consistency,
   but everything below it is a deliberately elevated, consultancy-grade visual
   register: generous whitespace, blueprint-grid texture, numbered/lettered
   micro-labels, restrained motion — closer to a technical consultancy's intake
   page than an industrial brochure. */

body { background: #fff; }

.blueprint-bg {
  position: relative;
}
.blueprint-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(107,114,128,0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107,114,128,0.09) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 40%, transparent 90%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 40%, transparent 90%);
}
.blueprint-bg > * { position: relative; z-index: 1; }

/* Corner-bracket motif — a small blueprint "registration mark" reused on the hero
   and on each tile so the two visual moments feel like one design language. */
.corner-brackets { position: relative; }
.corner-brackets::before, .corner-brackets::after,
.corner-brackets .bracket-tr, .corner-brackets .bracket-bl {
  content: ""; position: absolute; width: 16px; height: 16px; border-color: var(--brand-steel); opacity: 0.35;
  transition: opacity 0.25s ease, border-color 0.25s ease;
}
.corner-brackets::before { top: -1px; left: -1px; border-top: 1.5px solid; border-left: 1.5px solid; }
.corner-brackets::after { bottom: -1px; right: -1px; border-bottom: 1.5px solid; border-right: 1.5px solid; }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s cubic-bezier(0.2,0.7,0.2,1), transform 0.7s cubic-bezier(0.2,0.7,0.2,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- Hero ---------- */
.intake-hero { padding: 108px 0 88px; text-align: center; }
.intake-hero-inner { max-width: 720px; margin: 0 auto; animation: heroFadeUp 0.9s cubic-bezier(0.2,0.7,0.2,1) both; }
@keyframes heroFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

.intake-eyebrow {
  text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.74rem; font-weight: 700;
  color: var(--brand-accent); margin: 0 0 22px; display: flex; align-items: center; justify-content: center; gap: 10px;
}
.intake-eyebrow::before, .intake-eyebrow::after { content: ""; width: 28px; height: 1px; background: currentColor; opacity: 0.5; }

.intake-hero h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); margin: 0 0 26px; font-weight: 800; letter-spacing: -0.025em; }
.intake-hero p { font-size: 1.2rem; font-weight: 300; line-height: 1.6; color: var(--ink-soft); max-width: 580px; margin: 0 auto; }

/* ---------- Form section ---------- */
.intake-form-section { padding: 56px 0 100px; scroll-margin-top: 24px; }
.intake-form-wrap { max-width: 560px; margin: 0 auto; }

.intake-form-heading { font-size: 1.5rem; margin: 0 0 6px; text-align: center; }
.intake-form-subhead { color: var(--ink-soft); font-size: 0.95rem; margin: 0 0 32px; text-align: center; }

.intake-form { display: flex; flex-direction: column; animation: formFadeIn 0.5s cubic-bezier(0.2,0.7,0.2,1) both; }
@keyframes formFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.intake-field { display: flex; flex-direction: column; margin-bottom: 26px; }
.intake-field label { font-size: 0.85rem; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.intake-field .optional { font-weight: 400; color: var(--ink-soft); }

.intake-field input, .intake-field textarea, .intake-field select {
  border: none;
  border-bottom: 1.5px solid var(--border);
  padding: 10px 2px;
  font-size: 1.05rem;
  font-family: inherit;
  color: var(--ink);
  background: transparent;
  transition: border-color 0.15s ease;
  resize: vertical;
  appearance: none;
  border-radius: 0;
}
.intake-field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%), linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 12px) 18px, calc(100% - 6px) 18px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.intake-field input:focus, .intake-field textarea:focus, .intake-field select:focus {
  outline: none;
  border-bottom-color: var(--brand-accent);
}
.intake-field textarea { min-height: 100px; line-height: 1.5; }

.intake-submit { margin-top: 12px; align-self: flex-start; }

.intake-microcopy { margin-top: 18px; font-size: 0.85rem; color: var(--ink-soft); }

/* Success state */
.intake-success { display: none; text-align: center; padding: 40px 0; }
.intake-success.is-visible { display: block; animation: formFadeIn 0.5s cubic-bezier(0.2,0.7,0.2,1) both; }
.intake-success-icon { width: 52px; height: 52px; margin: 0 auto 20px; color: var(--brand-accent); }
.intake-success h2 { font-size: 1.4rem; margin: 0 0 10px; }
.intake-success p { color: var(--ink-soft); max-width: 440px; margin: 0 auto; }

/* ---------- Testimonial ---------- */
.intake-testimonial-section { padding: 8px 0 96px; }
.intake-testimonial { max-width: 720px; margin: 0 auto; text-align: center; }
.intake-testimonial-mark { font-size: 4.5rem; line-height: 1; color: var(--brand-accent); opacity: 0.25; font-family: Georgia, serif; margin-bottom: 4px; }
.intake-testimonial blockquote { margin: 0 0 24px; font-size: 1.35rem; font-weight: 300; line-height: 1.55; color: var(--brand-charcoal); letter-spacing: -0.01em; }
.intake-testimonial-attribution { font-size: 0.9rem; font-weight: 700; color: var(--ink); }
.intake-testimonial-attribution span { display: block; font-weight: 500; color: var(--ink-soft); font-size: 0.85rem; margin-top: 2px; }

/* ---------- Final CTA ---------- */
.intake-final-cta { padding: 88px 0 108px; background: var(--brand-charcoal); text-align: center; }
.intake-final-cta-inner { max-width: 620px; margin: 0 auto; }
.intake-final-cta .intake-eyebrow { color: var(--brand-accent); }
.intake-final-cta h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.1rem); margin: 0 0 20px; }
.intake-final-cta p { color: #c7ccd4; font-size: 1.05rem; line-height: 1.65; margin: 0 0 32px; }

/* ---------- Footer ---------- */
.intake-footer { padding: 28px 0; border-top: 1px solid var(--border); text-align: center; }
.intake-footer p { margin: 0; font-size: 0.82rem; color: #94a3b8; }

@media (max-width: 640px) {
  .intake-hero { padding: 72px 0 56px; }
  .intake-form-section { padding: 40px 0 72px; }
  .intake-final-cta { padding: 64px 0 80px; }
}