/* ==========================================================================
   AI Contracting — custom layer on top of Tailwind
   Only what Tailwind utilities can't express cleanly, or what must exist
   before Tailwind's CDN runtime finishes (to avoid a flash of unstyled text).
   ========================================================================== */

:root {
  --brand:      #A23231;
  --brand-dark: #7E2624;
  --brand-tint: #FBF1F1;
  --ink:        #171719;
  --ink-muted:  #5A5C63;
  --slate-900:  #1E2229;
  --line:       #E4E5E9;
}

/* Pre-Tailwind baseline so the first paint isn't unstyled ------------------ */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  background: #fff;
  line-height: 1.7;
}
img { max-width: 100%; height: auto; display: block; }

/* Defensive default. Inline SVG with no intrinsic size expands to fill its
   container, so if a stylesheet ever fails to load the icons would blow the
   layout apart. This caps them regardless. */
svg { width: 1.5rem; height: 1.5rem; flex: none; }

h1, h2, h3, h4, .font-display {
  font-family: "Barlow Condensed", Impact, sans-serif;
  letter-spacing: -0.01em;
}

/* Accessibility ----------------------------------------------------------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--brand); color: #fff; padding: .75rem 1.25rem; font-weight: 600;
}
.skip-link:focus { left: 0; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: 3px;
}

html { scroll-behavior: smooth; }
/* Offset anchor targets so the sticky header doesn't cover the heading */
[id] { scroll-margin-top: 100px; }

/* Buttons ---------------------------------------------------------------- */
.btn-primary,
.btn-outline,
.btn-ghost {
  display: inline-flex; align-items: center; gap: .5rem;
  height: 3rem; padding: 0 1.5rem;
  border-radius: 4px;
  font-weight: 600; font-size: .95rem; line-height: 1;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
  cursor: pointer;
}
.btn-primary { background: var(--brand); color: #fff; border: 1px solid var(--brand); }
.btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }

.btn-outline { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn-outline:hover { border-color: var(--brand); color: var(--brand); }

.btn-ghost { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.45); }
.btn-ghost:hover { background: rgba(255,255,255,.22); }

/* Section eyebrow — the brand signature: a thin red rule, echoing the
   vertical bars of the "I" in the logo mark. Used on every section label. */
.eyebrow {
  display: inline-flex; align-items: center; gap: .625rem;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600; font-size: 1rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand);
}
.eyebrow::before {
  content: ""; width: 30px; height: 3px; background: var(--brand); flex: none;
}
.eyebrow--light { color: #fff; }
.eyebrow--light::before { background: #fff; }

/* Cards ------------------------------------------------------------------- */
.card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.card::before {
  content: ""; position: absolute; inset: -1px -1px auto -1px; height: 3px;
  background: var(--brand); border-radius: 10px 10px 0 0;
  opacity: 0; transition: opacity .22s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px -8px rgba(23,23,25,.16); border-color: #d8dade; }
.card:hover::before { opacity: 1; }

/* Image placeholder — shown until the generated image is dropped in ------- */
.ph {
  position: relative;
  background:
    repeating-linear-gradient(135deg, rgba(162,50,49,.06) 0 12px, rgba(162,50,49,.11) 12px 24px),
    var(--brand-tint);
  border: 1px dashed rgba(162,50,49,.3);
  display: grid; place-items: center;
  min-height: 180px;
  color: var(--brand);
}
.ph-label {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .72rem; letter-spacing: .02em;
  background: rgba(255,255,255,.85); padding: .35rem .6rem; border-radius: 3px;
  text-align: center; max-width: 90%;
}

/* Scroll reveal ----------------------------------------------------------
   Scoped to .js, which the inline script in header.php adds to <html>.
   Without that guard, a visitor with JavaScript disabled — or a crawler that
   does not execute it — would get a page of content stuck at opacity 0.
   Progressive enhancement: hidden only when something can un-hide it. */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .card:hover { transform: none; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* Prose-ish body copy inside service sections ---------------------------- */
.copy > p { margin: 0 0 1rem; color: var(--ink-muted); }
.copy > p:last-child { margin-bottom: 0; }
.copy strong { color: var(--ink); font-weight: 600; }

/* Sticky service pill nav ------------------------------------------------ */
.pill {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .85rem; border-radius: 999px;
  border: 1px solid var(--line); background: #fff;
  font-size: .875rem; font-weight: 500; color: var(--ink-muted);
  text-decoration: none; white-space: nowrap;
  transition: all .18s ease;
}
.pill:hover { border-color: var(--brand); color: var(--brand); }
.pill.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* Hide the scrollbar on the horizontal service pill nav ------------------ */
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Form ------------------------------------------------------------------- */
.field {
  width: 100%; padding: .75rem .9rem;
  border: 1px solid var(--line); border-radius: 5px;
  font: inherit; font-size: .95rem; color: var(--ink); background: #fff;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.field:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(162,50,49,.13);
}
.field[aria-invalid="true"] { border-color: #C0392B; background: #FEF7F6; }
.field-label { display: block; font-size: .875rem; font-weight: 600; margin-bottom: .375rem; color: var(--ink); }
.field-error { display: block; font-size: .8125rem; color: #C0392B; margin-top: .3rem; }
.req { color: var(--brand); }

/* Honeypot — must be invisible to humans but present for bots ------------ */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Print ------------------------------------------------------------------ */
@media print {
  #siteHeader, #waFab, footer, .btn-primary, .btn-outline { display: none !important; }
  body { color: #000; }
}