/* =========================================================
   Primas-One — main stylesheet
   ========================================================= */

:root {
  --prima-red: #A21D21;
  --prima-red-hover: #86171A;
  --prima-blue: #0D143E;
  --prima-dark: #1E1E1E;
  --prima-white: #FFFFFF;
  --prima-white-hover: #E2E4F8;
  --prima-bg-soft: #FAFAFA;
  --prima-muted-on-dark: #A3B3CC;
  --prima-muted-footer: #6B7C96;

  --font-heading: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --container-width: 1200px;
  --radius-lg: 32px;
  --radius-img: 0; /* square corners for every photo site-wide */
  --shadow-card: 0 1px 2px rgba(13, 20, 62, .05), 0 1px 1px rgba(13, 20, 62, .04);
  --shadow-card-hover: 0 20px 40px -16px rgba(13, 20, 62, .18);
  --section-pad: 112px;
  --section-pad-mobile: 60px;

  /* Fluid type scale — scales smoothly between a 375px and 1440px
     viewport instead of jumping at breakpoints. Values fall back to
     their min (mobile) size below 375px and cap at their max (desktop)
     size above 1440px. All font-sizes below are in rem so they respect
     the visitor's browser/accessibility zoom setting.

     Each heading TAG keeps its semantic level (h1/h2/h3 stay h1/h2/h3
     for accessibility/SEO/document outline) but is visually sized one
     step down the scale: h1 renders at the old h2 size, h2 at the old
     h3 size, h3 at the next step down (the --fs-lg size). */
  --fs-h1:    clamp(1.75rem, 1.51rem + 1.03vw, 2.4375rem);  /* was h2: 28px -> 39px */
  --fs-h2:    clamp(1.375rem,1.31rem + 0.28vw, 1.5625rem);  /* was h3: 22px -> 25px */
  --fs-h3:    clamp(1.125rem,1.08rem + 0.19vw, 1.25rem);    /* was --fs-lg: 18px -> 20px */
  --fs-lg:    clamp(1.0625rem,1.019rem + 0.19vw, 1.1875rem); /* body lead text, stepped down 1px: 17px -> 19px */
  --fs-stat:  clamp(1.5625rem,1.4525rem + 0.47vw, 1.875rem); /* stat numbers, stepped down 1px: 25px -> 30px */
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  font-size: 100%; /* respects the browser/user default (typically 16px) */
  overflow-x: hidden; /* safety net: nothing on the page can force horizontal scroll/page-spread on narrow screens */
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.9375rem; /* 15px — stepped down 1px from the 16px accessibility baseline; every unstyled paragraph inherits this */
  color: var(--prima-dark);
  background: var(--prima-white);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { text-decoration: none; color: inherit; }

ul { list-style: none; margin: 0; padding: 0; }

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
  color: var(--prima-blue);
}

p { margin: 0; }

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

/* ---------- Section transitions ---------- */

/* .reveal-section is added by the <script> in includes/footer.php to
   every top-level <main> section except the hero — one shared, subtle
   fade + rise as each section first scrolls into view, applied
   uniformly across every page instead of being hand-built per section. */
.reveal-section {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1);
}
.reveal-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 28px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.875rem; /* 14px */
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, transform .15s ease;
}

.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -10px rgba(13, 20, 62, .35); }

.btn-icon {
  font-size: 0.75rem; /* ~12px */
  flex-shrink: 0;
}

.btn-white {
  background: var(--prima-white);
  color: var(--prima-dark);
}
.btn-white:hover { background: var(--prima-white-hover); }

.btn-red {
  background: var(--prima-red);
  color: var(--prima-white);
}
.btn-red:hover { background: var(--prima-red-hover); }

.btn-dark {
  background: var(--prima-dark);
  color: var(--prima-white);
}
.btn-dark:hover { background: #000; }

.learn-more-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 0.875rem; /* 14px */
  color: var(--prima-dark);
}
.learn-more-link i { flex-shrink: 0; font-size: 0.8125rem; color: var(--prima-red); transition: transform .2s ease; }
.learn-more-link:hover i { transform: translateX(4px); }

/* ---------- Eyebrow (hero kicker badge) ---------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--prima-white);
  font-weight: 700;
  font-size: 0.8125rem; /* 13px */
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 18px;
}
.eyebrow::before {
  content: "";
  width: 12px;
  height: 12px;
  background: var(--prima-red);
  flex-shrink: 0;
}

/* ---------- Red section tag (used above H2 headings) ---------- */

.tag-red {
  display: block;
  color: var(--prima-red);
  font-weight: 700;
  font-size: 0.9375rem; /* 15px */
  margin-bottom: 14px;
}

/* ---------- Logo ---------- */

.logo {
  display: inline-flex;
  align-items: center;
}
.logo-img {
  width: auto;
  height: 60px;
}
.logo-img-footer {
  height: 75px;
}

/* =========================================================
   Header
   ========================================================= */

.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  padding: 26px 0;
  /* The closed mobile off-canvas menu (#primaryNav) sits fully outside
     the viewport via transform: translateX(100%) — harmless visually,
     but transformed boxes still count toward the page's scrollable
     width in most engines, and some mobile browsers' touch-drag
     overscroll doesn't reliably respect overflow-x:hidden set only on
     html/body two ancestors up. Clipping right here, at #primaryNav's
     actual containing block, removes that phantom scroll area at the
     source instead of just hiding it further out.
     overflow-y is pinned to visible explicitly — setting overflow-x
     alone implicitly forces the other axis to auto per spec, which
     would vertically clip the open mobile menu panel (it extends
     below this short header box, via position:absolute; top:100%). */
  overflow-x: hidden;
  overflow-y: visible;
}
/* While the mobile menu is open (see the <script> in includes/footer.php,
   which toggles this class), drop the clipping entirely — otherwise the
   open panel, which intentionally extends below .site-header's own
   short box, would itself get cut off along with the phantom overflow
   it's meant to prevent. */
.site-header.nav-panel-open { overflow: visible; }

.site-header .container {
  display: flex;
  align-items: center;
  gap: 32px;
}

.main-nav { flex: 1; display: flex; align-items: center; justify-content: center; }

/* The CTA rendered a second time inside #primaryNav — only ever shown
   inside the mobile dropdown menu, never in the desktop nav row. */
.mobile-cta { display: none; }

/* The dimmed backdrop behind the open mobile menu — only relevant on
   mobile; styled in full inside the mobile media query below. */
.nav-backdrop { display: none; }

.main-nav ul {
  display: flex;
  align-items: center;
  gap: 36px;
}

.main-nav a {
  position: relative;
  color: var(--prima-white);
  font-weight: 700;
  font-size: 0.875rem; /* 14px */
  padding-bottom: 4px;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--prima-red);
  transition: right .2s ease;
}
.main-nav a:hover::after { right: 0; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle span {
  width: 24px;
  height: 2px;
  background: var(--prima-white);
  transition: transform .2s ease, opacity .2s ease;
}
/* Morphs the hamburger into an X when the mobile menu is open. */
.nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* On desktop the header stays pinned to the top of the viewport while
   scrolling. It starts fully transparent (over the hero image) and only
   picks up a solid background once the page has scrolled — see the
   .is-scrolled class toggled by the <script> at the end of the page —
   so nav text stays legible once you're past the hero into the white
   sections below. */
@media (min-width: 769px) {
  .site-header {
    position: fixed;
    background: transparent;
    transition: background-color .3s ease, box-shadow .3s ease;
  }
  .site-header.is-scrolled {
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 24px rgba(13, 20, 62, .1);
  }

  /* Nav links flip from white (over the hero) to navy (over the white
     scrolled background) so they stay legible either way. */
  .main-nav a { transition: color .3s ease; }
  .site-header.is-scrolled .main-nav a { color: var(--prima-blue); }
}

/* =========================================================
   Hero
   ========================================================= */

.hero {
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: center;
  padding: 152px 0 72px;
  color: var(--prima-white);
  background: var(--prima-blue);
  overflow: hidden; /* clips .hero-bg's extra bleed while it parallax-translates */
}

/* Parallax layer: image lives here (not on .hero itself) so it can be
   translated independently of the section on scroll. Extends 12% past
   the section's top/bottom edges so that translation never reveals a
   gap. Movement is applied via transform in the <script> in
   includes/footer.php; disabled entirely for prefers-reduced-motion. */
.hero-bg {
  position: absolute;
  inset: -12% 0;
  background: url('../img/hero.jpg') center/cover no-repeat; /* shows behind/before the video loads, and is the only layer on pages using a <div> instead of <video> */
  z-index: 0;
  will-change: transform;
}
/* When .hero-bg is a <video> (homepage only) rather than a <div>, it
   needs its own sizing/fit — the background-image above still shows
   through as a fallback until the video has loaded. */
video.hero-bg { inset: 0; width: 100%; height: 100%; object-fit: cover; } /* no parallax bleed needed — it never translates */

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13,20,62,.55) 0%, rgba(13,20,62,.75) 100%);
  z-index: 0;
}

.hero .container { position: relative; z-index: 1; }

.hero-content { max-width: 700px; }

@media (prefers-reduced-motion: reduce) {
  .hero-bg { transform: none !important; }
}

.hero h1 {
  color: var(--prima-white);
  font-size: var(--fs-h1);
  line-height: 1.15;
  margin: 18px 0 18px;
}

.hero-lead {
  font-size: 0.9375rem; /* 15px */
  max-width: 600px;
  margin-bottom: 28px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 32px;
}

.hero-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 0.875rem; /* 14px */
  font-weight: 700;
  letter-spacing: .03em;
}

.hero-tags li { display: flex; align-items: center; }
.hero-tags li:not(:last-child) { margin-right: 18px; padding-right: 18px; position: relative; }
.hero-tags li:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, .4);
}

/* =========================================================
   Trust / Stats section
   ========================================================= */

.trust-section { padding: var(--section-pad) 0; background: var(--prima-white); }

.trust-heading { font-size: var(--fs-h2); margin-bottom: 28px; }

.trust-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px 88px;
  align-items: start;
}

.trust-highlight {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--prima-blue);
  margin-bottom: 20px;
}

.trust-copy { color: var(--prima-dark); margin-bottom: 32px; }
.trust-copy p + p { margin-top: 16px; }

/* Calm, minimal stat cards — plain white, a hairline border, and a
   single thin accent line along the bottom instead of the old
   icon-in-a-circle treatment. Numbers count up from 0 the first time
   they scroll into view (see the <script> in includes/footer.php);
   data-count-to/data-suffix on .stat-number drive that. */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.stat-card {
  background: var(--prima-white);
  border: 1px solid rgba(13, 20, 62, .08);
  border-bottom: 3px solid var(--prima-blue);
  border-radius: 12px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-bottom-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.stat-card:hover {
  border-bottom-color: var(--prima-red);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
}

.stat-number {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-stat);
  line-height: 1;
  color: var(--prima-blue);
  font-variant-numeric: tabular-nums; /* digits don't jiggle in width as the count animates */
}

.stat-label { font-size: 0.8125rem; font-weight: 500; line-height: 1.35; color: var(--prima-muted-footer); }

/* =========================================================
   Bridging section
   ========================================================= */

.bridging-section { background: var(--prima-bg-soft); padding: var(--section-pad) 0; }

.bridging-grid {
  display: grid;
  grid-template-columns: 255px 1fr; /* image column reduced 25% (was 340px) */
  gap: 64px;
  align-items: center;
}

.bridging-image img {
  width: 100%;
  border-radius: var(--radius-img);
  box-shadow: var(--shadow-card-hover);
  object-fit: cover;
  aspect-ratio: 288 / 433;
}

.bridging-content h2 { font-size: var(--fs-h2); margin-bottom: 24px; }
.bridging-highlight { font-size: var(--fs-lg); font-weight: 700; color: var(--prima-blue); margin-bottom: 20px; }
.bridging-copy { margin-bottom: 28px; }
.bridging-copy p + p { margin-top: 16px; }

/* =========================================================
   Solutions section
   ========================================================= */

.solutions-section { padding: var(--section-pad) 0; }

.solutions-header { margin-bottom: 48px; }
.solutions-header h2 { font-size: var(--fs-h2); margin-bottom: 18px; }
.solutions-header p { color: var(--prima-dark); }

.solutions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 24px; /* row gap 32px, column gutter 24px — matches the source grid's tighter card-to-gutter ratio */
}

.solution-card {
  background: var(--prima-bg-soft);
  border-radius: var(--radius-lg);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: var(--shadow-card);
}

/* The lift-on-hover effect is scoped to the homepage's "Our Solutions"
   section only (the only .solution-card grid with id="solutions") —
   every other page/section reusing .solution-card (About's leaders and
   "What We Bring Together", Services' Core Services, Industries, etc.)
   stays static, no hover effect. */
#solutions .solution-card { transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease; }
#solutions .solution-card:hover {
  background: var(--prima-white);
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
}

/* Rounded-rectangle badge, matching the "Our Approach" step-number
   style (navy fill, white glyph, curved corners) instead of the
   previous light-lavender circle. */
.solution-icon {
  width: 40px;
  height: 40px;
  border-radius: 9px;
  background: var(--prima-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--prima-white);
  transition: background-color .2s ease;
}
.solution-icon i { font-size: 1rem; /* ~16px */ }
#solutions .solution-card:hover .solution-icon { background: var(--prima-red); }

.solution-card h3 { font-size: var(--fs-h3); line-height: 1.3; }
.solution-card p { font-size: 0.875rem; line-height: 1.6; color: var(--prima-dark); flex-grow: 1; } /* 14px */

/* =========================================================
   Plain item grid / detail row list
   ---------------------------------------------------------
   Two presentations deliberately different from .solution-card's
   boxed-card look (background, radius, shadow) — that treatment is
   reserved for the homepage's "Our Solutions" section only. Every
   other itemized list on the site (About/Services/Industries) uses
   one of these two instead: an unboxed icon+title+description grid
   for short items, or a full-width divided row list for denser ones.
   ========================================================= */

/* Short items (title + one-line description) — icon above title above
   description, no card box, separated purely by grid gap. */
.plain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 32px;
}
.plain-item-icon {
  width: 49px;
  height: 49px;
  border-radius: 50%;
  background: var(--prima-white-hover);
  color: var(--prima-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.plain-item-icon i { font-size: 1.1875rem; }
.plain-item h3 { font-size: var(--fs-h3); line-height: 1.3; margin-bottom: 8px; }
.plain-item p { font-size: 0.875rem; line-height: 1.6; color: var(--prima-dark); }

/* Minimal process flow: a small square number badge sitting on a thin
   line that runs continuously across each row (each item draws its
   own segment of the line plus, for non-last-in-row items, the
   segment bridging the gap to the next one — together they read as
   one unbroken line). Centered, understated — no "Step N" label, no
   large circle. The number lives inside each item's own grid cell, so
   it can never drift from its content regardless of column count. */
.approach-grid .plain-item {
  position: relative;
  text-align: center;
}
.approach-grid .plain-item::before {
  content: "";
  position: absolute;
  top: 19px; /* vertical center of the badge */
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(13, 20, 62, .12);
  z-index: 0;
}
.approach-grid .plain-item:not(:nth-child(3n))::after {
  content: "";
  position: absolute;
  top: 19px;
  left: 100%;
  width: 32px; /* matches .plain-grid's column gap exactly */
  height: 1px;
  background: rgba(13, 20, 62, .12);
  z-index: 0;
}
.approach-step-node {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 6px;
  background: var(--prima-blue);
  color: var(--prima-white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: .02em;
  margin-bottom: 24px;
  transition: background-color .2s ease;
}
.approach-step-node:hover { background: var(--prima-red); }

/* Scoped centered variant of .solutions-header — used only where a
   specific section wants its tag/heading/intro centered instead of
   the component's default left alignment (which every other usage of
   .solutions-header sitewide keeps unchanged). */
.solutions-header--center { text-align: center; }
.solutions-header--center p { max-width: 700px; margin-left: auto; margin-right: auto; }

@media (max-width: 1024px) {
  .approach-grid .plain-item::before,
  .approach-grid .plain-item::after { content: none; }
}


/* =========================================================
   Accordion (Services page — Our Core Services)
   ---------------------------------------------------------
   Single-open accordion: clicking a header expands its panel and
   closes any other open one (see the <script> in services.php). Panel
   height animates via the grid-template-rows 0fr/1fr technique, which
   handles each service's differing content length (6-8 feature items)
   without any JS measuring/animating pixel heights.
   ========================================================= */

.accordion { border-top: 1px solid rgba(13, 20, 62, .1); }
.accordion-item { border-bottom: 1px solid rgba(13, 20, 62, .1); }

.accordion-header {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  padding: 28px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.accordion-title {
  flex: 1;
  min-width: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-h3);
  color: var(--prima-blue);
}
.accordion-header:hover .accordion-title { color: var(--prima-red); }

.accordion-chevron {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--prima-white-hover);
  color: var(--prima-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .3s ease, background-color .2s ease, color .2s ease;
}
.accordion-item.is-open .accordion-chevron { transform: rotate(180deg); }
.accordion-header:hover .accordion-chevron { background: var(--prima-red); color: var(--prima-white); }

.accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s ease;
}
.accordion-item.is-open .accordion-panel { grid-template-rows: 1fr; }
.accordion-panel-inner { overflow: hidden; }
.accordion-panel-body { padding: 0 0 32px; }
/* .split-highlight normally only gets its bold/colored treatment
   inside .split-content — outside that it was silently falling back
   to plain, unstyled text (same size as the description paragraph
   below it). Restyled here, and every text piece in the panel
   (subhead, description, feature list) is pinned to the same
   font-size so nothing reads mismatched. */
.accordion-panel-body .split-highlight { font-weight: 700; color: var(--prima-blue); margin-bottom: 12px; }
.accordion-panel-body > p,
.accordion-panel-body .service-features li { font-size: 0.875rem; }
.accordion-panel-body > p { color: var(--prima-dark); }
.accordion-panel-body > .learn-more-link { margin-top: 32px; color: var(--prima-red); }

@media (max-width: 768px) {
  .accordion-header { gap: 14px; padding: 20px 0; }
  .accordion-panel-body { padding-bottom: 24px; }
}

/* Compact card variant — each item is its own small bordered/shadowed
   card (not a flush divided row), shorter header, smaller title, and
   a plain (no circle background) chevron. Paired with .accordion-media
   below for an image + stat caption sitting beside a narrower column. */
.accordion--compact { border-top: none; gap: 12px; }
.accordion--compact .accordion-item {
  background: var(--prima-white);
  border: 1px solid rgba(13, 20, 62, .08);
  box-shadow: 0 1px 2px rgba(13, 20, 62, .04);
  overflow: hidden;
}
.accordion--compact .accordion-header { padding: 20px 28px; gap: 12px; }
.accordion--compact .accordion-title { font-size: 0.9375rem; font-weight: 600; }
.accordion--compact .accordion-chevron {
  width: auto;
  height: auto;
  background: none;
  color: var(--prima-dark);
}
.accordion--compact .accordion-chevron i { font-size: 0.8125rem; }
.accordion--compact .accordion-panel-body { padding: 8px 28px 28px; }
.accordion--compact .accordion-panel-body p:first-child { margin-top: 0; }

/* Image + overlapping stat-caption panel, sitting beside the compact
   accordion (see .split-grid--wide-media for the column layout). */
.accordion-media { position: relative; }
.accordion-media img {
  width: 100%;
  border-radius: var(--radius-img);
  object-fit: cover;
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-card-hover);
}
.accordion-media-caption {
  position: absolute;
  left: -20px;
  bottom: -20px;
  background: var(--prima-white);
  border-radius: 14px;
  box-shadow: 0 20px 40px -16px rgba(13, 20, 62, .3);
  padding: 20px 24px;
}
.accordion-media-caption .caption-number {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1;
  color: var(--prima-blue);
}
.accordion-media-caption .caption-label {
  display: block;
  margin-top: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--prima-dark);
}

/* A wider, fixed-width image column than .split-grid's default 255px
   — this pairing wants the photo to read as a real visual anchor next
   to the accordion, not a small thumbnail. At 1040px wide it no
   longer fits beside a usable accordion column below ~1500px, so the
   layout stacks (image above accordion) earlier than other
   .split-grid sections do. */
.split-grid--wide-media { grid-template-columns: 1040px 1fr; gap: 64px; }

@media (max-width: 1500px) {
  .split-grid--wide-media { grid-template-columns: 1fr; }
  .accordion-media { max-width: 640px; margin: 0 auto 56px; }
}

@media (max-width: 768px) {
  .accordion-media-caption { left: 0; bottom: -16px; padding: 14px 18px; }
  .accordion-media-caption .caption-number { font-size: 1.5rem; }
}

/* =========================================================
   Why Trust section
   ========================================================= */

.why-trust-section {
  position: relative;
  background: var(--prima-blue); /* the section's true background is plain navy */
  color: var(--prima-white);
  padding: var(--section-pad) 0;
}

/* Very faint premium texture — a red glow, a white glow, and a fine
   blueprint hairline grid — masked with a radial fade so it's only
   visible near the center and dissolves into the plain navy background
   toward every edge, instead of being uniformly (and noticeably) tiled
   across the whole section. */
.why-trust-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 88% 8%, rgba(162, 29, 33, .1), transparent 45%),
    radial-gradient(circle at 6% 92%, rgba(255, 255, 255, .035), transparent 40%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 40px);
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  pointer-events: none;
}

.why-trust-grid {
  position: relative; /* sits above the ::before pattern layer */
  z-index: 1;
  display: grid;
  grid-template-columns: 240px 1fr; /* image column reduced 25% (was 320px) */
  gap: 64px;
  align-items: center;
}

.why-trust-image img {
  width: 100%;
  border-radius: var(--radius-img);
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .5);
  object-fit: cover;
  aspect-ratio: 288 / 433;
}

.why-trust-content h2 { color: var(--prima-white); font-size: var(--fs-h2); margin-bottom: 28px; }

.why-trust-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 48px;
}

/* Single-row variant — all items across one line instead of a 2x2
   grid, for when the list sits in a narrower column beside an image. */
.why-trust-list--row { grid-template-columns: repeat(4, 1fr); gap: 40px 48px; }

/* Single-column variant — items stack straight down instead of a
   row/grid, for a narrower column beside an image. */
.why-trust-list--stack { grid-template-columns: 1fr; gap: 20px; }

.why-trust-item h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--prima-white);
  font-size: 1rem; /* 16px */
  margin-bottom: 14px;
}
.why-trust-item h3 i { flex-shrink: 0; font-size: 0.8125rem; color: var(--prima-red); }
.why-trust-item p { color: var(--prima-muted-on-dark); font-size: 0.875rem; } /* 14px */

/* Icon-badge variant — a centered icon, title, and description instead
   of the default left-aligned inline chevron, for a section without a
   stack/row of surrounding context (e.g. services.php's "Why
   Primas-One"). Scoped to this modifier only, so the plain
   left-aligned chevron style stays the default everywhere else
   .why-trust-item is used. */
.why-trust-item--icon { text-align: center; }
.why-trust-item--icon h3 { display: block; }
.why-trust-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 auto 22px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .08);
  color: var(--prima-red);
  transition: background-color .2s ease, color .2s ease;
}
.why-trust-item--icon:hover .why-trust-item-icon { background: var(--prima-red); color: var(--prima-white); }
.why-trust-item-icon i { font-size: 1.125rem; }

/* =========================================================
   CTA section
   ========================================================= */

.cta-section {
  padding: var(--section-pad) 0;
  text-align: center;
}

.cta-section h2 { font-size: var(--fs-h2); margin-bottom: 24px; }
.cta-section p { max-width: 720px; margin: 0 auto 36px; color: var(--prima-dark); }

/* =========================================================
   Footer
   ========================================================= */

.site-footer {
  position: relative;
  background: var(--prima-blue); /* the footer's true background is plain navy */
  color: var(--prima-white);
  padding: 72px 0 32px;
}

/* Same faint, edge-fading premium texture as .why-trust-section — see
   its comment for details. Kept in sync with that section intentionally. */
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 88% 8%, rgba(162, 29, 33, .1), transparent 45%),
    radial-gradient(circle at 6% 92%, rgba(255, 255, 255, .035), transparent 40%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 40px);
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  pointer-events: none;
}

.site-footer .container {
  position: relative; /* sits above the ::before pattern layer */
  z-index: 1;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
}

.footer-brand .footer-tagline {
  font-weight: 700;
  font-size: 0.9375rem; /* 15px */
  margin: 20px 0 12px;
}
.footer-brand .footer-desc { color: var(--prima-muted-on-dark); font-size: 0.875rem; max-width: 340px; } /* 14px */

.footer-col h3 {
  color: var(--prima-white);
  font-size: 1rem; /* 16px */
  font-weight: 700;
  letter-spacing: .04em;
  margin-bottom: 20px;
}

.footer-col ul { display: flex; flex-direction: column; gap: 14px; }
.footer-col a { color: var(--prima-muted-on-dark); font-size: 0.875rem; } /* 14px */
.footer-col a:hover { color: var(--prima-white); }

/* "Get In Touch" column — icon + text rows (not links) plus a row of
   social icon buttons underneath. */
.footer-contact-list { margin-bottom: 24px; }
.footer-contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--prima-muted-on-dark);
  font-size: 0.875rem;
  line-height: 1.5;
}
.footer-contact-list li i { flex-shrink: 0; margin-top: 3px; color: var(--prima-red); font-size: 0.8125rem; }

.footer-socials { display: flex; gap: 10px; }
.footer-social-link {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: var(--prima-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  transition: background-color .2s ease, color .2s ease;
}
.footer-social-link:hover { background: var(--prima-red); color: var(--prima-white); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12);
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  color: var(--prima-muted-footer);
  font-size: 0.8125rem; /* 13px */
}

.footer-legal { display: flex; gap: 24px; }
.footer-legal a:hover { color: var(--prima-white); }

/* =========================================================
   Floating chat button
   ========================================================= */

.chat-bubble {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 22px 10px 10px;
  background: var(--prima-red);
  color: var(--prima-white);
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.9375rem;
  box-shadow: 0 12px 28px -8px rgba(162, 20, 33, .55);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.chat-bubble:hover {
  background: var(--prima-red-hover);
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -8px rgba(162, 20, 33, .65);
}

.chat-bubble-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  font-size: 1.0625rem;
  flex-shrink: 0;
}

/* The "beep": an expanding, fading ring pulsing outward from the icon. */
.chat-bubble-ping {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--prima-white);
  opacity: 0;
  animation: chat-bubble-beep 2.6s ease-out infinite;
}

@keyframes chat-bubble-beep {
  0%   { transform: scale(.7); opacity: .8; }
  70%  { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .chat-bubble-ping { animation: none; display: none; }
}

@media (max-width: 768px) {
  .chat-bubble { right: 16px; bottom: 16px; padding: 8px 18px 8px 8px; gap: 10px; font-size: 0.8125rem; }
  .chat-bubble-icon { width: 30px; height: 30px; font-size: 0.9375rem; }
}

/* =========================================================
   About page
   ========================================================= */

/* Hero variant: identical .hero/.hero-bg/.hero-content markup and
   behavior (including the scroll parallax) as the homepage, just with
   a placeholder photo standing in for real About-page photography —
   swap the .about-hero-bg background-image below for a real photo
   whenever one's available. */
.about-hero-bg {
  background-image: url('../img/unsplash/about-hero-bg.jpg');
}
.about-hero-subhead { font-size: var(--fs-lg); font-weight: 700; }

/* .solutions-section has no background of its own on the homepage (it
   sits on plain white) — this modifier lets an About-page instance
   alternate to the soft-gray tone used elsewhere in the rhythm. */
.solutions-section--muted { background: var(--prima-bg-soft); }

/* Full-width text sections that carry no image of their own (Why We
   Exist, Who We Serve, The Difference) — same tag + h2 + full-width
   paragraph pattern as the homepage's "Our Solutions" intro, so the
   text runs the full container width instead of a narrower, isolated
   prose column. */
.text-section { padding: var(--section-pad) 0; background: var(--prima-white); }
.text-section--muted { background: var(--prima-bg-soft); }
.text-section-body h2 { margin-bottom: 18px; }
.text-section-body p { color: var(--prima-dark); }
.text-section-body p + p { margin-top: 16px; }

/* Long-form legal copy (Terms, Privacy) — a narrower reading column
   than the site's usual full-width sections, since this is dense,
   continuous prose rather than short marketing copy. */
.legal-content { max-width: 760px; margin: 0 auto; }
.legal-content > p { color: var(--prima-dark); }
.legal-content > p + p,
.legal-content > ul + p { margin-top: 18px; }
.legal-content h2 {
  font-size: var(--fs-h3);
  margin-top: 48px;
  margin-bottom: 16px;
}
.legal-content ul {
  margin: 16px 0 0;
  padding-left: 20px;
  list-style: disc;
  color: var(--prima-dark);
}
.legal-content ul li { margin-bottom: 10px; line-height: 1.6; }
.legal-content ul li:last-child { margin-bottom: 0; }
.legal-content a { color: var(--prima-red); text-decoration: underline; }
.legal-content a:hover { color: var(--prima-red-hover); }

/* Two .text-section-body-style blocks side by side within one section
   (e.g. "The Primas-One Difference" + "Our Commitment" sharing a row
   instead of stacking as separate full-width sections). */
.text-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}

/* Image+text split sections — the same column ratio, image treatment
   (radius/shadow/aspect-ratio) and gap as the homepage's
   .bridging-grid/.why-trust-grid, generalized into a reusable
   light/muted/dark component with an optional image-on-the-right
   (.split-grid--reverse) variant. */
.split-section { padding: var(--section-pad) 0; background: var(--prima-white); }
.split-section--muted { background: var(--prima-bg-soft); }
.split-section--dark { background: var(--prima-blue); color: var(--prima-white); }

.split-grid {
  display: grid;
  grid-template-columns: 255px 1fr;
  gap: 64px;
  align-items: center;
}
.split-grid--reverse { grid-template-columns: 1fr 255px; }
.split-grid--reverse .split-image { order: 2; }

.split-image img {
  width: 100%;
  border-radius: var(--radius-img);
  box-shadow: var(--shadow-card-hover);
  object-fit: cover;
  aspect-ratio: 288 / 433;
}
.split-section--dark .split-image img { box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .5); }

.split-content h2 { font-size: var(--fs-h2); margin-bottom: 20px; }
.split-section--dark .split-content h2 { color: var(--prima-white); }
.split-content .split-highlight { font-size: var(--fs-lg); font-weight: 700; color: var(--prima-blue); margin-bottom: 20px; }
.split-section--dark .split-content .split-highlight { color: var(--prima-white); }
.split-content p { color: var(--prima-dark); }
.split-section--dark .split-content p { color: rgba(255, 255, 255, .85); }
.split-content p + p { margin-top: 16px; }

/* Centered variant — used where .split-content stands on its own as a
   section intro (no accompanying .split-image) rather than sitting in
   a two-column .split-grid. */
.split-content--center { text-align: center; max-width: 700px; margin: 0 auto 48px; }

/* A vertical list of items inside .split-content — icon + title on one
   line, description below — instead of the icon-above/title-below
   .plain-grid layout, for when the content sits beside an image. */
.split-list { display: flex; flex-direction: column; gap: 24px; margin-top: 24px; }
.split-list-item h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  color: var(--prima-blue);
  margin-bottom: 6px;
}
.split-section--dark .split-list-item h3 { color: var(--prima-white); }
.split-list-item h3 i { flex-shrink: 0; font-size: 0.8125rem; color: var(--prima-red); }
.split-list-item p { font-size: 0.875rem; color: var(--prima-dark); }
.split-section--dark .split-list-item p { color: rgba(255, 255, 255, .8); }

/* "Who We Serve" — a simple wrapping row of pill chips. */
.audience-grid { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.audience-tag {
  padding: 12px 22px;
  background: var(--prima-white-hover);
  color: var(--prima-blue);
  font-weight: 700;
  font-size: 0.9375rem;
  border-radius: 999px;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.audience-tag:hover {
  background: var(--prima-red);
  color: var(--prima-white);
  transform: translateY(-2px);
}

/* Scoped centered variant — text-align:center on the whole block plus
   a centered .audience-grid, without changing every other usage of
   .text-section-body/.audience-grid sitewide (e.g. About's "Who We
   Serve", which stays left-aligned). */
.text-section-body--center { text-align: center; }
.text-section-body--center p { max-width: 700px; margin-left: auto; margin-right: auto; }
.text-section-body--center .audience-grid { justify-content: center; }

/* =========================================================
   Services page
   ========================================================= */

.services-hero-bg {
  background-image: url('../img/unsplash/services-hero-bg.jpg');
}


.service-features {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.service-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.8125rem;
  color: var(--prima-dark);
}
.service-features li i { color: var(--prima-red); font-size: 0.6875rem; margin-top: 5px; flex-shrink: 0; }

/* Small bold label above a .service-features list (e.g. "What We
   Deliver", "We Support"). */
.service-features-label {
  display: block;
  font-weight: 700;
  font-size: 0.8125rem;
  color: var(--prima-blue);
  margin-top: 16px;
}
/* The closing brand stamp under the final CTA's buttons. */
.cta-tagline {
  margin-top: 24px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: .04em;
  color: var(--prima-blue);
}

/* =========================================================
   Industries page
   ========================================================= */

.industries-hero-bg {
  background-image: url('../img/unsplash/industries-hero-bg.jpg');
}

/* Numbered card grid — a deliberate one-off boxed-card treatment for
   Industries (white card, red left-border accent, small numbered
   badge, uppercase "LEARN MORE" link), distinct from both the
   homepage's .solution-card and every other page's unboxed
   .plain-item/.detail-row patterns. Brand navy/red in place of the
   reference's black/gold, everything else on our existing type scale. */
.numbered-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.numbered-card {
  background: var(--prima-white);
  border-left: 3px solid var(--prima-red);
  box-shadow: var(--shadow-card);
  padding: 32px 32px 28px;
}
.numbered-card-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--prima-blue);
  color: var(--prima-white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: .02em;
  margin-bottom: 24px;
}
.numbered-card h3 { font-size: var(--fs-h3); margin-bottom: 10px; }
.numbered-card .split-highlight { font-size: 0.875rem; margin-bottom: 8px; }
.numbered-card > p { color: var(--prima-dark); font-size: 0.875rem; line-height: 1.6; }
.numbered-card .service-features-label { margin-top: 16px; }
.numbered-card .service-features { margin-top: 8px; margin-bottom: 20px; }
.numbered-card .learn-more-link {
  margin-top: 20px;
  font-size: 0.75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

@media (max-width: 1024px) {
  .numbered-card-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   Services & Industries pages — a few small helpers on top of the
   shared components: the "Who We Serve" sector blocks (Industries
   page) and the outcome line on the catalog cards (Services page).
   ========================================================= */

/* Specialized & Extended Services — four category cards (Assess
   Deeper / Document & Comply / Respond & Train / Extend Trust),
   each its own bordered, shadowed card so the four groups read as
   clearly separate things instead of one continuous list. One icon
   per CARD (the category), not per item — with 9 items total, a
   badge on every single one added noise without adding meaning. */
.ext-group-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.ext-group-card {
  background: var(--prima-white);
  border-left: 3px solid var(--prima-red);
  box-shadow: var(--shadow-card);
  padding: 32px 32px 28px;
  transition: box-shadow .25s ease, transform .25s ease;
}
.ext-group-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-4px); }
.ext-group-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--prima-white-hover);
  color: var(--prima-blue);
  margin-bottom: 20px;
  transition: background-color .2s ease, color .2s ease;
}
.ext-group-icon i { font-size: 1.25rem; }
.ext-group-card:hover .ext-group-icon { background: var(--prima-red); color: var(--prima-white); }
.ext-group-card h3 { font-size: var(--fs-h3); margin-bottom: 8px; }
.ext-group-desc { font-size: 0.875rem; color: var(--prima-dark); margin-bottom: 24px; }
.ext-group-items {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 20px;
  border-top: 1px solid rgba(13, 20, 62, .1);
}
.ext-group-items li { display: flex; flex-direction: column; gap: 4px; }
.ext-group-items strong { font-size: 0.875rem; color: var(--prima-blue); }
.ext-group-items span { font-size: 0.8125rem; line-height: 1.6; color: var(--prima-dark); }

@media (max-width: 1024px) {
  .ext-group-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .ext-group-card { padding: 24px 24px 20px; }
}

/* One "Who We Serve" sector, inside its own accordion panel: a small
   focus tag, then a two-column challenge / how-we-help block. */
.sector-tag {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--prima-red);
  margin-bottom: 20px;
}
.sector-outcome { margin-top: 20px; font-weight: 700; color: var(--prima-blue); }
.sector-note { margin-top: 28px; font-size: 0.8125rem; color: var(--prima-muted-footer); }

/* Closing "what changes" line on each catalog engagement card. */
.card-outcome {
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid rgba(13, 20, 62, .1);
  font-size: 0.875rem;
  color: var(--prima-dark);
}
.card-outcome strong { color: var(--prima-blue); }

/* No trailing connector stub after the last approach step when the
   final row is short (e.g. a 5-step process). Harmless on the 6-step
   grids elsewhere, where the last item is already a row end. */
.approach-grid .plain-item:last-child::after { content: none; }

@media (max-width: 1024px) {
  .why-trust-list--row { grid-template-columns: 1fr 1fr; }
}


/* =========================================================
   Preloader
   ---------------------------------------------------------
   Shown on every page (markup lives in includes/header.php,
   immediately after <body>) via plain CSS — no JS needed for it to
   appear. The <script> at the end of includes/footer.php drives the
   percentage counter and hides it once the page has actually finished
   loading (or after a 6s safety-net timeout either way).
   ========================================================= */

/* The outer .preloader is just a full-viewport backdrop — explicit
   top/right/bottom/left/width/height rather than the `inset` shorthand,
   and no reliance on flexbox to do the centering, so an older/quirky
   mobile browser can't misjudge either and strand the content off in a
   corner. .preloader-inner is what's actually centered, via the
   classic absolute + translate(-50%, -50%) trick — independent of the
   outer box's own layout, so its centering can't be thrown off by
   whatever the outer box does. */
.preloader {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  z-index: 9999;
  background: var(--prima-white);
  transition: opacity .5s ease;
}
.preloader.is-hidden { opacity: 0; pointer-events: none; }

.preloader-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 320px;
  padding: 0 24px;
  box-sizing: border-box;
  text-align: center;
}

.preloader-logo { height: 84px; width: auto; max-width: 60vw; } /* -25% from 112px; max-width is a hard cap so it can never outgrow a narrow screen */
.preloader-percent {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .04em;
  color: var(--prima-blue);
}

@media (max-width: 768px) {
  .preloader-inner { gap: 16px; }
  .preloader-logo { height: 60px; max-width: 55vw; }
  .preloader-percent { font-size: 0.875rem; }
}
@media (max-width: 400px) {
  .preloader-logo { height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .preloader { transition: none; }
}

/* =========================================================
   Contact page
   ========================================================= */

.contact-hero-bg {
  background-image: url('../img/unsplash/contact-hero-bg.jpg');
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 64px;
  align-items: start;
}

/* Form */
.contact-form { display: flex; flex-direction: column; gap: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-group { display: flex; flex-direction: column; gap: 8px; }
.form-group label { font-weight: 700; font-size: 0.875rem; color: var(--prima-blue); }
.form-group input,
.form-group textarea {
  padding: 14px 16px;
  border: 1px solid rgba(13, 20, 62, .15);
  border-radius: 10px;
  background: var(--prima-white);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--prima-dark);
  transition: border-color .2s ease;
}
.form-group input:focus,
.form-group textarea:focus { outline: none; border-color: var(--prima-blue); }
.contact-form textarea { resize: vertical; min-height: 150px; }
.contact-form-botcheck {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.contact-form-error {
  color: var(--prima-red);
  font-size: 0.875rem;
  font-weight: 600;
}
.contact-form-error[hidden] { display: none; }
#contact-form-success[hidden] { display: none; }

/* Contact info sidebar */
.contact-info { display: flex; flex-direction: column; gap: 28px; }
.contact-info-item { display: flex; align-items: flex-start; gap: 16px; }
.contact-info-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--prima-blue);
  color: var(--prima-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .2s ease;
}
.contact-info-icon i { font-size: 1rem; }
.contact-info-item:hover .contact-info-icon { background: var(--prima-red); }
.contact-info-item h3 { font-size: 0.9375rem; margin-bottom: 4px; }
.contact-info-item p { font-size: 0.875rem; color: var(--prima-dark); line-height: 1.5; }

.contact-socials { display: flex; gap: 12px; margin-top: 8px; }
.contact-social-link {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--prima-white-hover);
  color: var(--prima-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .2s ease, color .2s ease;
}
.contact-social-link:hover { background: var(--prima-red); color: var(--prima-white); }

@media (max-width: 1024px) {
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .form-row { grid-template-columns: 1fr; }
}

/* =========================================================
   Coming Soon page (coming-soon.php) — a standalone splash, not
   built on the shared header/footer, so its layout lives entirely
   in this one section rather than being woven through the rest of
   the sheet.

   Locked to exactly one viewport, no scrolling: body.coming-soon-page
   pins height to 100vh with overflow hidden (scoped to that one page
   via the body class — doesn't touch any other page's scrolling), and
   .coming-soon's own spacing is kept deliberately tight throughout so
   everything actually fits inside that height rather than relying on
   the hidden overflow to silently clip content.
   ========================================================= */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body.coming-soon-page { height: 100vh; overflow: hidden; }

.coming-soon {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  padding: 16px 0;
  color: var(--prima-white);
  overflow: hidden;
}
.coming-soon-bg {
  position: absolute;
  inset: 0;
  background: url('../img/hero.jpg') center/cover no-repeat;
  z-index: 0;
}
.coming-soon::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Darker than the regular page-hero overlay — this photo is a bright,
     hazy daytime skyline with no dark section of its own to anchor to,
     so the lighter overlay used elsewhere left the muted text (the lead
     paragraph, countdown labels) unreadable against the sky. */
  background: linear-gradient(180deg, rgba(13, 20, 62, .9) 0%, rgba(13, 20, 62, .97) 100%);
  /* Was the same z-index as .coming-soon-bg (0) — with equal stacking,
     the later-in-DOM .coming-soon-bg div painted on top and hid this
     overlay completely, so darkening its color had no visible effect.
     This must sit above the image and below the actual content. */
  z-index: 1;
}
.coming-soon .container { position: relative; z-index: 2; }

.coming-soon-inner {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.coming-soon-logo { margin-bottom: 12px; }
.coming-soon-logo .logo-img { height: 54px; } /* 50% up from 36px — trimmed the margins around it below to keep the page at exactly one screen */
.coming-soon-inner .tag-red { margin-bottom: 6px; }
.coming-soon-inner h1 {
  color: var(--prima-white);
  font-size: clamp(1.5rem, 1.3rem + 1vw, 2.125rem);
  line-height: 1.15;
  margin-bottom: 8px;
}
.coming-soon-lead {
  max-width: 520px;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--prima-muted-on-dark);
  margin-bottom: 16px;
}

/* Countdown */
.countdown { display: flex; gap: 10px; margin-bottom: 16px; }
.countdown-item {
  width: 76px;
  padding: 12px 6px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 12px;
  backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.countdown-number {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.countdown-label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--prima-muted-on-dark);
}
/* Once the target date has passed, the numbers freeze at 00 — a subtle
   dimming signals "this has already happened" rather than looking stuck. */
.countdown.is-complete .countdown-item { opacity: .5; }

/* Waitlist card: a solid white card floating over the dark backdrop, so
   the one thing we actually want a visit to do stays the clear focal
   point against all that photography and gradient. Just an email —
   one input and a button, side by side, so it stays a single compact row. */
.waitlist-card {
  width: 100%;
  max-width: 440px;
  background: var(--prima-white);
  border-radius: 20px;
  box-shadow: 0 32px 64px -24px rgba(13, 20, 62, .5);
  padding: 24px 28px;
  text-align: left;
  color: var(--prima-dark);
}
.waitlist-card h2 { color: var(--prima-blue); font-size: var(--fs-h3); margin-bottom: 4px; }
.waitlist-card > p { font-size: 0.8125rem; color: var(--prima-dark); margin-bottom: 14px; }

.waitlist-form { display: flex; }
.waitlist-input-group { display: flex; gap: 10px; width: 100%; }
.waitlist-input-group input {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid rgba(13, 20, 62, .15);
  border-radius: 10px;
  background: var(--prima-white);
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--prima-dark);
  transition: border-color .2s ease;
}
.waitlist-input-group input:focus { outline: none; border-color: var(--prima-blue); }
.waitlist-input-group .btn { padding: 12px 22px; flex-shrink: 0; }

.waitlist-success { text-align: center; padding: 4px 0; }
.waitlist-success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--prima-white-hover);
  color: var(--prima-red);
  font-size: 1.125rem;
  margin-bottom: 10px;
}
.waitlist-success h2 { color: var(--prima-blue); font-size: var(--fs-h3); margin-bottom: 4px; }
.waitlist-success p { font-size: 0.8125rem; color: var(--prima-dark); }

.coming-soon-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--prima-white);
  transition: color .2s ease;
}
.coming-soon-back i { font-size: 0.6875rem; }
.coming-soon-back:hover { color: var(--prima-red); }

@media (max-width: 480px) {
  .countdown { gap: 6px; }
  .countdown-item { width: 62px; padding: 10px 4px; }
  .countdown-number { font-size: 1.1875rem; }
  .waitlist-card { padding: 20px; }
  .waitlist-input-group { flex-direction: column; }
  .waitlist-input-group .btn { width: 100%; justify-content: center; }
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1024px) {
  .trust-grid,
  .bridging-grid,
  .why-trust-grid,
  .split-grid,
  .split-grid--reverse { grid-template-columns: 1fr; }

  .bridging-image { max-width: 255px; }
  .why-trust-image,
  .split-image { max-width: 240px; }
  .split-grid--reverse .split-image { order: 0; } /* image-on-right only makes sense at the 2-column width */

  .solutions-grid { grid-template-columns: repeat(2, 1fr); }
  .plain-grid { grid-template-columns: repeat(2, 1fr); }

  .footer-top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .nav-toggle { display: flex; margin-left: auto; } /* #primaryNav's flex:1 spacer is gone while it's display:none, so push manually */
  .header-cta { display: none; } /* the header-bar CTA is hidden on mobile — it lives inside the dropdown instead */

  /* On mobile the header bar is always solid white (not transparent-over-hero
     like desktop) — the logo (see the <script> at the end of the page, which
     always uses logo_scroll.png on mobile) and hamburger icon are navy to match. */
  .site-header { background: var(--prima-white); box-shadow: 0 2px 12px rgba(13, 20, 62, .08); }
  .nav-toggle span { background: var(--prima-blue); }

  /* Every pill button spans the full width of its container on mobile. */
  .btn { width: 100%; justify-content: center; }
  .hero-actions { flex-direction: column; }

  /* A dimmed, blurred backdrop behind the open mobile panel — tap it to
     close (see the <script> at the end of the page). Hidden entirely
     outside this breakpoint via the base `.nav-backdrop { display: none; }`
     rule further up the sheet. */
  .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 15;
    background: rgba(13, 20, 62, .45);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .35s ease, visibility 0s linear .35s;
  }
  .nav-backdrop.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .35s ease, visibility 0s linear 0s;
  }

  /* #primaryNav becomes a collapsible dropdown panel, toggled by the
     hamburger (see the <script> at the end of the page). It holds both
     the nav links and the "AI Governance Platform" CTA (.mobile-cta).
     White panel + navy text, sliding in from the right with a soft
     ease-out-expo curve and a staggered entrance for each link. */
  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 16px; /* the ul's own border/padding-bottom supplies most of the ul-to-CTA separation */
    background: var(--prima-white);
    padding: 44px 28px 32px;
    box-shadow: 0 24px 56px -16px rgba(13, 20, 62, .4);
    z-index: 16;
    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform .5s cubic-bezier(.16, 1, .3, 1), opacity .35s ease, visibility 0s linear .5s;
  }
  .main-nav.is-open {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform .5s cubic-bezier(.16, 1, .3, 1), opacity .4s ease, visibility 0s linear 0s;
  }

  /* Plain, editorial-style list — generous spacing does the work instead
     of boxes/backgrounds, for a classy, uncluttered feel. The hairline +
     padding beneath separates it from the CTA below as its own cluster. */
  .main-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(13, 20, 62, .1);
  }

  .main-nav a {
    display: block;
    width: 100%;
    font-size: 1.1875rem;
    font-weight: 500;
    color: var(--prima-blue);
    transition: color .2s ease;
  }
  .main-nav a:hover::after { content: none; } /* no underline-on-hover inside the mobile dropdown */
  .main-nav a:hover,
  .main-nav a:focus-visible {
    color: var(--prima-red); /* a simple color shift, not a filled block — keeps it light and classy */
  }

  /* Each link (and the CTA) fades/slides in with an increasing delay,
     but only while opening — see the plain (non is-open) rule above,
     which has no delay, so closing fades everything out together. */
  .main-nav ul li,
  .main-nav .mobile-cta {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .3s ease, transform .3s ease;
  }
  .main-nav.is-open ul li,
  .main-nav.is-open .mobile-cta {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .4s ease, transform .4s ease;
  }
  .main-nav.is-open ul li:nth-child(1) { transition-delay: .12s; }
  .main-nav.is-open ul li:nth-child(2) { transition-delay: .17s; }
  .main-nav.is-open ul li:nth-child(3) { transition-delay: .22s; }
  .main-nav.is-open ul li:nth-child(4) { transition-delay: .27s; }
  .main-nav.is-open ul li:nth-child(5) { transition-delay: .32s; }
  .main-nav.is-open ul li:nth-child(6) { transition-delay: .37s; }
  .main-nav.is-open .mobile-cta { transition-delay: .42s; }

  /* Not a button here — plain, specially-styled text (bold brand red)
     matching the list's typography rhythm rather than a pill/button.
     The hairline above (on the ul) is what sets it apart as its own
     cluster; overrides strip every .btn/.btn-red visual (background,
     padding, radius, shadow, hover-lift) down to just color + weight. */
  .mobile-cta {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    width: auto;
    background: none;
    color: var(--prima-red);
    font-size: 1.1875rem;
    font-weight: 700;
    padding: 0;
    box-shadow: none;
  }
  .mobile-cta:hover {
    background: none;
    color: var(--prima-red-hover);
    transform: none;
    box-shadow: none;
  }
  .mobile-cta .btn-icon { font-size: 0.875rem; }

  @media (prefers-reduced-motion: reduce) {
    .main-nav,
    .main-nav ul li,
    .main-nav .mobile-cta { transition-duration: .01ms !important; transition-delay: 0s !important; }
  }

  .hero { padding-top: 160px; padding-bottom: 56px; min-height: auto; } /* extra clearance below the now-opaque mobile header */
  /* Headings use the fluid --fs-h1/--fs-h2 clamp() scale, so no
     hard-coded mobile font-size override is needed here anymore. */

  .hero-tags { display: none; } /* tagline list hidden on mobile */

  .trust-section,
  .bridging-section,
  .solutions-section,
  .why-trust-section,
  .cta-section { padding: var(--section-pad-mobile) 0; }

  .stats-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .stat-card { padding: 20px 16px; border-radius: 10px; }

  .solutions-grid { grid-template-columns: 1fr 1fr; gap: 20px 16px; }
  /* Cards get tighter padding/icon sizing at 2-per-row on a phone-width
     screen — the desktop spacing would leave too little room for text. */
  .solution-card { padding: 18px; gap: 12px; border-radius: 20px; }
  .solution-icon { width: 32px; height: 32px; border-radius: 8px; }
  .solution-icon i { font-size: 0.8125rem; }
  .solution-card h3 { font-size: 0.9375rem; line-height: 1.3; }
  .solution-card p { font-size: 0.8125rem; line-height: 1.5; }
  .learn-more-link { font-size: 0.8125rem; gap: 8px; }
  .learn-more-link i { font-size: 0.6875rem; }

  .why-trust-list { grid-template-columns: 1fr; }
  .why-trust-image { display: none; }
  .bridging-image { display: none; }
  .split-image { display: none; } /* same treatment as .bridging-image/.why-trust-image on mobile */

  .plain-grid { grid-template-columns: 1fr; gap: 32px; }
  .text-columns { grid-template-columns: 1fr; gap: 40px; }

  .numbered-card { padding: 24px 24px 20px; }

  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 32px 16px;
    direction: rtl; /* reverses the row flow: brand/COMPANY and RESOURCES/Get In Touch swap sides */
  }
  .footer-top > * { direction: ltr; } /* reset so each block's own text still reads left-to-right */
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}