/*
 * Site theme. Loads after site.css on every public page and brings the
 * shared components (nav, page headers, sections, cards, forms, CTA, footer)
 * in line with the homepage design. Homepage-only layout lives in home.css.
 */

:root {
  --ink: #0b1b3f;
  --signal: #1f5eff;
  --signal-deep: #1446d6;
  --paper: #f5f7fb;
  --rule: #dce2ee;
  --slate: #5a6480;
  --highlighter: #ffe36e;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --measure: 1240px;
  /* keep every section's content in one centred column without extra markup */
  --inline-pad: max(var(--gutter), calc((100% - var(--measure)) / 2));

  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --body: 'Archivo', 'Helvetica Neue', Arial, sans-serif;

  /* legacy site.css tokens, remapped */
  --navy: var(--ink);
  --navy-mid: #1c2b4f;
  --blue: var(--signal);
  --blue-light: #4a7dff;
  --accent: var(--signal);
  --accent2: #9db8ff;
  --text: #1c2747;
  --muted: var(--slate);
  --surface: var(--paper);
  --border: var(--rule);
  --font-mono: var(--body);
}

body {
  font-family: var(--body);
  font-variation-settings: 'wdth' 100;
  background: #fff;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--highlighter); color: var(--ink); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
h1, h2, h3, h4 { text-wrap: balance; }

/* Motion: content is visible on arrival instead of fading in section by section */
.fade-in { opacity: 1; transform: none; transition: none; }

/* ── Nav ── */
#navbar {
  background: color-mix(in srgb, #fff 94%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  height: 72px; padding-inline: var(--gutter);
}
#navbar.scrolled { border-bottom-color: var(--rule); }
.nav-logo-img { mix-blend-mode: multiply; }
.nav-links a { color: var(--slate); font-size: .92rem; font-weight: 500; }
.nav-links a:hover, .nav-links a.active { color: var(--ink); font-weight: 500; }
.nav-links a.active { text-decoration: underline; text-decoration-color: var(--signal); text-decoration-thickness: 2px; text-underline-offset: .5em; }
.nav-cta { background: var(--ink); border-radius: 10px; font-weight: 600; padding: .6rem 1.15rem; }
.nav-cta:hover { background: var(--signal); }

/* ── Buttons ── */
.btn-primary, .btn-secondary, .btn-white, .btn-ghost {
  min-height: 3.25rem; padding: 0 1.6rem; border-radius: 10px;
  font-family: var(--body); font-size: 1rem; font-weight: 620;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid transparent; transform: none;
  transition: background .2s, color .2s, border-color .2s;
}
.btn-primary { background: var(--signal); color: #fff; }
.btn-primary:hover { background: var(--signal-deep); transform: none; }
.btn-secondary { background: transparent; color: var(--ink); border-color: color-mix(in srgb, var(--ink) 22%, transparent); }
.btn-secondary:hover { background: transparent; border-color: var(--ink); color: var(--ink); transform: none; }
.btn-white { background: #fff; color: var(--ink); }
.btn-white:hover { background: #e8eeff; transform: none; }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.3); }
.btn-ghost:hover { border-color: #fff; background: transparent; }

/* ── Sections and headings ── */
section { padding: clamp(4.5rem, 9vw, 7.5rem) var(--inline-pad); }
.compact-section { padding-block: 2rem; }
.content-wrap { max-width: none; }

/* Eyebrow labels above headings are dropped; the heading carries the section */
.section-tag { display: none; }

.section-header, .section-header.center { text-align: left; margin-bottom: clamp(2.5rem, 5vw, 3.75rem); max-width: 60rem; }
.section-header.center .section-sub { margin: 0; }
.section-header.spaced { margin-top: clamp(4rem, 7vw, 6rem); }
.section-h2 {
  font-family: var(--display);
  font-variation-settings: 'wdth' 118;
  font-size: clamp(2rem, 3.6vw, 3.1rem);
  font-weight: 640; line-height: 1.04; letter-spacing: -0.025em;
  color: var(--ink); max-width: 22ch; margin-bottom: 1.1rem;
}
.section-sub { font-size: 1.125rem; line-height: 1.6; color: var(--slate); max-width: 52ch; }
.text-center { text-align: left; }
section h3 { font-family: var(--display); font-variation-settings: 'wdth' 108; letter-spacing: -0.01em; }

/* Page header: the first block on every inner page */
.page-hero { background: var(--paper); padding-inline: var(--inline-pad); padding-block: 3rem clamp(3.5rem, 7vw, 5.5rem); border-bottom: 1px solid var(--rule); }
.page-hero:first-child { padding-top: clamp(7.5rem, 12vw, 9.5rem); }
.page-hero .section-header { margin-bottom: 0; max-width: none; }
.page-hero .section-h2 {
  font-size: clamp(2.5rem, 5.6vw, 5rem);
  font-weight: 660; line-height: .98; letter-spacing: -0.035em;
  max-width: 17ch; margin-bottom: 1.5rem;
}
.page-hero .section-sub { font-size: clamp(1.08rem, 1.3vw, 1.25rem); max-width: 50ch; }
.hero-btns, .hero-btns.center { justify-content: flex-start; gap: .75rem; margin-top: 2.25rem; }
.cta-actions.center { justify-content: flex-start; }

/* Breadcrumbs sit inside the page header band */
.breadcrumb-trail { background: var(--paper); padding: 6.5rem var(--inline-pad) 0; }
.breadcrumb-trail + .page-hero { padding-top: 2rem; }
.breadcrumb-trail a, .breadcrumb-trail span { font-size: .9rem; }
.breadcrumb-trail a { color: var(--slate); }
.breadcrumb-trail span[aria-current] { color: var(--ink); }

/* Alternating backgrounds use paper instead of blue tint */
#services, #industries, #portfolio, #pricing, #capabilities, .booking-section { background: var(--paper); }
#systems { background: #fff; }
#systems::before { display: none; }

/* ── Cards become ruled columns, matching the homepage ── */
.services-grid, .features-grid, .industry-grid, .trust-grid, .problem-grid { gap: clamp(1.75rem, 3.5vw, 3rem); }
.service-card, .industry-card, .trust-card, .problem-card, .feature-card {
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  border-top: 2px solid var(--ink); padding: 1.5rem 0 0; min-height: 0;
  transform: none; transition: none;
}
.service-card::before { display: none; }
.service-card:hover, .industry-card:hover, .problem-card:hover { transform: none; box-shadow: none; border-color: var(--ink); }
.problem-card:hover h3 { color: var(--signal); }
.service-card h3, .industry-card h3, .trust-card h3, .problem-card h3 { font-size: 1.3rem; font-weight: 640; color: var(--ink); line-height: 1.2; margin-bottom: .7rem; }
.service-card p, .industry-card p, .trust-card p, .problem-card p { font-size: 1rem; color: var(--slate); line-height: 1.6; }
.service-icon, .industry-card span, .industry-icon {
  width: auto; height: auto; background: none; border: 0; border-radius: 0;
  color: var(--signal); margin-bottom: 1rem; justify-content: flex-start;
}
.service-icon svg, .industry-card span svg { width: 28px; height: 28px; }
.service-link { opacity: 1; transform: none; font-size: .95rem; margin-top: 1rem; text-decoration: underline; text-underline-offset: .28em; text-decoration-color: color-mix(in srgb, var(--signal) 35%, transparent); }
.service-link:hover { text-decoration-color: var(--signal); }
.problem-tag { display: none; }
.problem-solution, .trust-card a { font-size: .95rem; font-weight: 600; color: var(--signal); }
.trust-card a { text-decoration: underline; text-underline-offset: .28em; }

/* Dark band */
#features { background: var(--ink); }
#features .section-h2 { color: #fff; }
#features .section-sub { color: rgba(255,255,255,.68); }
.feature-card { border-top: 1px solid rgba(255,255,255,.2); }
.feature-node { display: none; }
.feature-icon-wrap { background: none; border: 0; width: auto; height: auto; justify-content: flex-start; color: #9db8ff; }
.feature-card h3 { font-size: 1.2rem; color: #fff; font-weight: 640; }
.feature-card p { font-size: 1rem; color: rgba(255,255,255,.68); }

/* Process: a real sequence, so the numbers stay */
.process-steps { gap: clamp(1.5rem, 3vw, 2.5rem); }
.process-step { border-top: 2px solid var(--ink); padding-top: 1.4rem; }
.step-num { font-family: var(--display); font-variation-settings: 'wdth' 118; font-size: 1.1rem; font-weight: 650; color: var(--signal); margin-bottom: .8rem; }
.process-step h3 { font-size: 1.2rem; font-weight: 640; color: var(--ink); }
.process-step p { font-size: 1rem; color: var(--slate); }
.process-steps::before { display: none; }

/* Chip list becomes a plain link list */
.chip-grid { max-width: none; gap: 0 2.5rem; }
.service-chip {
  border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; background: transparent;
  padding: 1rem 0; font-size: 1rem; font-weight: 500; color: var(--ink);
}
.service-chip:hover { background: transparent; color: var(--signal); border-color: var(--rule); }
.chip-dot { display: none; }
.service-chip.more { background: transparent; justify-content: flex-start; color: var(--signal); font-weight: 600; }

/* ── Boxed components keep a box, restyled consistently ── */
.system-card, .price-card, .portfolio-card, .blog-card, .testi-card, .case-card, .compare-panel, .systems-copy, .toc, .booking-fallback {
  border-radius: 16px; border: 1px solid var(--rule); box-shadow: none;
}
.system-card, .portfolio-card, .blog-card, .price-card { background: #fff; }
.system-card:hover, .portfolio-card:hover, .blog-card:hover { transform: none; box-shadow: none; border-color: color-mix(in srgb, var(--ink) 40%, transparent); }
.system-card h3, .portfolio-info h3, .blog-card h3, .price-card h3 { color: var(--ink); font-weight: 640; font-size: 1.3rem; line-height: 1.2; }
.system-card p, .portfolio-info p, .blog-card p, .price-card p { font-size: 1rem; color: var(--slate); }
.system-icon { background: none; border: 0; color: var(--signal); }
.system-tag, .portfolio-tag, .price-label, .systems-kicker, .article-meta .article-category, .compare-label, .case-card span, .toc-title {
  font-family: var(--body); text-transform: none; letter-spacing: 0;
  font-size: .9rem; font-weight: 600; color: var(--signal); background: none; padding: 0; border: 0;
}
.tech-badge {
  font-family: var(--body); text-transform: none; letter-spacing: 0;
  background: var(--paper); color: var(--slate); border: 1px solid var(--rule); border-radius: 999px;
  font-size: .82rem; font-weight: 500; padding: .2rem .65rem;
}
.portfolio-link { border-radius: 10px; font-weight: 600; }
.portfolio-link.secondary { border-color: color-mix(in srgb, var(--ink) 22%, transparent); }
.system-link { text-transform: none; letter-spacing: 0; font-weight: 600; border-radius: 10px; }
.filter-btn { font-family: var(--body); border-radius: 999px; font-weight: 500; }
.filter-btn:hover, .filter-btn.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.filter-tabs { justify-content: flex-start; }

.price-card.featured { border-color: var(--ink); box-shadow: none; transform: none; outline: 1px solid var(--ink); }
.price { font-family: var(--display); font-variation-settings: 'wdth' 118; font-weight: 650; letter-spacing: -0.02em; }

.compare-panel { background: #fff; }
.compare-panel.after { background: var(--ink); border-color: var(--ink); }

/* Testimonials: quotes, not decorated cards */
.testi-card { background: transparent; border: 0; border-top: 1px solid var(--rule); border-radius: 0; padding: 1.5rem 0 0; min-height: 0; }
.testi-card:hover { box-shadow: none; border-color: var(--rule); }
.stars { display: none; }
.testi-text { font-style: normal; font-size: 1.15rem; line-height: 1.55; color: var(--ink); }
.author-avatar { display: none; }
.author-name { font-size: 1rem; font-weight: 620; color: var(--ink); }
.author-role { font-size: .95rem; color: var(--slate); }

/* FAQ */
.faq-list { max-width: 52rem; margin-inline: 0; border-top: 1px solid var(--ink); }
.faq-item { background: transparent; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; box-shadow: none; padding: 1.35rem 0; }
.faq-item span { font-size: 1.1rem; font-weight: 600; color: var(--ink); }
.faq-item p { font-size: 1rem; color: var(--slate); }

/* Legal and articles */
.legal-content, .article-meta, .toc { margin-inline: 0; }
.legal-content h2 { font-family: var(--display); font-variation-settings: 'wdth' 112; font-weight: 640; }
.legal-content a, .toc a { text-decoration: underline; text-underline-offset: .2em; }

/* ── Inquiry form (shared partial) ── */
#inquiry { background: var(--paper); }
.inquiry-layout { margin: 0; max-width: 46rem; }
.lead-form {
  background: #fff; border: 1px solid var(--rule); border-radius: 20px; box-shadow: none;
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
}
.lead-form label {
  font-family: var(--body); text-transform: none; letter-spacing: 0;
  font-size: .92rem; font-weight: 600; color: var(--ink);
}
.lead-form input, .lead-form select, .lead-form textarea {
  font-family: var(--body); font-size: 1rem; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule); border-radius: 10px; min-height: 3.1rem;
}
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus {
  background: #fff; border-color: var(--signal); box-shadow: 0 0 0 3px rgba(31,94,255,.16);
}
.consent-check { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--slate); }
.consent-check input { min-height: 0; accent-color: var(--signal); }
.lead-form .btn-primary { justify-self: start; }

/* ── Closing CTA band ── */
#cta { background: var(--ink); text-align: left; padding: clamp(5rem, 10vw, 8rem) var(--inline-pad); border-top: 0; }
.cta-inner { max-width: none; margin: 0; }
#cta .section-h2 { color: #fff; font-size: clamp(2.2rem, 4.4vw, 3.8rem); max-width: 18ch; }
#cta .section-sub { color: rgba(255,255,255,.72); margin: 0 0 2.5rem; }
.cta-actions { justify-content: flex-start; gap: .75rem; }
.cta-actions .btn-white, .cta-actions .btn-ghost { min-width: 0; min-height: 3.25rem; }

/* ── Footer ── */
footer { background: #07122c; padding: clamp(3.5rem, 6vw, 5rem) var(--inline-pad) 2rem; color: rgba(255,255,255,.6); }
.footer-top { border-bottom-color: rgba(255,255,255,.12); }
.footer-logo-img { width: min(100%, 220px); border-radius: 10px; }
.footer-brand p { font-size: .95rem; color: rgba(255,255,255,.6); max-width: 34ch; }
.footer-col h4 { text-transform: none; letter-spacing: 0; font-size: .95rem; font-weight: 600; color: #fff; }
.footer-col ul a { font-size: .95rem; color: rgba(255,255,255,.62); }
.footer-col ul a:hover { color: #fff; }
.footer-col ul li { color: rgba(255,255,255,.62); font-size: .95rem; }
.footer-bottom { font-size: .88rem; color: rgba(255,255,255,.5); }
.footer-bottom a { color: rgba(255,255,255,.7); }

/* ── Quick contact ── */
.quick-contact a { background: var(--ink); font-weight: 600; font-family: var(--body); }
.quick-contact a:hover { background: var(--signal); }

@media (max-width: 1024px) {
  .industry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  #navbar { height: 64px; }
  #navbar.menu-open .nav-links { top: 64px; }
  section { padding: 4rem var(--gutter); }
  .page-hero:first-child { padding-top: 6.5rem; }
  .breadcrumb-trail { padding-top: 5.5rem; }
  .hero-btns .btn-primary, .hero-btns .btn-secondary { width: 100%; }
  .chip-grid { grid-template-columns: 1fr; }
  .process-steps { grid-template-columns: 1fr; }
  /* site.css sets right:auto on the mobile contact bar, which shrinks it to its content */
  .quick-contact { right: 0; }
  .quick-contact a { background: transparent; color: var(--ink); }
}

/* ── Alignment: legacy containers were centred; the theme aligns everything to the left edge of the column ── */
.compare-grid, .systems-grid, .systems-showcase, .testi-grid, .automation-showcase-wrap, .case-study-wrap, .team-wrap,
.capability-wrap, .trust-strip, .booking-embed, .faq-list, .legal-content, .article-meta, .toc {
  margin-left: 0; margin-right: auto;
}
.compare-grid, .systems-grid, .systems-showcase, .testi-grid, .automation-showcase-wrap, .case-study-wrap, .team-wrap, .capability-wrap { max-width: none; }
.trust-strip { justify-content: flex-start; }
.booking-fallback { margin-left: 0; text-align: left; }
.booking-fallback-actions { justify-content: flex-start; }

/* Before/after panels */
.compare-panel { padding: clamp(1.5rem, 3vw, 2.25rem); }
.compare-panel li { font-size: 1rem; }
.compare-panel:not(.after) li::before { content: '–'; color: var(--slate); }
.compare-panel.after .compare-label { color: #9db8ff; }
.compare-panel.after li { color: #fff; }
.compare-panel.after li::before { color: #5fe0a6; }

/* Demo pages (system-demos.css loads after this file, so these need the extra specificity) */
section .demo-feature, section .demo-request-feature, section .demo-capability-grid { max-width: none; margin-left: 0; margin-right: 0; }

/* Shared inquiry section: heading beside the form, like the homepage */
section#inquiry {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 6vw, 6rem); align-items: start;
}
section#inquiry .section-header { margin-bottom: 0; position: sticky; top: 110px; }
section#inquiry .inquiry-layout { max-width: none; grid-template-columns: minmax(0, 1fr); }
@media (max-width: 900px) {
  section#inquiry { grid-template-columns: 1fr; }
  section#inquiry .section-header { position: static; }
}

/* ── Case study detail ── */
.cs-category { color: var(--signal); font-weight: 600; margin-bottom: 1rem; }
.cs-overview { padding-bottom: 0; }
.cs-shot { margin: 0 0 clamp(2.5rem, 5vw, 4rem); border-radius: 18px; overflow: hidden; box-shadow: 0 0 0 1px rgba(11,27,63,.08), 0 30px 70px -30px rgba(11,27,63,.4); }
.cs-shot img { display: block; width: 100%; height: auto; }
.cs-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
.cs-facts > div { border-top: 2px solid var(--ink); padding-top: 1rem; }
.cs-facts dt { color: var(--slate); font-size: .95rem; margin-bottom: .35rem; }
.cs-facts dd { margin: 0; font-weight: 620; color: var(--ink); font-size: 1.1rem; line-height: 1.35; }
.cs-result p {
  font-family: var(--display); font-variation-settings: 'wdth' 118;
  font-size: clamp(2rem, 4.4vw, 3.8rem); font-weight: 650; line-height: 1.05; letter-spacing: -0.03em;
  color: var(--ink); max-width: 20ch; text-wrap: balance;
}
.cs-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; border-top: 1px solid var(--rule); }
.cs-split .section-h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); margin: 0; }
.cs-prose { display: grid; gap: 1.1rem; max-width: 62ch; }
.cs-prose p { font-size: 1.125rem; line-height: 1.65; color: var(--text); }
.cs-modules { list-style: none; border-top: 1px solid var(--ink); margin-top: .75rem; }
.cs-modules li { padding: .9rem 0; border-bottom: 1px solid var(--rule); font-weight: 560; color: var(--ink); }
.cs-tech-label { font-size: .95rem !important; color: var(--slate) !important; margin-top: .75rem; }
.cs-quote { background: var(--ink); color: #fff; }
.cs-quote figure { margin: 0; max-width: 56rem; }
.cs-quote blockquote { font-size: clamp(1.4rem, 2.6vw, 2.1rem); line-height: 1.4; letter-spacing: -0.01em; text-wrap: pretty; }
.cs-quote figcaption { margin-top: 1.75rem; color: rgba(255,255,255,.68); }
.cs-quote figcaption strong { display: block; color: #fff; font-weight: 620; }
.cs-related ul { list-style: none; border-top: 1px solid var(--ink); }
.cs-related a { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 1.1rem; }
.cs-related a:hover span { color: var(--signal); }
.cs-related small { color: var(--slate); font-weight: 400; font-size: .95rem; white-space: nowrap; }
@media (max-width: 900px) {
  .cs-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-split { grid-template-columns: 1fr; }
}