/* ==========================================================================
   PRESWERX: AI Agents for Architecture Firms
   Shared design system. One file, reused across every page of this site.
   ========================================================================== */

/* ---------- Self-hosted brand fonts ----------
   Body copy: Roboto (official PRESWERX brand font, all weights supplied).
   Headers: the brand guide specifies "Utility Pro Black", but that font
   file was not included in the upload. Roboto Black stands in for it
   here. Swap the src below for the real file and nothing else needs to
   change once it's available. */
@font-face {
  font-family: 'Roboto';
  font-weight: 400;
  font-style: normal;
  src: url('../fonts/Roboto-Regular.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  font-weight: 500;
  font-style: normal;
  src: url('../fonts/Roboto-Medium.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  font-weight: 600;
  font-style: normal;
  src: url('../fonts/Roboto-SemiBold.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  font-weight: 700;
  font-style: normal;
  src: url('../fonts/Roboto-Bold.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  font-weight: 800;
  font-style: normal;
  src: url('../fonts/Roboto-ExtraBold.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  font-weight: 900;
  font-style: normal;
  src: url('../fonts/Roboto-Black.ttf') format('truetype');
  font-display: swap;
}

:root {
  /* Official PRESWERX brand palette (PRESWERX_Brand_Quick_Guide.pdf) */
  --navy-900: #142152;  /* PX Dark Blue */
  --blue-500: #1E79FE;  /* PX Bright Blue */
  --blue-400: #00AFFF;  /* PX Accent 01 */
  --blue-300: #BAD6FF;  /* PX Accent 02 */

  /* Derived-only shades: the brand guide gives 4 flat colors + 2 gradients,
     not a full tint/shade ramp. These extend that palette for things the
     guide doesn't specify a color for (hover states, large pale washes),
     always derived from the four colors above, never a new hue. */
  --navy-800: #1B2B66;
  --blue-600: #135FDB;
  --blue-100: #EAF4FF;
  --blue-50:  #F5F9FF;

  --ink:      #16192B;
  --slate-600:#4A5170;
  --slate-400:#8891AA;
  --line:     #E4E9F5;
  --white:    #FFFFFF;

  /* Official gradients */
  --grad-bright: linear-gradient(120deg, var(--blue-500), var(--blue-400));
  --grad-dark:   linear-gradient(135deg, var(--navy-900), var(--blue-500));

  --font-display: 'Roboto', 'Segoe UI', Arial, sans-serif;
  --font-body: 'Roboto', 'Segoe UI', Arial, sans-serif;

  /* Spacing scale: used for consistent rhythm across sections/components */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  /* Layered shadows: soft ambient + tighter contact shadow, stacked */
  --shadow-card: 0 2px 4px rgba(20,33,82,0.04), 0 12px 30px rgba(20, 33, 82, 0.08);
  --shadow-card-hover: 0 4px 8px rgba(20,33,82,0.06), 0 24px 48px rgba(20, 33, 82, 0.16);
  --shadow-btn: 0 10px 24px rgba(30,121,254,0.35);
  --shadow-btn-hover: 0 14px 32px rgba(30,121,254,0.45);

  --container: 1160px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 1.15;
  margin: 0 0 16px;
  color: var(--navy-900);
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.1rem, 4vw, 3.1rem); font-weight: 900; }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 16px; color: var(--slate-600); }

a { color: var(--blue-500); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg { max-width: 100%; display: block; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-500);
  margin-bottom: 10px;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-bright);
}
.section--navy .eyebrow { color: var(--blue-300); }

/* Gradient accent text: used inside H1/H2 spans, e.g. <span class="accent"> */
.accent {
  background: var(--grad-bright);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.section {
  padding: var(--space-8) 0;
  background: linear-gradient(135deg, #ffffff 0%, var(--blue-50) 55%, var(--blue-100) 100%);
}
.section--tight {
  padding: var(--space-7) 0;
  background: linear-gradient(135deg, var(--blue-100) 0%, var(--blue-50) 45%, #ffffff 100%);
}
.section--navy {
  background:
    radial-gradient(circle at 12% -10%, rgba(30,121,254,0.35) 0%, transparent 45%),
    radial-gradient(circle at 100% 115%, rgba(0,175,255,0.28) 0%, transparent 50%),
    linear-gradient(150deg, var(--navy-900) 0%, var(--navy-800) 60%, var(--navy-900) 100%);
  color: #fff;
  position: relative;
}
.section--navy h2, .section--navy h3 { color: #fff; }
.section--navy p { color: #C4CDEE; }
/* Opaque white cards floating inside a navy section keep their normal
   light-background text colors. Only text sitting directly on the navy
   background itself should flip to white/light-blue. */
.section--navy .service-card h3,
.section--navy .stat-card h3 { color: var(--navy-900); }
.section--navy .service-card p,
.section--navy .stat-card p { color: var(--slate-600); }

/* Subtle dot-grid texture, used behind hero/page-hero content for depth */
.dot-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.14) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  pointer-events: none;
}
.hero .dot-grid {
  background-image: radial-gradient(rgba(20,33,82,0.08) 1.5px, transparent 1.5px);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  padding: 14px 28px;
  border-radius: 15px;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none !important;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.55s ease;
}
.btn:hover::before { transform: translateX(120%); }
.btn-primary {
  background: var(--grad-bright);
  color: #fff !important;
  box-shadow: var(--shadow-btn);
}
.btn-primary:hover { box-shadow: var(--shadow-btn-hover); transform: translateY(-2px); }
.btn-outline {
  background: transparent;
  border-color: var(--navy-900);
  color: var(--navy-900) !important;
}
.btn-outline:hover { background: var(--navy-900); color: #fff !important; transform: translateY(-2px); }
.btn-outline-white {
  background: transparent;
  border-color: rgba(255,255,255,0.5);
  color: #fff !important;
}
.btn-outline-white:hover { background: #fff; color: var(--navy-900) !important; transform: translateY(-2px); }
.section--navy .btn-outline {
  border-color: rgba(255,255,255,0.5);
  color: #fff !important;
}
.section--navy .btn-outline:hover { background: #fff; color: var(--navy-900) !important; }
.btn-block { width: 100%; justify-content: center; }

/* ---------- Header / Nav ---------- */
.topbar {
  background: var(--navy-900);
  color: #cfd8f5;
  font-size: 0.82rem;
}
.topbar .container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 28px;
  flex-wrap: wrap;
  padding-top: 8px;
  padding-bottom: 8px;
  max-width: none;
  padding-left: 32px;
  padding-right: 32px;
}
.topbar a { color: #cfd8f5; }
.topbar a:hover { color: #fff; }
.topbar-info { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; row-gap: 6px; }
.topbar-contact-link { display: inline-flex; align-items: center; gap: 6px; }
.topbar-contact-link svg { flex: none; }
.topbar-link {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.03em;
}
.topbar-social { display: flex; align-items: center; gap: 13px; }
.topbar-social a { display: inline-flex; }
.topbar-social svg { display: block; }
.topbar-social a:hover { color: #fff; }

@media (max-width: 860px) {
  /* Keep only phone/email on small screens. The extra nav-style links and
     social row get crowded next to a stacked, centered layout. */
  .topbar-link, .topbar-social { display: none; }
  .topbar .container { justify-content: center; }
  .topbar-info { justify-content: center; width: 100%; }
}

.navbar {
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  z-index: 50;
}
.navbar .container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-top: 14px;
  padding-bottom: 14px;
  gap: 24px;
  max-width: none;
  padding-left: 32px;
  padding-right: 32px;
}
.logo { display: flex; align-items: center; gap: 10px; }
.logo svg { width: 34px; height: 34px; transition: transform 0.3s ease; }
.logo:hover svg { transform: rotate(8deg) scale(1.05); }
.logo-word { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: 0.01em; }
.logo-word .pres { color: var(--navy-900); }
.logo-word .werx { color: var(--blue-500); }

/* Official PRESWERX logo mark (image) at 1.5x the original 34px */
.logo-img { height: 51px; width: auto; display: block; transition: transform 0.3s ease; }
.logo:hover .logo-img { transform: scale(1.05); }
/* Reversed (all-white) logo mark, used directly on the navy footer.
   No chip/box needed since it's already legible on a dark background. */
.footer-logo { height: 32px; width: auto; }

/* margin-left: auto pushes the links + CTA cluster flush to the right edge,
   independent of the logo's width (rather than space-between, which let
   the links float in the middle when there are 3 flex children). */
.nav-links { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0 0 0 auto; padding: 0; }
.nav-links a {
  color: var(--navy-900);
  font-weight: 600;
  font-size: 0.95rem;
  position: relative;
  padding-bottom: 4px;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--grad-bright);
  border-radius: 2px;
  transition: right 0.25s ease;
}
.nav-links a:hover { color: var(--blue-500); text-decoration: none; }
.nav-links a:hover::after { right: 0; }
/* Also gets its own auto margin so it still lands on the right edge on
   mobile, where .nav-links is hidden and can't push it there itself. */
.nav-cta { display: flex; align-items: center; gap: 14px; margin-left: auto; }

/* Mobile hamburger toggle: hidden on desktop, shown in the 860px media
   query below. Three bars that morph into an X via aria-expanded. */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  flex: none;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  margin: 0 auto;
  background: var(--navy-900);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu panel, a dropdown anchored under the sticky header. Hidden
   on desktop entirely; toggled via .is-open below 860px. Carries the
   links that live in .nav-links plus the ones that only live in the
   .topbar row (Testimonials, Blog, phone/email), since that topbar is
   also hidden on mobile and those links would otherwise be unreachable
   from the header. */
.mobile-menu { display: none; }

@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-cta .btn { padding: 10px 18px; font-size: 0.85rem; }
  .logo-img { height: 40px; }
  .nav-toggle { display: flex; }

  .mobile-menu {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-card-hover);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.2s ease;
  }
  .mobile-menu.is-open {
    max-height: 70vh;
    opacity: 1;
    overflow-y: auto;
  }
  .mobile-menu ul {
    list-style: none;
    margin: 0;
    padding: 8px 24px;
  }
  .mobile-menu li { border-top: 1px solid var(--line); }
  .mobile-menu li:first-child { border-top: none; }
  .mobile-menu a {
    display: block;
    padding: 14px 0;
    color: var(--navy-900);
    font-weight: 600;
    font-size: 1rem;
  }
  .mobile-menu a:hover { color: var(--blue-500); text-decoration: none; }
  .mobile-menu-contact {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 24px 20px;
    border-top: 1px solid var(--line);
  }
  .mobile-menu-contact a { color: var(--slate-600); font-size: 0.9rem; font-weight: 500; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: radial-gradient(circle at 80% 15%, var(--blue-300) 0%, var(--blue-50) 40%, #ffffff 100%);
  padding: 24px 0 var(--space-7);
  overflow: hidden;
  /* How far the stat-card row below reaches up to mask the photo's legs.
     Referenced by both .hero-copy (to define its centering zone) and
     .hero-stats (to pull it up) so the two can never drift out of sync. */
  --hero-overlap: 140px;
}
.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.45;
  pointer-events: none;
  z-index: 0;
}
.hero-blob--1 { width: 420px; height: 420px; background: var(--blue-400); top: -160px; right: -120px; }
.hero-blob--2 { width: 260px; height: 260px; background: var(--navy-900); opacity: 0.10; bottom: -100px; left: -80px; }
.hero-top { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; position: relative; z-index: 1; }
.hero h1 { color: var(--navy-900); }
/* The photo's natural height sets the row height (grid default stretch).
   .hero-copy fills that same row, with its content-box bottom edge landing
   exactly where the stat cards start (padding-bottom: var(--hero-overlap)
   reserves that space). The eyebrow/heading/paragraph stay top-anchored;
   the button row uses auto top/bottom margins so it soaks up whatever
   space is left between the paragraph and the cards and centers itself
   in it, true by construction, not by tuned pixel values. */
.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-bottom: var(--hero-overlap);
  box-sizing: border-box;
}
/* Zero out the paragraph's own trailing margin here so the auto-margin
   gap above/below the buttons (below) is symmetric, not padded on one
   side by the paragraph's normal typographic spacing. */
.hero-copy p { margin-bottom: 0; }
.hero-actions { display: flex; gap: 16px; margin-top: auto; margin-bottom: auto; flex-wrap: wrap; }
.hero-art { position: relative; z-index: 1; }
.hero-art svg { filter: drop-shadow(0 30px 45px rgba(20,33,82,0.18)); }
.hero-photo {
  width: 100%;
  max-width: 380px;
  height: auto;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 24px 40px rgba(20,33,82,0.25));
}

/* Pull the stat row up so the opaque cards mask the photo's lower legs/feet,
   the way preswerx.com's own stat row tucks under its hero image. Tied to
   the same --hero-overlap variable the text centering above uses. */
.hero .hero-stats {
  position: relative;
  z-index: 5;
  margin-top: calc(-1 * var(--hero-overlap));
}

@media (max-width: 900px) {
  .hero { --hero-overlap: 0px; }
  .hero .hero-top { grid-template-columns: 1fr; }
  .hero-art { order: -1; max-width: 320px; margin: 0 auto; }
  .hero-copy { padding-bottom: 0; }
  /* Single-column layout means .hero-copy's box is just its own content
     height, so the auto margins above have no free space to distribute.
     Restore a normal fixed gap here instead. */
  .hero-actions { margin-top: 24px; margin-bottom: 0; }
  .hero-stats { padding-top: var(--space-6); }
}

.page-hero {
  position: relative;
  background: var(--grad-dark);
  color: #fff;
  padding: var(--space-8) 0 var(--space-7);
  text-align: left;
  overflow: hidden;
}
.page-hero::after {
  content: "";
  position: absolute;
  width: 360px; height: 360px;
  border-radius: 50%;
  background: var(--blue-400);
  opacity: 0.3;
  filter: blur(80px);
  top: -140px;
  right: 10%;
  pointer-events: none;
}
.page-hero h1 { color: #fff; }
.page-hero .container { position: relative; z-index: 1; }
.page-hero p { color: #C4CDEE; max-width: 640px; margin-left: 0; margin-right: 0; }
.breadcrumb { color: #9DB0EE; font-size: 0.85rem; margin-bottom: 14px; }
.breadcrumb a { color: #9DB0EE; }

/* Interior-page hero layout: left-justified copy with a large decorative
   icon to the right. (Home page uses a different section, .hero, and is
   untouched by this.) */
.page-hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
}
.page-hero-text { flex: 1 1 420px; min-width: 280px; }
.page-hero-icon {
  flex: 0 0 auto;
  width: 190px;
  height: 190px;
}
.page-hero-icon svg { display: block; width: 100%; height: 100%; }
@media (max-width: 760px) {
  .page-hero-inner { flex-direction: column; text-align: center; }
  .page-hero-text { text-align: center; }
  .page-hero-text p { margin-left: auto; margin-right: auto; }
  .breadcrumb { justify-content: center; }
  .page-hero-icon { order: -1; width: 130px; height: 130px; margin-bottom: 4px; }
}

/* ---------- Blog ---------- */
.article-body { max-width: 720px; margin: 0 auto; }
.article-meta { color: var(--slate-400); font-size: 0.85rem; margin-bottom: 28px; }
.article-body h2 { margin-top: 36px; margin-bottom: 12px; font-size: 1.4rem; }
.article-body p { font-size: 1.02rem; line-height: 1.7; }
.article-body h3 { margin-top: 26px; margin-bottom: 10px; font-size: 1.08rem; }
/* Bulleted lists inside legal / long-form copy, matched to .article-body p. */
.legal-list { margin: 0 0 16px; padding-left: 22px; }
.legal-list li {
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--slate-600);
  margin-bottom: 8px;
}
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 40px;
}
.blog-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px 26px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.blog-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-6px); border-color: var(--blue-300); }
.blog-card .article-meta { margin-bottom: 10px; }
.blog-card h3 { margin-bottom: 10px; font-size: 1.15rem; }
.blog-card p { color: var(--slate-600); flex: 1; }
.blog-card .card-link { margin-top: 12px; }

/* ---------- Testimonials ---------- */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 40px;
}
.testimonial-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.testimonial-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-4px); }
.testimonial-card .stars { color: #F5B400; letter-spacing: 2px; margin-bottom: 14px; font-size: 1rem; }
.testimonial-card p { color: var(--slate-600); flex: 1; }
.testimonial-author { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.testimonial-name { font-weight: 700; color: var(--navy-900); font-size: 0.95rem; }
.testimonial-title { font-size: 0.82rem; color: var(--slate-400); margin-top: 2px; }
.testimonial-card--cta {
  align-items: flex-start;
  justify-content: center;
  background: linear-gradient(160deg, var(--blue-50), #fff);
  text-align: left;
}
.testimonial-card--cta h3 { color: var(--navy-900); margin-bottom: 8px; }
.testimonial-card--cta p { flex: none; margin-bottom: 20px; }

/* ---------- Stat cards ---------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
/* Same reasoning as .card-grid above: only add top spacing when a heading
   precedes the grid in the same container, so a stat-grid that's the only
   content in its section stays vertically centered within the padding. */
* + .stat-grid { margin-top: 48px; }
.stat-card {
  position: relative;
  background: linear-gradient(160deg, #ffffff 0%, var(--blue-50) 100%);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 32px 20px 26px;
  text-align: center;
  overflow: hidden;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.stat-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--grad-bright);
}
.stat-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-4px); }
.stat-num {
  /* 1.8x the original 2.5rem */
  font-family: var(--font-display); font-weight: 900; font-size: 4.5rem; line-height: 1.05;
  background: var(--grad-bright);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  display: block;
}
.stat-label { font-weight: 700; color: var(--navy-900); font-size: 0.95rem; margin-top: 6px; }
@media (max-width: 700px) { .stat-grid { grid-template-columns: 1fr; } }

/* ---------- Service cards ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}
/* Only add top spacing when a heading/paragraph precedes the grid in the
   same container (e.g. Home). On pages where the grid is the section's
   only content (e.g. Services), the section's own padding is enough, and
   an unconditional margin-top here would make the top gap bigger than the
   bottom gap. */
* + .card-grid { margin-top: 40px; }
.service-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 36px 24px 28px;
  text-align: center;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.service-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--grad-bright);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.service-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-6px);
  border-color: var(--blue-300);
}
.service-card:hover::before { transform: scaleX(1); }
.service-card .icon-wrap {
  width: 68px; height: 68px; margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--blue-100), #fff);
  box-shadow: inset 0 0 0 1px rgba(30,121,254,0.14);
  transition: transform 0.3s ease;
}
.service-card:hover .icon-wrap { transform: scale(1.08) rotate(-4deg); }
.service-card h3 { font-size: 1.05rem; margin-bottom: 10px; }
.service-card p { font-size: 0.92rem; margin-bottom: 16px; }
.service-card a.card-link { font-weight: 700; font-size: 0.88rem; display: inline-flex; align-items: center; gap: 4px; }
.service-card a.card-link { transition: gap 0.2s ease; }
.service-card a.card-link:hover { gap: 8px; text-decoration: none; }

/* ---------- Feature / two-col rows ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.split.reverse .split-art { order: 2; }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split.reverse .split-art { order: -1; }
}
.split-art {
  position: relative;
  background: linear-gradient(160deg, var(--blue-50), #fff);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.split-art::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(30,121,254,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,121,254,0.05) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}
.split-art > svg { position: relative; z-index: 1; }
.img-placeholder {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 4 / 3.3;
  border: 2px dashed #BAD6FF;
  border-radius: var(--radius-lg);
  background: rgba(30,121,254,0.03);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #9DB4DE;
  text-align: center;
  padding: 20px;
}
.img-placeholder .ph-label { font-weight: 700; font-size: 0.95rem; color: #5A6A93; }
.img-placeholder .ph-sub { font-size: 0.78rem; color: #8a97ba; }
.split-art--photo {
  padding: 0;
  border: none;
  background: none;
  border-radius: 15px;
  overflow: hidden;
}
.split-art--photo::before { display: none; }
.ph-img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3.3;
  object-fit: cover;
  border-radius: 15px;
}
.check-list { list-style: none; margin: 20px 0; padding: 0; }
.check-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
  color: var(--slate-600);
  font-weight: 500;
}
.check-list svg { flex: none; margin-top: 3px; stroke: currentColor; color: var(--blue-500); }
.section--navy .check-list li { color: #C4CDEE; }
.section--navy .check-list svg { color: var(--blue-400); }

/* ---------- Process steps ---------- */
.step-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 56px;
}
.step-grid::before {
  content: "";
  position: absolute;
  top: 23px;
  left: calc(16.66% + 10px);
  right: calc(16.66% + 10px);
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--blue-300) 0 8px, transparent 8px 16px);
}
.step { position: relative; text-align: center; }
.step-num {
  position: relative;
  width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(135deg, var(--navy-900), var(--navy-800));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800;
  margin: 0 auto 16px;
  box-shadow: 0 8px 18px rgba(20,33,82,0.28);
  transition: transform 0.25s ease;
}
.step:hover .step-num { transform: scale(1.1); background: var(--grad-bright); }
.section--navy .step-num { background: var(--grad-bright); }
.section--navy .step:hover .step-num { background: linear-gradient(135deg, #fff, var(--blue-300)); color: var(--navy-900); }
@media (max-width: 780px) { .step-grid { grid-template-columns: 1fr; } .step-grid::before { display: none; } }

/* ---------- Industry use-case cards ---------- */
.usecase-grid {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
* + .usecase-grid { margin-top: 40px; }
.usecase-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 22px;
  width: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 26px 28px;
  box-shadow: var(--shadow-card);
}
.usecase-icon {
  flex: none;
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--grad-bright);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 18px rgba(30,121,254,0.28);
}
.usecase-icon svg { width: 26px; height: 26px; display: block; }
.usecase-content { flex: 1 1 auto; min-width: 0; }
.usecase-card h3 { font-size: 1.05rem; margin-bottom: 8px; }
.usecase-card p { font-size: 0.93rem; color: var(--slate-600); }
.section--navy .usecase-card { background: #fff; }
.section--navy .usecase-card h3 { color: var(--navy-900); }
.section--navy .usecase-card p { color: var(--slate-600); }
@media (max-width: 640px) {
  .usecase-card { flex-direction: column; gap: 14px; padding: 22px; }
}

/* ---------- FAQ accordion (native <details>, no JS) ---------- */
.faq-list { max-width: 780px; margin: 40px auto 0; }
.faq-item {
  border-bottom: 1px solid var(--line);
  padding: 20px 0;
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--navy-900);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon {
  position: relative;
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--blue-100);
}
.faq-icon::before, .faq-icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  background: var(--blue-600);
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease;
}
.faq-icon::before { width: 10px; height: 2px; }
.faq-icon::after { width: 2px; height: 10px; }
.faq-item[open] .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq-item[open] summary { color: var(--blue-600); }
.faq-a { margin-top: 12px; }
.faq-a p { color: var(--slate-600); font-size: 0.95rem; }
.section--navy .faq-item { border-bottom-color: rgba(255,255,255,0.14); }
.section--navy .faq-item summary { color: #fff; }
.section--navy .faq-item[open] summary { color: var(--blue-300); }
.section--navy .faq-icon { background: rgba(255,255,255,0.12); }
.section--navy .faq-icon::before, .section--navy .faq-icon::after { background: var(--blue-300); }
.section--navy .faq-a p { color: #C4CDEE; }

/* ---------- CTA banner ---------- */
.cta-banner {
  position: relative;
  background: var(--grad-dark);
  border-radius: var(--radius-xl);
  padding: 52px 48px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(20,33,82,0.28);
}
/* Soft directional glow fading in from the top-right corner, for depth. */
.cta-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 0%, rgba(0,175,255,0.28) 0%, transparent 55%);
  pointer-events: none;
}
.cta-banner > * { position: relative; z-index: 1; }
.cta-banner h2 { color: #fff; margin-bottom: 6px; }
.cta-banner p { color: #C4CDEE; margin-bottom: 0; }
/* When the heading is long enough to force a wrap, the button drops to its
   own flex line, and with only one item on that line, `justify-content:
   space-between` has nothing to space it from and it lands at the start
   (left). margin-left:auto keeps it pinned to the right on every line,
   wrapped or not. */
.cta-banner > .btn { margin-left: auto; flex-shrink: 0; }

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  background:
    radial-gradient(circle at 85% 0%, rgba(30,121,254,0.30) 0%, transparent 50%),
    linear-gradient(160deg, var(--navy-900) 0%, var(--navy-800) 55%, var(--navy-900) 100%);
  color: #fff;
  padding: 56px 0 28px;
  overflow: hidden;
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad-bright);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 48px;
  position: relative;
  z-index: 1;
}
.site-footer h3 { color: #fff; font-size: 1.9rem; margin-bottom: 18px; }
.site-footer p { color: #fff; }
.site-footer a { color: #fff; }
.site-footer a:hover { text-decoration: underline; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 10px; font-size: 0.9rem; }
/* Same social icons as the top-top bar, reused here at 2x size. */
.footer-social { display: flex; align-items: center; gap: 18px; margin-top: 20px; }
.footer-social a { display: inline-flex; color: #fff; opacity: 0.9; transition: opacity 0.2s ease, transform 0.2s ease; }
.footer-social a:hover { opacity: 1; text-decoration: none; transform: translateY(-2px); }
.footer-social svg { display: block; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  margin-top: 40px;
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.82rem;
  color: #fff;
  position: relative;
  z-index: 1;
}
/* Legal links row, sits opposite the copyright in footer-bottom. */
.footer-legal { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; }
.footer-legal a { color: #fff; opacity: 0.7; transition: opacity 0.2s ease; }
.footer-legal a:hover { opacity: 1; }
.footer-optout-link { color: #fff; opacity: 0.7; transition: opacity 0.2s ease; }
.footer-optout-link:hover { opacity: 1; }
@media (max-width: 1020px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grid .full { grid-column: 1 / -1; }
label { display: block; font-weight: 600; font-size: 0.88rem; color: var(--navy-900); margin-bottom: 6px; }
input, textarea, select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--blue-400); box-shadow: 0 0 0 4px rgba(0,175,255,0.18); }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }

.form-alert { padding: 14px 18px; border-radius: 10px; font-size: 0.92rem; margin-bottom: 20px; }
.form-alert-success { background: rgba(0,175,255,0.1); border: 1px solid var(--blue-400); color: var(--navy-900); }
.form-alert-error { background: rgba(220,38,38,0.08); border: 1px solid #dc2626; color: #7f1d1d; }
.form-alert-error a { color: inherit; text-decoration: underline; }

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn::before { display: none; }
}

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.max-w-640 { max-width: 640px; margin-left: auto; margin-right: auto; }