/* Site theme (all pages): lighter enterprise layout.
   Light content sections, raised white cards, corner radius halved (12px -> 6px). */
body.v2 {
  --radius: 6px;
  --ink: #0b1a3a;
  --ink-2: #3d4b66;
  --light: #ffffff;
  --light-alt: #f2f5fa;
  --light-line: #e1e8f2;
  --shadow: 0 1px 2px rgba(0, 24, 82, .06), 0 10px 28px rgba(0, 24, 82, .10);
  --shadow-hover: 0 2px 4px rgba(0, 24, 82, .08), 0 20px 44px rgba(0, 24, 82, .18);
}

/* Header: solid, crisp bar */
.v2 .site-header { background: #010a24; border-bottom: 1px solid rgba(255, 255, 255, .08); }

/* Buttons: squarer, enterprise style */
.v2 .btn { border-radius: 4px; font-weight: 600; }
.v2 .nav-cta { border-radius: 4px; }

/* Headings: slightly lighter weight, more air */
.v2 h2 { font-weight: 600; letter-spacing: -0.015em; }
.v2 section { padding: 88px 0; }

/* ---------- Light sections ---------- */
.v2 .light { background: var(--light); color: var(--ink); }
.v2 .light.alt { background: var(--light-alt); }
.v2 .light h2 { color: #001852; }
.v2 .light p { color: var(--ink-2); }
.v2 .light .section-label { color: #027991; }
.v2 .light .accent { background: linear-gradient(90deg, #02479f, #01adb1); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* What is AssetArx: a statement on white */
.v2 .about { padding: 96px 0 88px; }
.v2 .about h2 { color: #001852; max-width: 32ch; }
.v2 .about p { color: var(--ink-2); }

/* Cards that lift off the page */
.v2 .light .card {
  background: #ffffff; border: 1px solid var(--light-line); border-top: 3px solid var(--teal);
  border-radius: var(--radius); box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.v2 .light .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.v2 .light .card h3 { color: #02479f; }
.v2 .light .card p { color: var(--ink-2); }
.v2 .light .card .years { color: var(--ink-2); }
.v2 .light .card .years .accent { background: none; -webkit-text-fill-color: currentColor; color: #001852; }
.v2 .light .icon { background: #e3f5f6; color: #027991; border-radius: 4px; }

/* Market insight: white stat cards on soft grey */
.v2 .light .card.stat-card .figure { color: #001852; }
.v2 .light .stat-card .figure-prefix { color: #001852; }
.v2 .light .card.stat-card p { color: #1d2b47; }
.v2 .light .card.stat-card .source { color: #6a7790; }
.v2 .insight-img { border-radius: var(--radius); border: 0; box-shadow: var(--shadow); }
.v2 .insight .insight-close {
  color: #ffffff; border-radius: var(--radius); border: 0; border-left: 4px solid var(--cyan);
  background: linear-gradient(90deg, #001852, #02479f 70%, #027991);
  box-shadow: 0 14px 34px rgba(0, 24, 82, .22);
}

/* Photos: sharper corners and a soft shadow */
.v2 .feature-img { border-radius: var(--radius); border: 0; box-shadow: var(--shadow); }

/* ---------- Dark photo band (Compliance support) ---------- */
.v2 .band.photo:not(.light) .card {
  background: rgba(1, 14, 46, .86); border: 1px solid rgba(255, 255, 255, .16); border-top: 3px solid var(--cyan);
  border-radius: var(--radius); box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.v2 .band.photo:not(.light) .card:hover { transform: translateY(-4px); box-shadow: 0 22px 50px rgba(0, 0, 0, .55); border-color: rgba(1, 226, 214, .45); }
.v2 .band.photo:not(.light) .card h3 { color: #ffffff; }
.v2 .band.photo:not(.light) .card p { color: #c3cfe6; }
.v2 .band:not(.light) .icon { border-radius: 4px; background: rgba(1, 226, 214, .16); color: var(--cyan); }

@media (prefers-reduced-motion: reduce) {
  .v2 .card, .v2 .card:hover { transition: none; transform: none; }
}
@media (max-width: 640px) {
  .v2 section { padding: 64px 0; }
}

/* Compliance support band in the light style: no photo, white background */
.v2 .band.light { padding: 88px 0; background: var(--light); }
.v2 .band.light > .photo-bg, .v2 .band.light::before, .v2 .band.light::after { display: none; }
.v2 .band.light .card { backdrop-filter: none; -webkit-backdrop-filter: none; }
.v2 .light .btn-outline { background: #ffffff; color: #02479f; border: 1px solid #02479f; }
.v2 .light .btn-outline:hover { background: #02479f; color: #ffffff; }

/* Headings in one colour: white on dark backgrounds, navy on light ones */
.v2 h1 .accent, .v2 h2 .accent, .v2 .light h2 .accent { background: none; -webkit-text-fill-color: currentColor; color: inherit; }
.v2 .hero h1 { color: #ffffff; }

/* Lighter hero: brighter photo, softer overlay, text side still shaded for legibility */
.v2 .hero.photo > .photo-bg { filter: saturate(1.05) brightness(1.3) contrast(1.02); }
.v2 .hero.photo::before {
  background:
    linear-gradient(rgba(2, 71, 159, .10), rgba(2, 71, 159, .10)),
    linear-gradient(to bottom, rgba(1, 10, 36, .30) 0%, rgba(1, 10, 36, 0) 25%, rgba(1, 10, 36, 0) 75%, rgba(1, 10, 36, .25) 100%),
    radial-gradient(ellipse 55% 45% at 22% 72%, rgba(1, 10, 36, .55) 0%, rgba(1, 10, 36, 0) 100%),
    linear-gradient(90deg, rgba(1, 10, 36, .5) 0%, rgba(1, 10, 36, .1) 55%, rgba(1, 10, 36, 0) 100%);
}
.v2 .hero.photo .lead, .v2 .hero.photo .section-label, .v2 .hero.photo .btn-ghost { text-shadow: 0 1px 10px rgba(1, 10, 36, .85); }
.v2 .hero.photo .lead { color: rgba(255, 255, 255, .92); }

/* Stronger lift for cards */
body.v2 {
  --light-alt: #e8eef7;
  --shadow: 0 2px 4px rgba(0, 24, 82, .08), 0 14px 32px rgba(0, 24, 82, .16), 0 30px 60px -20px rgba(0, 24, 82, .22);
  --shadow-hover: 0 4px 8px rgba(0, 24, 82, .10), 0 24px 48px rgba(0, 24, 82, .24), 0 40px 80px -24px rgba(2, 71, 159, .30);
}
.v2 .light .card { border-top-width: 4px; border-color: #d6e0ee; border-top-color: var(--teal); }
.v2 .light .card:hover { transform: translateY(-6px); border-top-color: var(--cyan); }
.v2 .light .icon { background: linear-gradient(135deg, #d9f4f5, #e3ecfa); }

/* Typography matched to Microsoft Learn: Segoe UI stack, 600-weight headings, normal tracking */
body.v2 { --mono: "Segoe UI", "Segoe UI Variable Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif; }
body.v2, .v2 button, .v2 input, .v2 select, .v2 textarea {
  font-family: "Segoe UI", "Segoe UI Variable Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.75;
}
.v2 h1, .v2 h2, .v2 h3 { font-weight: 600; letter-spacing: normal; line-height: 1.3; }
.v2 .section-label { font-family: inherit; font-weight: 600; letter-spacing: .08em; }
.v2 .card.stat-card .figure { font-weight: 600; letter-spacing: normal; }

/* Hero: long, gradual fade from the dark photo into the white section below */
.v2 .hero.photo:not(.compact) { padding-bottom: 300px; }
.v2 .hero.photo::before {
  background:
    linear-gradient(to bottom,
      rgba(255, 255, 255, 0) calc(100% - 340px),
      rgba(232, 238, 247, .18) calc(100% - 250px),
      rgba(240, 244, 250, .55) calc(100% - 150px),
      rgba(250, 252, 255, .88) calc(100% - 60px),
      #ffffff 100%),
    linear-gradient(rgba(2, 71, 159, .10), rgba(2, 71, 159, .10)),
    linear-gradient(to bottom, rgba(1, 10, 36, .30) 0%, rgba(1, 10, 36, 0) 25%),
    radial-gradient(ellipse 55% 40% at 22% 55%, rgba(1, 10, 36, .55) 0%, rgba(1, 10, 36, 0) 100%),
    linear-gradient(90deg, rgba(1, 10, 36, .5) 0%, rgba(1, 10, 36, .1) 55%, rgba(1, 10, 36, 0) 100%);
}
.v2 .hero.photo.grain::after { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 300px), transparent 100%); mask-image: linear-gradient(to bottom, #000 calc(100% - 300px), transparent 100%); }
.v2 .about { padding-top: 40px; }
.v2 .hero.photo { background: #ffffff; }
.v2 .hero.photo > .photo-bg { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 320px), transparent calc(100% - 20px)); mask-image: linear-gradient(to bottom, #000 calc(100% - 320px), transparent calc(100% - 20px)); }

/* Hero label: larger, white and bold so it reads over the photo */
.v2 .hero.photo .section-label { color: #ffffff; font-size: .95rem; font-weight: 600; letter-spacing: .06em; margin-bottom: 1rem; text-shadow: 0 1px 12px rgba(1, 10, 36, .9), 0 0 2px rgba(1, 10, 36, .6); }

/* Hero main button styled like "Get in Touch" */
.v2 .btn.btn-cta {
  border-radius: 999px; padding: 0 24px; color: #ffffff; font-weight: 600; letter-spacing: .01em;
  background: linear-gradient(90deg, #02479f, #0288b4);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 4px 14px rgba(2, 71, 159, .45);
  transition: filter .15s, box-shadow .15s;
}
.v2 .btn.btn-cta:hover { color: #ffffff; filter: brightness(1.15); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 6px 18px rgba(2, 136, 180, .5); }

/* ===================== Site-wide: inner pages ===================== */
/* Light sections re-map the base colour variables so every component switches to dark-on-white. */
.v2 .light {
  --text: #0b1a3a;
  --muted: #3d4b66;
  --card: #ffffff;
  --card-hover: #ffffff;
  --card-border: #d6e0ee;
  --line: #e1e8f2;
  --accent: #027991;
  --accent-hover: #02479f;
  --cyan: #027991;
  --on-accent: #ffffff;
}
.v2 .light h3 { color: #02479f; }
.v2 .light a:not(.btn):not(.svc) { color: #02479f; }
.v2 .light a:not(.btn):not(.svc):hover { color: #027991; }

/* Compact photo heroes on inner pages: same lighter photo and gradual fade into white */
.v2 .hero.compact.photo { padding-bottom: 220px; min-height: 0; padding-top: 200px; }
.v2 .hero.compact.photo > .photo-bg { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 240px), transparent calc(100% - 10px)); mask-image: linear-gradient(to bottom, #000 calc(100% - 240px), transparent calc(100% - 10px)); }
.v2 .hero.compact.photo::before {
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0) calc(100% - 260px), rgba(232, 238, 247, .2) calc(100% - 190px), rgba(240, 244, 250, .6) calc(100% - 110px), rgba(250, 252, 255, .9) calc(100% - 40px), #ffffff 100%),
    linear-gradient(rgba(2, 71, 159, .10), rgba(2, 71, 159, .10)),
    linear-gradient(to bottom, rgba(1, 10, 36, .35) 0%, rgba(1, 10, 36, 0) 30%),
    radial-gradient(ellipse 60% 45% at 22% 50%, rgba(1, 10, 36, .55) 0%, rgba(1, 10, 36, 0) 100%),
    linear-gradient(90deg, rgba(1, 10, 36, .5) 0%, rgba(1, 10, 36, .1) 55%, rgba(1, 10, 36, 0) 100%);
}
.v2 .hero.compact.photo .section-label { color: #ffffff; font-size: .95rem; letter-spacing: .06em; text-shadow: 0 1px 12px rgba(1, 10, 36, .9); }
.v2 .hero.compact.photo .lead, .v2 .hero.compact.photo p { text-shadow: 0 1px 10px rgba(1, 10, 36, .85); }
.v2 .hero.photo.grain::after { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 260px), transparent 100%); mask-image: linear-gradient(to bottom, #000 calc(100% - 260px), transparent 100%); }
.v2 .hero.photo .hero-tagline { color: #ffffff; text-shadow: 0 1px 10px rgba(1, 10, 36, .85); }
.v2 main > section.light:first-of-type, .v2 .hero + section.light { padding-top: 40px; }

/* Closing photo bands (CTA) stay dark, with sharper corners on their buttons */
.v2 .cta-band.photo .btn-outline { border-radius: 4px; }

/* Tabs, tables and form controls in light sections */
.v2 .light [role="tab"] { border-radius: 4px; }
.v2 .light [role="tab"][aria-selected="true"] { background: #02479f; color: #ffffff; border-color: #02479f; }
.v2 .light .reg-table { background: #ffffff; border-radius: var(--radius); box-shadow: var(--shadow); }
.v2 .light .reg-table th { background: #001852; color: #ffffff; }
.v2 .light input, .v2 .light select, .v2 .light textarea { background: #ffffff; color: #0b1a3a; border-color: #c9d5e6; border-radius: 4px; }
.v2 .light .btn-primary { background: linear-gradient(90deg, #02479f, #0288b4); color: #ffffff; border-radius: 999px; }

/* Closing photo bands: one-colour statement, home-page button style, sharper box */
.v2 .statement .accent { background: none; -webkit-text-fill-color: currentColor; color: inherit; }
.v2 .cta-box { border-radius: var(--radius); }
.v2 .cta-tagline { color: #ffffff; font-family: inherit; letter-spacing: .06em; }
.v2 .btn.btn-primary {
  border-radius: 999px; padding: 0 24px; color: #ffffff; font-weight: 600;
  background: linear-gradient(90deg, #02479f, #0288b4);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 4px 14px rgba(2, 71, 159, .45);
  transition: filter .15s, box-shadow .15s;
}
.v2 .btn.btn-primary:hover { color: #ffffff; filter: brightness(1.15); }
.v2 .light .card.pack:target { box-shadow: 0 0 0 3px #01adb1, var(--shadow-hover); }