/* SEDULUS | painted light. The site's blue palette is kept; this layer only changes light and shadow:
   a warm white light from the upper left, deep navy and ink shade at the edges, a faint canvas grain,
   sculpted cards and a luminous headline. Words are ink, blue stays as a sparing accent. No brown. */
:root {
  --ink: #151a24; --ink-2: #2b313d; --text: #222833; --muted: #525a67; --line: #dfe3ea;
  --hair: #e3e6ec; --card: #fff;
  --light: 255, 252, 247;          /* the warm white of the light */
  --shade: 13, 24, 52;             /* navy ink for every shadow */
  --paint-lift: inset 1px 1px 0 rgba(255,255,255,.95), 0 1px 2px rgba(var(--shade), .06), 10px 16px 34px -16px rgba(var(--shade), .28);
  --paint-lift-hi: inset 1px 1px 0 #fff, 0 2px 4px rgba(var(--shade), .07), 16px 26px 48px -18px rgba(var(--shade), .34);
  --shadow-sm: var(--paint-lift); --shadow: var(--paint-lift-hi);
}

/* ---------- words in ink ---------- */
h1, h2, h3, .ms-node strong, .industry, .cred strong, .lang strong, .stat-num, .contact-item, .field label, .standards strong, .foot-h, .form-status.is-info { color: var(--ink); }
.hero-tag, .brand, .brand-tag, .nav a, .lang-menu summary, .nav-toggle, .hero-meta, .btn-outline, .btn-outline:hover { color: var(--ink); }
.nav a:hover, .nav a.is-active { color: var(--blue); }
.kicker { color: var(--ink-2); }
.kicker::before { background: linear-gradient(90deg, var(--blue), var(--cyan)); }
.hero-mark { color: rgba(21,26,36,.72); }
.footer-grid a { color: var(--ink-2); }
.tag, .chip { color: var(--ink-2); background: #f4f5f7; border-color: #e3e6eb; }
.topic-list li { border-color: #e3e6eb; color: var(--ink-2); }
.lang-code { color: var(--ink-2); background: #f4f5f7; border-color: #e3e6eb; }
.step-num { background: linear-gradient(145deg, #2c3446 0%, #141922 100%); box-shadow: inset 1px 1px 0 rgba(255,255,255,.18), 4px 6px 14px -4px rgba(var(--shade), .45); }
.independence { border-left-color: var(--ink-2); background: linear-gradient(90deg, rgba(255,255,255,.75), rgba(255,255,255,.35)); }
.field input, .field select, .field textarea { color: var(--ink); border-color: #d9dde4; }
.btn-outline { border-color: #d6dbe3; background: linear-gradient(150deg, #fff, #f6f7f9); box-shadow: var(--paint-lift); }
.btn-outline:hover { border-color: #b9c1ce; background: #fff; }
.btn-primary { box-shadow: inset 1px 1px 0 rgba(255,255,255,.35), 8px 12px 26px -8px rgba(47,91,234,.55); }
.nav .nav-cta { color: #fff; background: linear-gradient(145deg, #23345e, var(--navy)); box-shadow: inset 1px 1px 0 rgba(255,255,255,.18), 4px 6px 14px -6px rgba(var(--shade), .5); }
.nav .nav-cta:hover, .nav .nav-cta.is-active { color: #fff; background: var(--blue); }
.lang-menu ul { border-color: var(--hair); box-shadow: var(--paint-lift-hi); }

/* ---------- boxes: white, lit from the upper left, shadow falling down right ---------- */
.glass { background: linear-gradient(150deg, #ffffff 0%, #ffffff 52%, #f4f6f9 100%); border: 1px solid rgba(226,230,237,.95); box-shadow: var(--paint-lift); }
.card:hover { border-color: #d3d9e2; box-shadow: var(--paint-lift-hi); }
a.contact-item:hover { border-color: #c4cbd6; }
.site-header.is-scrolled { border-color: rgba(var(--shade), .08); box-shadow: 0 8px 26px -10px rgba(var(--shade), .22); }
.stat + .stat { border-left-color: var(--hair); }
.footer-bottom, .standards { border-color: rgba(var(--shade), .12); }

/* ---------- light and shade on every section ---------- */
.section-tint { background: linear-gradient(180deg, rgba(197,217,241,0) 0%, rgba(197,217,241,.6) 14%, rgba(197,217,241,.6) 86%, rgba(197,217,241,0) 100%); }
.section { isolation: isolate; }
.section::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 120px, #000 calc(100% - 120px), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 120px, #000 calc(100% - 120px), transparent 100%);
  background:
    radial-gradient(70% 85% at 0% 0%, rgba(var(--light), .62) 0%, rgba(var(--light), 0) 62%),
    radial-gradient(75% 90% at 100% 100%, rgba(var(--shade), .11) 0%, rgba(var(--shade), 0) 66%); }
.section-tint::before {
  background:
    radial-gradient(70% 85% at 0% 0%, rgba(var(--light), .7) 0%, rgba(var(--light), 0) 60%),
    radial-gradient(80% 95% at 100% 100%, rgba(var(--shade), .15) 0%, rgba(var(--shade), 0) 66%),
    linear-gradient(180deg, rgba(var(--shade), .03), rgba(var(--shade), 0) 18%, rgba(var(--shade), 0) 82%, rgba(var(--shade), .04)); }
/* the navy band is the deepest shadow of the page, with one shaft of light from the upper left */
.section-navy { background: radial-gradient(90% 120% at 100% 100%, #0b1530 0%, rgba(11,21,48,0) 70%), linear-gradient(160deg, #1a3263 0%, #15284f 48%, #0f1e3e 100%); }
.section-navy::before { -webkit-mask-image: none; mask-image: none;
  background:
    radial-gradient(55% 90% at 4% 0%, rgba(150,186,255,.30) 0%, rgba(120,160,240,.10) 38%, rgba(120,160,240,0) 64%),
    radial-gradient(40% 60% at 22% 18%, rgba(var(--light), .10) 0%, rgba(var(--light), 0) 70%),
    radial-gradient(120% 100% at 50% 50%, rgba(4,9,22,0) 55%, rgba(4,9,22,.42) 100%); }
.section-navy .kicker { color: #d6e1f3; }
.section-navy .kicker::before { background: linear-gradient(90deg, #8fb6ff, #7fe3f5); }
.section-navy h2 { color: #fff; text-shadow: 0 0 34px rgba(160,195,255,.35); }
.section-navy .independence { background: rgba(255,255,255,.06); border-left-color: rgba(255,255,255,.55); }
.section-navy .cred { background: linear-gradient(150deg, #fff 0%, #fff 55%, #eef2f8 100%); box-shadow: inset 1px 1px 0 #fff, 0 0 40px -10px rgba(150,186,255,.35), 14px 22px 44px -14px rgba(2,6,18,.6); }
.section-navy .cred .icon { background: #edf2fb; }

/* hero: the light falls on the headline */
.hero-copy::before { background: radial-gradient(closest-side, rgba(var(--light), .97), rgba(var(--light), .78) 52%, rgba(var(--light), 0)); }
.hero h1 { text-shadow: 0 0 1px rgba(255,255,255,.7), 0 0 26px rgba(255,255,255,.95), 0 0 64px rgba(var(--light), .85); }
.hero-lead { color: #3f4654; }
.stats { position: relative; overflow: hidden; background: linear-gradient(150deg, #ffffff 0%, #ffffff 45%, #f2f5f9 100%); box-shadow: inset 1px 1px 0 #fff, 0 2px 4px rgba(var(--shade), .06), 18px 30px 60px -24px rgba(var(--shade), .34); }
.stats::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(50% 140% at 8% 0%, rgba(var(--light), .9), rgba(var(--light), 0) 70%); }
.stat { position: relative; }
.stat-num { text-shadow: 0 0 22px rgba(255,255,255,1), 0 1px 0 #fff; }

/* footer sits in the shade */
.site-footer { background: radial-gradient(70% 120% at 0% 0%, rgba(var(--light), .45) 0%, rgba(var(--light), 0) 60%), radial-gradient(90% 140% at 100% 100%, rgba(var(--shade), .16) 0%, rgba(var(--shade), 0) 70%), #cfdff3; border-top-color: rgba(var(--shade), .1); }

/* ---------- the painting itself: a frame of shade at the edges, warm light from the upper left, canvas grain ---------- */
body::before, body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 120; }
body::before {
  background:
    radial-gradient(85% 70% at 0% 0%, rgba(var(--light), .20) 0%, rgba(var(--light), 0) 55%),
    radial-gradient(150% 115% at 38% 30%, rgba(var(--shade), 0) 54%, rgba(var(--shade), .08) 80%, rgba(var(--shade), .2) 100%); }
body::after { background: url("../img/canvas-grain.webp?v=6") repeat; background-size: 256px 256px; opacity: .5; }
@media (max-width: 640px) {
  body::before { background:
    radial-gradient(120% 60% at 0% 0%, rgba(var(--light), .18) 0%, rgba(var(--light), 0) 55%),
    radial-gradient(160% 110% at 40% 30%, rgba(var(--shade), 0) 62%, rgba(var(--shade), .1) 100%); }
  body::after { background-size: 200px 200px; opacity: .42; }
}
@media print { body::before, body::after { display: none; } }

/* =====================================================================================================
   PAINTED BLUES (round 5). The paint is real: passages from public domain master paintings, re-rendered in the
   SEDULUS blues by luminance (sedulus-diagrams/paint/masters.py). Navy band from the storm sky of Rembrandt's
   Landscape with a Stone Bridge (Rijksmuseum), turned so the light breaks from the upper left into deep midnight;
   the pale ground from the brushwork of a Constable cloud study, laid very thin. No warm tone survives the remap.
   ===================================================================================================== */
body { background:
    linear-gradient(180deg, rgba(240,245,252,.30) 0%, rgba(232,239,249,.22) 100%),
    url("../img/oil-pale.webp?v=6") 0 0 / 1540px 854px repeat, #e6eef9;
  background-attachment: scroll; }
body::after { opacity: .16; }
@media (max-width: 640px) { body { background-size: auto, 1078px 598px, auto; } body::after { opacity: .12; } }

/* the light blue bands: a cooler glaze over the same painted ground */
.section-tint { background: linear-gradient(180deg, rgba(186,208,238,0) 0%, rgba(186,208,238,.40) 12%, rgba(186,208,238,.40) 88%, rgba(186,208,238,0) 100%); }

/* the navy band: an oil painting in midnight blue, light from the upper left, its edges brushed, not cut */
.section-navy { background: #050c22 url("../img/oil-navy.webp?v=6") 0% 0% / cover no-repeat; color: #dbe5f5;
  -webkit-mask: url("../img/brush-edge-top.png?v=6") top center / 2400px 120px repeat-x, linear-gradient(#000, #000) center / 100% calc(100% - 236px) no-repeat, url("../img/brush-edge-bottom.png?v=6") bottom center / 2400px 120px repeat-x;
          mask: url("../img/brush-edge-top.png?v=6") top center / 2400px 120px repeat-x, linear-gradient(#000, #000) center / 100% calc(100% - 236px) no-repeat, url("../img/brush-edge-bottom.png?v=6") bottom center / 2400px 120px repeat-x;
  padding-top: calc(var(--sec-pad, 96px) + 40px); padding-bottom: calc(var(--sec-pad, 96px) + 40px); }
/* a thin glaze of shadow where the words sit, so the light keeps its drama and the text keeps its contrast */
.section-navy::before { -webkit-mask-image: none; mask-image: none;
  background: radial-gradient(30% 34% at 28% 64%, rgba(3,8,26,.34) 0%, rgba(3,8,26,.18) 60%, rgba(3,8,26,0) 100%), radial-gradient(60% 90% at 100% 100%, rgba(1,3,12,.35) 0%, rgba(1,3,12,0) 70%); }
.section-navy h2 { color: #fff; text-shadow: 0 0 30px rgba(170,200,255,.40), 0 2px 18px rgba(2,8,26,.70); }
.section-navy .cred-text .big, .section-navy p { text-shadow: 0 1px 12px rgba(2,8,26,.85), 0 0 3px rgba(2,8,26,.5); }
.section-navy .independence { background: rgba(4,12,34,.48); border-left-color: rgba(220,232,255,.7); color: #dfe8f7; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.section-navy .cred { box-shadow: inset 1px 1px 0 #fff, 0 0 46px -8px rgba(150,190,255,.40), 16px 26px 50px -14px rgba(1,4,14,.8); }
.section-navy .kicker { color: #fff; text-shadow: 0 0 2px rgba(2,8,26,.9), 0 1px 10px rgba(2,8,26,.95), 0 0 22px rgba(2,8,26,.6); }
.section-navy .kicker::before { box-shadow: 0 1px 6px rgba(2,8,26,.8); }
.section-navy .cred-text .big { text-shadow: 0 0 2px rgba(2,8,26,.8), 0 1px 14px rgba(2,8,26,.95); }
@media (max-width: 700px) {
  .section-navy { background-image: url("../img/oil-navy-m.webp?v=6"); background-position: 0% 0%;
    -webkit-mask-size: 1400px 84px, 100% calc(100% - 164px), 1400px 84px; mask-size: 1400px 84px, 100% calc(100% - 164px), 1400px 84px;
    padding-top: calc(var(--sec-pad, 64px) + 28px); padding-bottom: calc(var(--sec-pad, 64px) + 28px); }
  .section-navy::before { background: linear-gradient(180deg, rgba(3,8,26,0) 0%, rgba(3,8,26,.20) 16%, rgba(3,8,26,.34) 30%, rgba(3,8,26,.12) 52%, rgba(3,8,26,0) 70%); }
}

/* buttons: a stroke of blue paint with a brushed outline */
.btn-primary { background: #2448d4 url("../img/oil-btn.webp?v=6") 0 0 / 100% 100% no-repeat; border-radius: 0; box-shadow: none; text-shadow: 0 1px 6px rgba(6,18,70,.55);
  -webkit-mask: url("../img/brush-pill.png?v=6") center / 100% 100% no-repeat; mask: url("../img/brush-pill.png?v=6") center / 100% 100% no-repeat; }
.btn-primary:hover { box-shadow: none; filter: brightness(1.08) saturate(1.05); }
.nav .nav-cta { background: #0b1736 url("../img/oil-navy.webp?v=6") 30% 40% / 1100px auto no-repeat; border-radius: 0; box-shadow: none;
  -webkit-mask: url("../img/brush-pill.png?v=6") center / 100% 100% no-repeat; mask: url("../img/brush-pill.png?v=6") center / 100% 100% no-repeat; }
.nav .nav-cta:hover, .nav .nav-cta.is-active { background: #2448d4 url("../img/oil-btn.webp?v=6") 0 0 / 100% 100% no-repeat; }

/* footer: a deeper glaze of blue over the painted ground, sinking into shadow at the lower right, brushed top edge */
.site-footer { border-top: 0; padding-top: 84px;
  background: radial-gradient(70% 120% at 0% 0%, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 60%), radial-gradient(90% 140% at 100% 100%, rgba(13,24,52,.22) 0%, rgba(13,24,52,0) 70%),
    linear-gradient(rgba(170,198,236,.55), rgba(160,190,232,.62)), url("../img/oil-pale.webp?v=6") 0 0 / 1540px 854px repeat;
  -webkit-mask: url("../img/brush-edge-top.png?v=6") top center / 2400px 96px repeat-x, linear-gradient(#000, #000) bottom / 100% calc(100% - 92px) no-repeat;
          mask: url("../img/brush-edge-top.png?v=6") top center / 2400px 96px repeat-x, linear-gradient(#000, #000) bottom / 100% calc(100% - 92px) no-repeat; }