/* ============================================================================
   Pivot marketing site — white & dark royal blue, premium B2B feel.
   Self-contained: no dependency on the internal app theme. Fonts via Google
   Fonts CDN (Fraunces for display headlines, Inter for UI/body).

   Signature devices that carry the "premium" read (in priority order):
     1. One coherent line-icon system (see _icons.html) instead of mixed FA glyphs
     2. Grain texture + layered aurora gradients instead of flat CSS gradients
     3. A cursor-follow glow in the hero
     4. Real product shots framed in browser chrome, not bare <img>
     5. A much wider display-type scale with tight tracking at large sizes
     6. Scroll-reveal with stagger (progressive enhancement — see .js gate below)
     7. Buttons/cards with a real hover language: sheen sweep, gradient border, lift
   ============================================================================ */

:root {
  --navy-950: #050b1f;
  --navy-900: #0a1440;
  --navy-850: #0c1852;
  --navy-800: #101c5c;
  --royal-700: #16257a;
  --royal-600: #1f34a0;
  --royal-500: #2c46c9;
  --royal-400: #4f68e0;
  --royal-300: #7c92ef;
  --royal-100: #e8ecfb;
  --white: #ffffff;
  --ink-900: #0b1220;
  --ink-700: #2b3350;
  --ink-500: #6b7590;
  --line: #e7ebf5;
  --surface: #f6f8fd;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 9px;
  --shadow-ambient: 0 30px 70px -20px rgba(8, 14, 40, 0.22);
  --shadow-soft: 0 14px 40px -14px rgba(10, 20, 64, 0.20);
  --shadow-card: 0 1px 2px rgba(10, 20, 64, 0.04), 0 8px 20px -12px rgba(10, 20, 64, 0.10);
  --shadow-contact: 0 1px 1px rgba(10,20,64,.05), 0 1px 3px rgba(10,20,64,.08);
  --container: 1180px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ink-700);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.65;
  overflow-x: hidden;
}
h1, h2, h3, h4 {
  font-family: 'Fraunces', Georgia, serif;
  color: var(--ink-900);
  line-height: 1.1;
  margin: 0 0 .5em;
  font-weight: 600;
  letter-spacing: -0.015em;
  font-optical-sizing: auto;
}
p { margin: 0 0 1em; }
a { color: var(--royal-500); text-decoration: none; }
img { max-width: 100%; display: block; }
::selection { background: var(--royal-400); color: var(--white); }
.pv-container { max-width: var(--container); margin: 0 auto; padding: 0 28px; position: relative; z-index: 1; }
.pv-hp { position: absolute !important; left: -9999px !important; top: -9999px !important; }

/* custom scrollbar (webkit) — small, tasteful, on-brand */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: #c7cee8; border-radius: 20px; border: 3px solid var(--surface); }
::-webkit-scrollbar-thumb:hover { background: var(--royal-300); }

/* ---- grain texture (pure decoration; layered over navy/aurora surfaces) ---- */
.pv-grain {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  opacity: .5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}

/* ---- scroll reveal (progressive enhancement: only hides content once .js confirms JS ran) ---- */
.js .pv-reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--pv-delay, 0ms);
}
.js .pv-reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .js .pv-reveal { opacity: 1; transform: none; transition: none; }
}

/* ---- section rhythm ---- */
.pv-section { padding: 130px 0; position: relative; }
.pv-section--tight { padding: 80px 0; }
.pv-section--surface { background: var(--surface); }
.pv-section--navy {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--navy-950);
  color: rgba(255,255,255,.86);
}
.pv-section--navy::before {
  content: ''; position: absolute; inset: -10%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 55% at 12% 8%, rgba(79, 104, 224, .40), transparent 60%),
    radial-gradient(46% 60% at 88% 0%, rgba(44, 70, 201, .32), transparent 65%),
    radial-gradient(60% 70% at 50% 100%, rgba(22, 37, 122, .55), transparent 70%),
    linear-gradient(180deg, var(--navy-900) 0%, var(--navy-950) 65%);
  animation: pv-aurora 22s ease-in-out infinite alternate;
}
@keyframes pv-aurora {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-2%, 1.5%, 0) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) { .pv-section--navy::before { animation: none; } }
.pv-section--navy h1, .pv-section--navy h2, .pv-section--navy h3 { color: var(--white); }
.pv-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: .76rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--royal-500);
  margin-bottom: 16px;
}
.pv-section--navy .pv-eyebrow { color: #a9bcff; }
.pv-eyebrow::before { content: ''; width: 26px; height: 2px; background: currentColor; display: inline-block; border-radius: 2px; }
.pv-lede { font-size: 1.2rem; line-height: 1.6; color: var(--ink-500); max-width: 640px; }
.pv-section--navy .pv-lede { color: rgba(255,255,255,.68); }
.pv-center { text-align: center; margin-left: auto; margin-right: auto; }
.pv-kicker-block { max-width: 640px; margin-bottom: 60px; }
.pv-kicker-block h2 { font-size: clamp(1.9rem, 1.5rem + 1.5vw, 2.7rem); }

/* line icon base */
.pv-icon { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; display: inline-block; }

/* ---- nav ----
   position:fixed (not sticky) so the frosted glass always has the page's own gradient behind
   it to blur, from the very first frame — sticky only starts overlapping once you scroll past
   its natural flow position, which left the glass blurring nothing (blank white) at the top.
   White masthead (not navy) so the real logo lockup — which needs a light backdrop for its
   solid-black "PRECISION" wordmark to read — always sits on the background it was drawn for,
   regardless of which section (navy hero or white body) happens to be scrolled underneath. */
.pv-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--line);
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.pv-nav.is-scrolled { background: rgba(255,255,255,.99); box-shadow: 0 10px 30px -18px rgba(10,20,64,.18); }
.pv-nav-spacer { height: 92px; }
.pv-nav__row { display: flex; align-items: center; justify-content: space-between; height: 92px; }
.pv-nav__logo { display: flex; align-items: center; }
.pv-nav__logo-img { height: 60px; width: auto; display: block; }
.pv-nav__links { display: flex; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 0; }
.pv-nav__links a {
  color: var(--ink-700); font-size: .92rem; font-weight: 500;
  padding: 8px 14px; border-radius: 999px; transition: color .2s ease, background .2s ease;
}
.pv-nav__links a:hover { color: var(--ink-900); background: var(--surface); }
.pv-nav__cta { display: flex; align-items: center; gap: 20px; }

/* mobile hamburger toggle: hidden on desktop, shown under the 980px breakpoint below */
.pv-nav__toggle {
  display: none; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface); flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  cursor: pointer; flex-shrink: 0;
}
.pv-nav__toggle span { width: 18px; height: 1.5px; background: var(--ink-900); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
.pv-nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.pv-nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.pv-nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* mobile menu panel — collapsed by default (max-height trick so it can transition open/closed).
   Solid white (not translucent) so open-state content never bleeds through, matching the nav. */
.pv-mobile-menu {
  display: none; flex-direction: column; gap: 4px; padding: 10px 28px 22px;
  max-height: 0; overflow: hidden; opacity: 0;
  background: var(--white); border-bottom: 1px solid var(--line);
  transition: max-height .35s var(--ease), opacity .25s ease;
}
.pv-mobile-menu a {
  color: var(--ink-700); font-size: 1.02rem; font-weight: 500; padding: 13px 6px;
  border-bottom: 1px solid var(--line);
}
.pv-mobile-menu a.pv-btn { border-bottom: none; }
.pv-mobile-menu.is-open { max-height: 420px; opacity: 1; }

/* ---- buttons ---- */
.pv-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: .95rem;
  padding: 14px 28px; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .2s ease, border-color .2s ease;
  white-space: nowrap; overflow: hidden; isolation: isolate;
}
.pv-btn .pv-icon { width: 16px; height: 16px; }
.pv-btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 48%, transparent 66%);
  background-size: 220% 100%; background-position: 120% 0;
  transition: opacity .25s ease;
}
.pv-btn:hover::before { opacity: 1; animation: pv-sheen 1.1s ease forwards; }
@keyframes pv-sheen { from { background-position: 120% 0; } to { background-position: -20% 0; } }
.pv-btn--primary {
  background: linear-gradient(135deg, var(--royal-400), var(--royal-600));
  color: var(--white); box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 14px 30px -10px rgba(44, 70, 201, .65);
}
.pv-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 20px 38px -10px rgba(44, 70, 201, .75); }
.pv-btn--ghost-dark { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.22); color: var(--white); }
.pv-btn--ghost-dark:hover { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.08); transform: translateY(-2px); }
.pv-btn--outline { background: var(--white); border-color: var(--line); color: var(--ink-900); }
.pv-btn--outline:hover { border-color: var(--royal-400); color: var(--royal-600); transform: translateY(-2px); }
.pv-btn--block { width: 100%; }
.pv-btn--lg { padding: 16px 34px; font-size: 1.02rem; }

/* ---- breadcrumb (product pages linking back up to the IT Precision home) ---- */
.pv-breadcrumb { display: inline-block; font-size: .8rem; font-weight: 500; color: rgba(255,255,255,.5); margin-bottom: 16px; transition: color .2s ease; }
.pv-breadcrumb:hover { color: var(--white); }

/* ---- glowing scroll-progress rail: a fixed left-edge track that fills and carries a
   glowing dot as the page scrolls, desktop-only where there's gutter room for it. ---- */
.pv-rail { position: fixed; left: 28px; top: 0; height: 100vh; width: 2px; z-index: 90; pointer-events: none; display: none; }
@media (min-width: 1180px) { .pv-rail { display: block; } }
.pv-rail__track { position: absolute; inset: 0; background: rgba(120, 132, 168, .22); border-radius: 2px; display: block; }
.pv-rail__fill {
  position: absolute; left: 0; top: 0; width: 100%; height: 0%;
  background: linear-gradient(var(--royal-300), var(--royal-500));
  border-radius: 2px; display: block;
}
.pv-rail__dot {
  position: absolute; left: 50%; top: 0%; width: 7px; height: 7px; border-radius: 50%;
  background: var(--royal-400); box-shadow: 0 0 10px var(--royal-400), 0 0 2px var(--white);
  transform: translate(-50%, -50%); opacity: 0; display: block;
}

/* ---- hero ----
   top padding must clear the fixed nav (~79px) with margin, at every viewport — including
   narrow phones where the eyebrow line wraps to two lines and needs more clearance, not less. */
.pv-hero { padding: 118px 0 140px; position: relative; overflow: hidden; isolation: isolate; }
.pv-hero--compact { padding: 118px 0 90px; }
.pv-hero__glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(480px circle at var(--pv-mx, 78%) var(--pv-my, 15%), rgba(124, 146, 239, .28), transparent 60%);
  transition: background .12s linear;
}
.pv-hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: center; position: relative; z-index: 1; }
.pv-hero h1 {
  font-size: clamp(2.6rem, 2rem + 2.6vw, 4.35rem);
  letter-spacing: -0.028em; color: var(--white); font-weight: 600;
}
.pv-hero h1 em { font-style: normal; background: linear-gradient(100deg, #cdd8ff, var(--royal-300) 60%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pv-hero__stats { display: flex; gap: 40px; margin-top: 44px; flex-wrap: wrap; }
.pv-hero__stat { position: relative; padding-left: 18px; }
.pv-hero__stat::before { content: ''; position: absolute; left: 0; top: .25em; bottom: .25em; width: 2px; background: linear-gradient(var(--royal-300), transparent); border-radius: 2px; }
.pv-hero__stat b { display: block; font-family: 'Fraunces', serif; font-size: 1.75rem; color: var(--white); letter-spacing: -0.01em; }
.pv-hero__stat span { font-size: .82rem; color: rgba(255,255,255,.55); }
.pv-hero__actions { display: flex; gap: 16px; margin-top: 40px; flex-wrap: wrap; }
.pv-hero__title-lg { font-size: clamp(3rem, 2.1rem + 4vw, 5.6rem); letter-spacing: -0.032em; }

/* animated wave-thread canvas — abstract accent, available for hero sections with no photo */
.pv-hero__canvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }

/* animated honeycomb circuit canvas — a hex grid with a slow diagonal glow wave traveling
   across it, tech/structured "character" for an otherwise plain navy section */
.pv-honeycomb { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }

/* split hero: text one side, a real photo the other, on the SAME navy canvas as the text side
   (not a separate panel) — the photo is duotone-treated to match the palette and its edges are
   masked to a soft vignette so it dissolves into the section instead of sitting in a hard box,
   plus a blurred glow behind it that echoes the section's own aurora glow. That combination is
   what reads as "one hero" rather than two stacked halves. */
.pv-hero__photo-wrap { position: relative; z-index: 1; }
.pv-hero__photo-wrap::before {
  content: ''; position: absolute; inset: -18%; z-index: -1; pointer-events: none;
  background: radial-gradient(55% 55% at 44% 38%, rgba(79,104,224,.5), transparent 70%);
  filter: blur(34px);
}
.pv-hero__photo {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  -webkit-mask-image: radial-gradient(ellipse farthest-corner at 42% 34%, #000 24%, transparent 80%);
  mask-image: radial-gradient(ellipse farthest-corner at 42% 34%, #000 24%, transparent 80%);
}
.pv-hero__photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: 55% 18%; display: block;
  filter: grayscale(.2) brightness(.94) contrast(1.05) saturate(1.05);
}
.pv-hero__photo::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(200deg, rgba(5,11,31,0) 45%, rgba(5,11,31,.5) 100%),
              linear-gradient(15deg, rgba(44,70,201,.22), transparent 55%);
}
@media (prefers-reduced-motion: no-preference) {
  .pv-hero__photo-wrap { transition: transform .5s var(--ease); }
}

/* browser-chrome frame around real product screenshots */
.pv-frame {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  background: #0e1638; border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow-ambient), 0 1px 0 rgba(255,255,255,.06) inset;
}
.pv-frame__bar { display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: rgba(255,255,255,.03); border-bottom: 1px solid rgba(255,255,255,.07); }
.pv-frame__dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.18); }
.pv-frame__url {
  margin-left: 10px; flex: 1; max-width: 260px; text-align: center;
  font-size: .74rem; color: rgba(255,255,255,.4); background: rgba(255,255,255,.05);
  border-radius: 999px; padding: 5px 10px; font-family: 'Inter', sans-serif;
}
.pv-frame__body { line-height: 0; }
.pv-frame--tilt { transform: perspective(1400px) rotateY(-6deg) rotateX(2deg); transform-origin: 0% 50%; }
.pv-hero__panel-cap { display: flex; align-items: center; gap: 9px; padding: 16px 4px 0; color: rgba(255,255,255,.55); font-size: .84rem; }
.pv-hero__panel-cap .pv-icon { color: #6fd99a; width: 9px; height: 9px; }

/* ---- module grid ---- */
.pv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.pv-card {
  position: relative; background: var(--white); border-radius: var(--radius-md);
  padding: 32px 28px; box-shadow: var(--shadow-card);
  transition: box-shadow .4s var(--ease), transform .4s var(--ease);
  border: 1px solid var(--line);
}
.pv-card:hover { box-shadow: var(--shadow-soft); transform: translateY(-5px); border-color: transparent; }
.pv-card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; z-index: -1;
  background: linear-gradient(135deg, var(--royal-400), var(--royal-100) 40%, transparent 70%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .4s ease;
}
.pv-card:hover::after { opacity: 1; }
.pv-card__icon {
  width: 48px; height: 48px; border-radius: 13px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, var(--royal-100), #dbe3fb); color: var(--royal-600); font-size: 1.35rem; margin-bottom: 20px;
  transition: transform .4s var(--ease), color .3s ease;
}
.pv-card:hover .pv-card__icon { transform: scale(1.08) rotate(-4deg); color: var(--royal-500); }
.pv-card h3 { font-size: 1.15rem; margin-bottom: 9px; }
.pv-card p { color: var(--ink-500); font-size: .93rem; margin-bottom: 0; }
.pv-card--feature { background: linear-gradient(155deg, var(--navy-900), var(--navy-950)); border-color: var(--navy-900); }
.pv-card--feature h3, .pv-card--feature p { color: rgba(255,255,255,.85); }
.pv-card--feature .pv-card__icon { background: rgba(255,255,255,.1); color: var(--royal-300); }
.pv-card--feature p { color: rgba(255,255,255,.6); }

/* ---- capabilities (the two IT Precision disciplines: software + ISP ecosystems) ---- */
.pv-capabilities { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: stretch; }
.pv-capability {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 40px 38px; box-shadow: var(--shadow-card); display: flex; flex-direction: column;
}
.pv-capability__icon {
  width: 56px; height: 56px; border-radius: 15px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, var(--royal-100), #dbe3fb); color: var(--royal-600); font-size: 1.5rem; margin-bottom: 22px;
}
.pv-capability h3 { font-size: 1.4rem; margin-bottom: 10px; }
.pv-capability > p { color: var(--ink-500); font-size: .96rem; }

.pv-product-card {
  margin-top: auto; padding-top: 26px; border-top: 1px solid var(--line);
}
.pv-product-card__icon {
  width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, var(--royal-100), #dbe3fb); color: var(--royal-600); font-size: 1.1rem; margin-bottom: 14px;
}
.pv-product-card h4 { font-size: 1.2rem; margin-bottom: 6px; }
.pv-product-card p { color: var(--ink-500); font-size: .9rem; margin-bottom: 18px; }

.pv-isp-list { list-style: none; margin: 6px 0 22px; padding: 0; display: grid; gap: 22px; }
.pv-isp-list li { display: flex; gap: 16px; align-items: flex-start; }
.pv-isp-list .pv-icon {
  width: 20px; height: 20px; color: var(--royal-500); flex-shrink: 0; margin-top: 3px;
}
.pv-isp-list h5 { font-family: 'Inter', sans-serif; font-size: .98rem; font-weight: 600; color: var(--ink-900); margin: 0 0 3px; }
.pv-isp-list p { color: var(--ink-500); font-size: .89rem; margin-bottom: 0; }

/* ---- spotlight (investigation feature blocks) ---- */
.pv-spotlight { display: grid; grid-template-columns: 1fr 1.05fr; gap: 72px; align-items: center; }
.pv-spotlight + .pv-spotlight { margin-top: 130px; }
.pv-spotlight--reverse .pv-spotlight__copy { order: 2; }
.pv-spotlight--reverse .pv-spotlight__media { order: 1; }
.pv-spotlight__media { transform: perspective(1400px) rotateY(3deg); transition: transform .5s var(--ease); }
.pv-spotlight--reverse .pv-spotlight__media { transform: perspective(1400px) rotateY(-3deg); }
.pv-spotlight__media:hover { transform: perspective(1400px) rotateY(0deg) scale(1.01); }
.pv-spotlight__badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--royal-100); color: var(--royal-600);
  font-size: .76rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 7px 14px; border-radius: 999px; margin-bottom: 20px;
}
.pv-spotlight h2 { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem); }
.pv-checklist { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 16px; }
.pv-checklist li { display: flex; gap: 13px; align-items: flex-start; font-size: .97rem; color: var(--ink-700); }
.pv-checklist .pv-icon { color: var(--royal-500); margin-top: 2px; flex-shrink: 0; width: 19px; height: 19px; }

/* ---- process timeline ---- */
.pv-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 60px; position: relative; }
.pv-steps::before {
  content: ''; position: absolute; top: 27px; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 15%, var(--line) 85%, transparent);
}
.pv-step { position: relative; padding-top: 76px; }
.pv-step__num {
  position: absolute; top: 0; left: 0; width: 54px; height: 54px; border-radius: 50%;
  background: var(--white); border: 1.5px solid var(--line);
  color: var(--royal-600); font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.3rem;
  display: flex; align-items: center; justify-content: center; z-index: 1;
  box-shadow: var(--shadow-card);
}
.pv-step h3 { font-size: 1.1rem; margin-bottom: 7px; }
.pv-step p { color: var(--ink-500); font-size: .93rem; }

/* ---- trust / architecture row ---- */
.pv-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 56px; }
.pv-trust__item { text-align: center; padding: 10px; }
.pv-trust__ring {
  width: 60px; height: 60px; border-radius: 50%; margin: 0 auto 18px; position: relative;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 30% 20%, rgba(124,146,239,.35), rgba(124,146,239,.04));
  border: 1px solid rgba(160, 180, 255, .3);
}
.pv-trust__ring .pv-icon { width: 24px; height: 24px; color: var(--royal-300); }
.pv-trust__item h4 { color: var(--white); font-size: 1.02rem; margin-bottom: 7px; }
.pv-trust__item p { color: rgba(255,255,255,.58); font-size: .87rem; margin-bottom: 0; }

/* ---- CTA band ---- */
.pv-cta-band { padding: 120px 0; }
.pv-cta-card {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--navy-950);
  border-radius: 28px; padding: 68px; display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center;
  box-shadow: var(--shadow-ambient);
}
.pv-cta-card::before {
  content: ''; position: absolute; inset: -20%; z-index: 0; pointer-events: none;
  background: radial-gradient(45% 65% at 8% 100%, rgba(79,104,224,.4), transparent 70%),
              radial-gradient(55% 70% at 100% 0%, rgba(44,70,201,.35), transparent 70%);
}
.pv-cta-card h2 { color: var(--white); font-size: clamp(1.7rem, 1.3rem + 1.3vw, 2.2rem); }
.pv-cta-card .pv-lede { color: rgba(255,255,255,.68); }

/* ---- forms ---- */
.pv-form { display: grid; gap: 17px; position: relative; z-index: 1; }
.pv-form--card { background: var(--white); border-radius: var(--radius-lg); padding: 34px; box-shadow: var(--shadow-ambient); }
.pv-field label { display: block; font-size: .82rem; font-weight: 600; color: var(--ink-700); margin-bottom: 7px; }
.pv-field input, .pv-field textarea {
  width: 100%; border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 12px 15px;
  font-family: inherit; font-size: .95rem; color: var(--ink-900); background: var(--white);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.pv-field input:focus, .pv-field textarea:focus {
  outline: none; border-color: var(--royal-400); box-shadow: 0 0 0 4px rgba(79, 104, 224, .14);
}
.pv-field .pv-error { color: #c0334a; font-size: .8rem; margin-top: 5px; }
.pv-form-note { font-size: .78rem; color: var(--ink-500); margin-top: 4px; }
.pv-success {
  text-align: center; padding: 52px 28px; background: var(--white); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-ambient);
}
.pv-success .pv-icon { width: 52px; height: 52px; color: #2fa86a; margin: 0 auto 18px; display: block; stroke-width: 1.4; }

/* ---- contact page ---- */
.pv-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 68px; align-items: start; }

/* ---- footer ---- */
.pv-footer { position: relative; background: var(--navy-950); color: rgba(255,255,255,.55); padding: 72px 0 34px; overflow: hidden; }
.pv-footer__top { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 40px; padding-bottom: 44px; border-bottom: 1px solid rgba(255,255,255,.08); flex-wrap: wrap; }
.pv-footer__logo-img { height: 42px; width: auto; display: block; margin-bottom: 16px; }
.pv-footer__brand p { max-width: 320px; font-size: .88rem; }
.pv-footer__cols { display: flex; gap: 64px; flex-wrap: wrap; }
.pv-footer__col h5 { color: var(--white); font-size: .8rem; letter-spacing: .07em; text-transform: uppercase; margin-bottom: 18px; font-family: 'Inter', sans-serif; }
.pv-footer__col a { display: block; color: rgba(255,255,255,.55); font-size: .9rem; margin-bottom: 11px; transition: color .2s ease; }
.pv-footer__col a:hover { color: var(--white); }
.pv-footer__bottom { position: relative; z-index: 1; padding-top: 30px; display: flex; justify-content: space-between; font-size: .8rem; flex-wrap: wrap; gap: 10px; }

/* ---- responsive ---- */
@media (max-width: 980px) {
  .pv-hero__grid, .pv-spotlight, .pv-contact-grid, .pv-cta-card, .pv-capabilities { grid-template-columns: 1fr; }
  .pv-spotlight--reverse .pv-spotlight__copy, .pv-spotlight--reverse .pv-spotlight__media { order: 0; }
  .pv-frame--tilt, .pv-spotlight__media { transform: none !important; }
  .pv-spotlight + .pv-spotlight { margin-top: 80px; }
  .pv-grid { grid-template-columns: repeat(2, 1fr); }
  .pv-trust { grid-template-columns: repeat(2, 1fr); }
  .pv-steps { grid-template-columns: 1fr; gap: 40px; }
  .pv-steps::before { display: none; }

  /* mobile nav: swap the inline links + CTA for the hamburger + slide-down panel */
  .pv-nav__links, .pv-nav__cta { display: none; }
  .pv-nav__toggle { display: flex; }
  .pv-mobile-menu { display: flex; }

  .pv-section { padding: 90px 0; }
}
@media (max-width: 620px) {
  .pv-container { padding: 0 20px; }
  .pv-grid, .pv-trust { grid-template-columns: 1fr; }
  .pv-section { padding: 70px 0; }
  .pv-cta-card { padding: 40px 22px; border-radius: 20px; }
  .pv-form--card { padding: 24px; }
  .pv-capability { padding: 28px 24px; }
  .pv-footer__top { flex-direction: column; }
  .pv-hero__stats { gap: 24px 32px; }
  /* the eyebrow line wraps to two lines at this width — extra top clearance so it never
     renders under the fixed nav (see the .pv-hero comment above) */
  .pv-hero { padding-top: 132px; padding-bottom: 80px; }
  .pv-hero--compact { padding-top: 132px; padding-bottom: 64px; }
  .pv-nav__row { height: 68px; }
  .pv-nav__logo-img { height: 38px; }
}