/* Silver-ribbon layer (from the phone-wallpaper style) on top of palette B. Remove this file + its <link> to revert to v1-navy-design. */
:root, :root[data-theme="light"] {
  --paper: #fbfcfd; --paper-2: #eef1f4; --rule: #dde3ea;
  --ink: #16233b; --ink-soft: #4a5563; --card: #ffffff; --card-bg: #ffffff;
  --steel: #5f7d9c; --s1: #ffffff; --s2: #e3e7ec; --s3: #aeb8c4;
  --tint: #eef1f4; --tint-2: #dde3ea; --ph-a: #eef1f4; --ph-b: #e3e7ec;
  --radius: 14px;
}
body { background: var(--paper); }

/* hero: silver ribbons replace the ruled lines + curves */
.hero { background:
    linear-gradient(90deg, rgba(251,252,253,.97) 0%, rgba(251,252,253,.82) 40%, rgba(251,252,253,0) 72%),
    url("../assets/silver-ribbons.svg") center right / cover no-repeat !important;
  border-bottom: 0; padding-block: 88px 96px; }
.hero::after { display: none; }
.hero-copy { background: transparent; }
.hero h1 { letter-spacing: -0.02em; }
.hero-photo { border-color: rgba(255,255,255,.9); border-radius: 22px; box-shadow: 0 30px 60px -30px rgba(43,58,76,.45); }
@media (max-width: 900px) { .hero { background:
    linear-gradient(180deg, rgba(251,252,253,.95) 0%, rgba(251,252,253,.8) 55%, rgba(251,252,253,.35) 100%),
    url("../assets/silver-ribbons.svg") 70% center / cover no-repeat !important; } }

/* buttons: steel + silver pills */
.btn { border-radius: 999px; transition: transform .2s, box-shadow .2s; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: linear-gradient(135deg, #2b3a4c 0%, var(--steel) 100%); color: #fff; box-shadow: 0 8px 24px rgba(43,58,76,.25); border-color: transparent; }
.btn-primary:hover { background: linear-gradient(135deg, #22303f 0%, #52708e 100%); }
.btn-line { background: linear-gradient(135deg, var(--s1) 0%, var(--s2) 55%, var(--s3) 100%); color: var(--ink); border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 6px 18px rgba(125,138,153,.25), inset 0 1px 0 #fff; }
.btn-line:hover { background: linear-gradient(135deg, #fff 0%, #eef1f4 55%, #c3ccd6 100%); color: var(--ink); }

/* frosted glass cards */
.ledger, .sister, .post, .faq details, .contact-side dl, .form {
  background: rgba(255,255,255,.62); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.85); border-radius: 22px; box-shadow: 0 10px 30px rgba(95,125,156,.14); }
.ledger { overflow: hidden; }
.ledger-head { background: linear-gradient(135deg, #2b3a4c 0%, var(--steel) 100%); }
.posts { gap: 22px; border-top: 0; }
.post, .post + .post { padding: 22px; border-left: 1px solid rgba(255,255,255,.85); }
.faq { border-top: 0; display: grid; gap: 12px; }
.faq details { padding: 4px 22px; }
.contact-side dl, .form { padding: 24px; }
.ph { border-radius: 18px; }

/* service rows become glass cards */
.svc-list { border-top: 0; display: grid; gap: 16px; }
.svc { padding: 28px; border: 1px solid rgba(255,255,255,.85); border-radius: 22px;
  background: rgba(255,255,255,.62); backdrop-filter: blur(14px); box-shadow: 0 10px 30px rgba(95,125,156,.14); }

/* silver section backgrounds */
.alt, .tint, .bg-card, .mosaic-sec { background: linear-gradient(160deg, #fbfcfd 0%, #eef1f4 55%, #dde5ee 100%) !important; border-color: transparent !important; }

/* thin silver→steel line under section headings */
.section-head h2::after, .page-head h1::after { content: ""; display: block; width: 64px; height: 3px; margin-top: 16px; border-radius: 3px;
  background: linear-gradient(90deg, var(--s3), var(--steel)); }

/* facts band: navy → steel */
.facts-band { background: linear-gradient(120deg, #16233b 0%, #2b3a4c 45%, #5f7d9c 100%); }
.facts-band .fact { border-color: rgba(255,255,255,.14) !important; }
.facts-band .fact b { color: #ffffff; }
.facts-band .fact span { color: #d5dde6; }

/* page heads: light silver ribbons instead of solid navy */
.page-head { background:
    linear-gradient(90deg, rgba(251,252,253,.97) 0%, rgba(251,252,253,.85) 45%, rgba(251,252,253,.1) 80%),
    url("../assets/silver-ribbons.svg") center right / cover no-repeat; color: var(--ink); border-bottom: 3px solid #cf2034; }
.page-head::after { display: none; }
.page-head .lede { color: var(--ink-soft); }
.page-head .lede a { color: #cf2034; }
.page-head .eyebrow { color: #cf2034; }
.page-head .btn-primary { background: linear-gradient(135deg, #2b3a4c 0%, var(--steel) 100%); color: #fff; }

/* dark portal section: deeper steel, keep contrast */
.dark { background: linear-gradient(140deg, #16233b 0%, #22344d 60%, #3a5674 100%); }

/* header: frosted */
.site-header { background: rgba(251,252,253,.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

/* --- overrides for the palette-B navy-hero rules (they use !important) --- */
.hero { background-color: #fbfcfd !important; color: var(--ink) !important; }
.hero h1 { color: var(--ink) !important; }
.hero .lede { color: var(--ink-soft) !important; }
.hero .eyebrow { color: #cf2034 !important; }
.hero-photo { border-color: rgba(255,255,255,.9) !important; --ph-a: #eef1f4; --ph-b: #e3e7ec; --ph-ink: #6a7486; }
.btn-primary, :root .btn-primary { background: linear-gradient(135deg, #2b3a4c 0%, var(--steel) 100%) !important; color: #fff !important; }
.btn-primary:hover { background: linear-gradient(135deg, #22303f 0%, #52708e 100%) !important; }
.hero .btn-line, .btn-line { background: linear-gradient(135deg, #fff 0%, #e3e7ec 55%, #aeb8c4 100%) !important; color: var(--ink) !important; border: 1px solid rgba(255,255,255,.9) !important; }
.btn-red { background: linear-gradient(135deg, #2b3a4c 0%, var(--steel) 100%); }
.dark .btn-red { background: #cf2034; }
.cta .btn-primary { background: #fff !important; color: #8f1424 !important; }
.cta .btn-line { background: transparent !important; color: #fff !important; border: 1px solid rgba(255,255,255,.8) !important; box-shadow: none; }
.facts-band { background: linear-gradient(120deg, #16233b 0%, #2b3a4c 45%, #5f7d9c 100%) !important; color: #fff; border-bottom: 0; }
.facts-band .fact b { color: #ffffff !important; }
.facts-band .fact span { color: #d5dde6 !important; }
.facts-band .fact { border-color: rgba(255,255,255,.14) !important; }
.sister { background: rgba(255,255,255,.62) !important; border-color: rgba(255,255,255,.85) !important; border-radius: 22px; }
.creds { background: rgba(255,255,255,.7); }
.site-header .btn-primary { background: #cf2034 !important; }

/* hero: one phrase per line, photo pushed right (14 Oct 2026) */
@media (min-width: 901px) {
  .hero-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; }
  .hero h1 { font-size: clamp(2.3rem, 4vw, 3.5rem); }
  .hero h1 .l { display: block; white-space: nowrap; width: max-content; }
  .hero .lede { max-width: 560px; }
  .hero-visual { transform: translateX(56px); }
}

/* client meeting tile: keep Maher (right side) in frame on all sizes */
.mosaic .m-b img { object-position: 68% 35%; }

/* service cards: icon badges instead of account codes */
.svc-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; padding: 0; background: #16233b; color: #ffffff; }
.svc-icon svg { width: 22px !important; height: 22px !important; flex: none; }