
    :root {
      --jpv-navy: #0f172a;
      --jpv-blue: #1d4ed8;
      --jpv-sky: #e0f2fe;
      --jpv-slate: #475569;
      --jpv-light: #f8fafc;
      --jpv-card: #ffffff;
      --jpv-border: #e2e8f0;
      --jpv-accent: #f59e0b;
      --jpv-green: #16a34a;
      --jpv-radius: 18px;
      --jpv-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
      color: var(--jpv-navy);
      background: var(--jpv-light);
      line-height: 1.6;
    }

    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }

    .jpv-page { width: 100%; overflow: hidden; }
    .jpv-container { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }

    .jpv-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 14px 22px;
      border-radius: 999px;
      font-weight: 700;
      transition: 0.2s ease;
      border: 1px solid transparent;
      cursor: pointer;
    }

    .jpv-button-primary {
      background: var(--jpv-blue);
      color: white;
      box-shadow: 0 12px 25px rgba(29, 78, 216, 0.28);
    }

    .jpv-button-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 16px 35px rgba(29, 78, 216, 0.35);
    }

    .jpv-button-secondary {
      background: white;
      color: var(--jpv-navy);
      border-color: var(--jpv-border);
    }

    .jpv-button-secondary:hover {
      transform: translateY(-2px);
      border-color: var(--jpv-blue);
    }

    .jpv-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      background: rgba(224, 242, 254, 0.95);
      border: 1px solid rgba(125, 211, 252, 0.65);
      color: #075985;
      border-radius: 999px;
      font-weight: 700;
      font-size: 0.88rem;
      margin-bottom: 18px;
    }

    .jpv-hero {
      position: relative;
      color: white;
      background:
        linear-gradient(115deg, rgba(15, 23, 42, 0.95), rgba(15, 23, 42, 0.76), rgba(29, 78, 216, 0.54)),
        url("https://images.unsplash.com/photo-1503387762-592deb58ef4e?auto=format&fit=crop&w=1800&q=80");
      background-size: cover;
      background-position: center;
      padding: 34px 0 90px;
    }

    .jpv-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 78px;
    }

    .jpv-logo {
      display: flex;
      align-items: center;
      gap: 12px;
      font-weight: 800;
      letter-spacing: -0.02em;
    }

    .jpv-logo-mark {
      width: 42px;
      height: 42px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      background: white;
      color: var(--jpv-blue);
      font-weight: 900;
    }

    .jpv-nav-links {
      display: flex;
      align-items: center;
      gap: 20px;
      font-size: 0.95rem;
      color: rgba(255, 255, 255, 0.88);
    }

    .jpv-nav-links a:hover { color: white; }

    .jpv-hero-grid {
      display: grid;
      grid-template-columns: 1.05fr 0.95fr;
      gap: 48px;
      align-items: center;
    }

    .jpv-hero h1 {
      font-size: clamp(2.4rem, 5vw, 5rem);
      line-height: 0.98;
      margin: 0 0 22px;
      letter-spacing: -0.055em;
    }

    .jpv-hero p {
      font-size: 1.18rem;
      color: rgba(255, 255, 255, 0.86);
      max-width: 680px;
      margin: 0 0 30px;
    }

    .jpv-hero-actions {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      margin-bottom: 28px;
    }

    .jpv-hero-note {
      font-size: 0.92rem;
      color: rgba(255, 255, 255, 0.76);
    }

    .jpv-hero-card {
      background: rgba(255, 255, 255, 0.94);
      color: var(--jpv-navy);
      border-radius: 24px;
      padding: 28px;
      box-shadow: var(--jpv-shadow);
      border: 1px solid rgba(255, 255, 255, 0.75);
    }

    .jpv-hero-card h3 { margin: 0 0 14px; font-size: 1.25rem; }

    .jpv-check-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      gap: 12px;
    }

    .jpv-check-list li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      color: var(--jpv-slate);
    }

    .jpv-check { color: var(--jpv-green); font-weight: 900; }

    .jpv-trust-bar { background: white; border-bottom: 1px solid var(--jpv-border); }

    .jpv-trust-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
      padding: 22px 0;
    }

    .jpv-trust-item { font-size: 0.94rem; color: var(--jpv-slate); }
    .jpv-trust-item strong { display: block; color: var(--jpv-navy); font-size: 1rem; }

    .jpv-section { padding: 82px 0; }
    .jpv-section-tight { padding: 58px 0; }

    .jpv-section-heading { max-width: 760px; margin-bottom: 38px; }
    .jpv-section-heading h2 {
      font-size: clamp(2rem, 3.4vw, 3.2rem);
      line-height: 1.05;
      letter-spacing: -0.04em;
      margin: 0 0 16px;
    }

    .jpv-section-heading p { color: var(--jpv-slate); font-size: 1.06rem; margin: 0; }

    .jpv-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
    .jpv-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }

    .jpv-card {
      background: var(--jpv-card);
      border: 1px solid var(--jpv-border);
      border-radius: var(--jpv-radius);
      padding: 26px;
      box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
    }

    .jpv-card h3 { margin: 0 0 10px; font-size: 1.28rem; }
    .jpv-card p { margin: 0 0 18px; color: var(--jpv-slate); }
    .jpv-card ul { margin: 0; padding-left: 20px; color: var(--jpv-slate); }
    .jpv-card li { margin: 7px 0; }

    .jpv-icon {
      width: 48px;
      height: 48px;
      border-radius: 16px;
      background: var(--jpv-sky);
      color: var(--jpv-blue);
      display: grid;
      place-items: center;
      font-weight: 900;
      margin-bottom: 18px;
    }

    .jpv-dark { background: var(--jpv-navy); color: white; }
    .jpv-dark .jpv-section-heading p,
    .jpv-dark .jpv-card p,
    .jpv-dark .jpv-card li { color: rgba(255, 255, 255, 0.72); }
    .jpv-dark .jpv-card { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); }

    .jpv-package { position: relative; }
    .jpv-price { font-size: 2rem; font-weight: 900; letter-spacing: -0.04em; margin: 16px 0 8px; }
    .jpv-price span { color: var(--jpv-slate); font-size: 0.96rem; font-weight: 600; letter-spacing: 0; }

    .jpv-badge {
      display: inline-flex;
      padding: 6px 10px;
      border-radius: 999px;
      background: #fef3c7;
      color: #92400e;
      font-weight: 800;
      font-size: 0.78rem;
      margin-bottom: 12px;
    }

    .jpv-featured { border: 2px solid var(--jpv-blue); transform: translateY(-8px); }

    .jpv-split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 44px; align-items: center; }

    .jpv-visual-box {
      background:
        linear-gradient(145deg, rgba(29, 78, 216, 0.95), rgba(14, 165, 233, 0.65)),
        url("https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=1400&q=80");
      background-size: cover;
      background-position: center;
      border-radius: 28px;
      min-height: 430px;
      padding: 26px;
      display: flex;
      align-items: flex-end;
      box-shadow: var(--jpv-shadow);
      color: white;
    }

    .jpv-visual-box-inner {
      background: rgba(15, 23, 42, 0.72);
      backdrop-filter: blur(8px);
      border-radius: 20px;
      padding: 20px;
      width: 100%;
    }

    .jpv-visual-box-inner h3 { margin: 0 0 8px; }
    .jpv-visual-box-inner p { margin: 0; color: rgba(255, 255, 255, 0.78); }

    .jpv-process { counter-reset: step; }
    .jpv-process .jpv-card { position: relative; padding-top: 64px; }
    .jpv-process .jpv-card::before {
      counter-increment: step;
      content: counter(step);
      position: absolute;
      top: 22px;
      left: 26px;
      width: 34px;
      height: 34px;
      border-radius: 12px;
      background: var(--jpv-blue);
      color: white;
      display: grid;
      place-items: center;
      font-weight: 900;
    }

    .jpv-portfolio-placeholder { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 22px; min-height: 480px; }
    .jpv-photo-large,
    .jpv-photo-small {
      border-radius: 24px;
      background-size: cover;
      background-position: center;
      box-shadow: var(--jpv-shadow);
      position: relative;
      overflow: hidden;
    }

    .jpv-photo-large {
      background-image:
        linear-gradient(0deg, rgba(15,23,42,.55), rgba(15,23,42,.05)),
        url("https://images.unsplash.com/photo-1560518883-ce09059eeffa?auto=format&fit=crop&w=1400&q=80");
    }

    .jpv-photo-stack { display: grid; gap: 22px; }
    .jpv-photo-small:nth-child(1) {
      background-image:
        linear-gradient(0deg, rgba(15,23,42,.45), rgba(15,23,42,.03)),
        url("https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?auto=format&fit=crop&w=1100&q=80");
    }

    .jpv-photo-small:nth-child(2) {
      background-image:
        linear-gradient(0deg, rgba(15,23,42,.45), rgba(15,23,42,.03)),
        url("https://images.unsplash.com/photo-1503387762-592deb58ef4e?auto=format&fit=crop&w=1100&q=80");
    }

    .jpv-photo-label {
      position: absolute;
      left: 20px;
      bottom: 20px;
      color: white;
      font-weight: 800;
      background: rgba(15,23,42,.75);
      border-radius: 999px;
      padding: 9px 13px;
      font-size: 0.9rem;
    }

    .jpv-contact {
      background:
        radial-gradient(circle at top left, rgba(29, 78, 216, 0.25), transparent 42%),
        var(--jpv-navy);
      color: white;
      border-radius: 32px;
      padding: 42px;
      display: grid;
      grid-template-columns: 1fr 0.95fr;
      gap: 34px;
      align-items: start;
      box-shadow: var(--jpv-shadow);
    }

    .jpv-contact h2 { font-size: clamp(2rem, 3vw, 3.2rem); line-height: 1.05; margin: 0 0 14px; letter-spacing: -0.04em; }
    .jpv-contact p { color: rgba(255, 255, 255, 0.74); margin: 0 0 24px; }

    .jpv-form { background: white; color: var(--jpv-navy); border-radius: 22px; padding: 22px; }
    .jpv-form label { display: block; font-weight: 800; font-size: 0.88rem; margin-bottom: 6px; }
    .jpv-form input,
    .jpv-form select,
    .jpv-form textarea {
      width: 100%;
      border: 1px solid var(--jpv-border);
      border-radius: 12px;
      padding: 12px;
      font: inherit;
      margin-bottom: 14px;
      background: #fff;
    }

    .jpv-form textarea { min-height: 110px; resize: vertical; }
    .jpv-disclaimer { font-size: 0.86rem; color: rgba(255, 255, 255, 0.65); margin-top: 18px; }

    .jpv-footer {
      padding: 34px 0;
      color: var(--jpv-slate);
      font-size: 0.92rem;
      border-top: 1px solid var(--jpv-border);
      background: white;
    }

    .jpv-footer-grid { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

    @media (max-width: 900px) {
      .jpv-nav-links { display: none; }
      .jpv-hero-grid,
      .jpv-grid-3,
      .jpv-grid-2,
      .jpv-split,
      .jpv-contact,
      .jpv-portfolio-placeholder,
      .jpv-trust-grid { grid-template-columns: 1fr; }
      .jpv-hero { padding-bottom: 64px; }
      .jpv-nav { margin-bottom: 46px; }
      .jpv-featured { transform: none; }
      .jpv-section { padding: 58px 0; }
      .jpv-contact { padding: 28px; }
    }
  
/* Brave Innovations brand integration */
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{font-family:'DM Sans',Arial,sans-serif}
h1,h2,h3{font-family:Manrope,Arial,sans-serif}
.jpv-hero{background:linear-gradient(110deg,rgba(15,23,42,.97),rgba(15,23,42,.80),rgba(15,23,42,.4)),url('../images/architecture.jpg') center/cover;padding-top:55px}
.jpv-hero h1{line-height:1.08;font-weight:600}
.jpv-hero-card,.jpv-card,.jpv-visual-box,.jpv-contact,.jpv-form,.jpv-visual-box-inner{border-radius:4px;box-shadow:none}
.jpv-button,.jpv-tag,.jpv-badge,.jpv-icon,.jpv-form input,.jpv-form select,.jpv-form textarea{border-radius:3px}
.jpv-button-primary{background:#2461ef;box-shadow:none}
.jpv-hero-card{padding:32px}.jpv-check{color:#2461ef}
.jpv-visual-box{background:linear-gradient(145deg,#172b4ad9,#152942aa),url('../images/architecture.jpg') center/cover}
.jpv-dark .jpv-check-list li{color:#d4dce8}
.jpv-dark .jpv-check{color:#86aaff}
.jpv-featured{transform:none}.jpv-price{color:#2461ef}
.jpv-tag{font-size:13px;background:#e8efff;color:#204ba4;border:0}
.jpv-form .form-status{color:#334155;font-size:14px;margin:14px 0 0}
.jpv-form .form-note{color:#475569;font-size:13px}
.jpv-form button{width:100%}
.jpv-footer{padding:34px 0}
.jpv-footer-grid{font-size:14px}
.jpv-package .jpv-button{margin-top:24px;width:100%;font-size:14px}
.header nav a[aria-current=page]{color:#2461ef}
@media(max-width:1050px){.header nav{gap:15px;font-size:13px}.header{padding-left:4%;padding-right:4%}}
@media(max-width:900px){.jpv-hero-grid{gap:28px}.jpv-hero{padding-top:40px}.jpv-trust-grid{grid-template-columns:1fr 1fr}.jpv-visual-box{min-height:300px}}
@media(max-width:640px){.jpv-hero h1{font-size:44px}.jpv-hero p{font-size:17px}.jpv-hero-card{padding:24px}.jpv-contact{padding:20px}.jpv-trust-grid{gap:20px}.jpv-section-heading h2{line-height:1.15}.jpv-container{width:calc(100% - 40px)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
