/* ==========================================================================
   JanusKS theme for Bootstrap 5.3. Everything here restyles standard Bootstrap
   classes and elements, so replacing this one file changes the theme: the pages
   use Bootstrap markup and keep working. Colour, type and motion tokens (--jks-*)
   are in diagrams.css, so the diagrams stay self-contained.

   Design idea: Janus looks both ways. Observed history in JanusKS blue on one
   side of NOW, projected scenarios in JanusKS orange on the other. Surfaces are
   separated by tone, not lines, and corners are square.

   The only custom pieces left here are the mega menu and the scroll entrances.
   ========================================================================== */

:root {
  --bs-primary: #005581;
  --bs-primary-rgb: 0, 85, 129;
  --bs-secondary: #0C2C40;
  --bs-secondary-rgb: 12, 44, 64;
  --bs-warning: #F47B20;
  --bs-warning-rgb: 244, 123, 32;
  --bs-dark: #071E2C;
  --bs-dark-rgb: 7, 30, 44;
  --bs-primary-bg-subtle: #E1EEF5;
  --bs-primary-text-emphasis: #00466A;
  --bs-warning-text-emphasis: #A64C09;
  --bs-font-sans-serif: var(--jks-font-body);
  --bs-font-monospace: var(--jks-font-mono);
  --bs-body-font-family: var(--jks-font-body);
  --bs-body-font-size: 1.0625rem;
  --bs-body-line-height: 1.6;
  --bs-body-color: #071E2C;
  --bs-body-color-rgb: 7, 30, 44;
  --bs-body-bg: #F4F7F9;
  --bs-body-bg-rgb: 244, 247, 249;
  --bs-emphasis-color: #071E2C;
  --bs-emphasis-color-rgb: 7, 30, 44;
  --bs-secondary-color: #45596A;
  --bs-tertiary-bg: #E6EEF3;
  --bs-tertiary-bg-rgb: 230, 238, 243;
  --bs-link-color: #005581;
  --bs-link-color-rgb: 0, 85, 129;
  --bs-link-hover-color: #00466A;
  --bs-link-hover-color-rgb: 0, 70, 106;
  --bs-border-color: #D6E0E7;
  --bs-border-radius: .25rem;
  color-scheme: light;
}
/* Dark bands: any element with data-bs-theme="dark" */
[data-bs-theme="dark"] {
  --bs-body-color: #E9F0F5;
  --bs-body-color-rgb: 233, 240, 245;
  --bs-body-bg: #071E2C;
  --bs-body-bg-rgb: 7, 30, 44;
  --bs-tertiary-bg: #0C2C40;
  --bs-tertiary-bg-rgb: 12, 44, 64;
  --bs-secondary-color: #A9BFCE;
  --bs-emphasis-color: #fff;
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-heading-color: #fff;
  --bs-warning-text-emphasis: #F7A35F;
  --bs-link-color: #8FC0DF;
  --bs-link-color-rgb: 143, 192, 223;
  --bs-link-hover-color: #B7D8EC;
  --bs-link-hover-color-rgb: 183, 216, 236;
  --bs-primary-bg-subtle: #164461;
  --bs-primary-text-emphasis: #C6E0F0;
  --bs-border-color: #2A5570;
  color-scheme: dark;
}
/* The whole page in dark mode. The script in header.php sets data-bs-theme on <html> from the system setting. */
html[data-bs-theme="dark"] {
  --bs-body-bg: #0A2536;
  --bs-body-bg-rgb: 10, 37, 54;
  --bs-tertiary-bg: #0E3046;
  --bs-tertiary-bg-rgb: 14, 48, 70;
}
[data-bs-theme="dark"] .text-primary { color: var(--bs-link-color) !important; }

/* ---------- Type ---------- */
body { -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--jks-font-display); font-weight: 600; letter-spacing: -0.02em; text-wrap: balance;
}
h1 { font-size: var(--jks-size-display); line-height: 1.02; letter-spacing: -0.035em; }
h2 { font-size: var(--jks-size-h2); line-height: 1.08; letter-spacing: -0.03em; }
h3 { font-size: var(--jks-size-h3); line-height: 1.2; }
.h5 { font-size: 1.25rem; }
.h6 { font-size: var(--jks-size-small); letter-spacing: 0; }
p { max-width: 65ch; }
.lead { font-size: var(--jks-size-lead); font-weight: 400; line-height: 1.45; }
[data-bs-theme="dark"] .lead { color: var(--bs-secondary-color); }
[data-bs-theme="dark"] .lead strong { color: #fff; font-weight: 600; }
.text-bg-primary .lead { color: #D5E6F0; }
.small { font-size: var(--jks-size-small); }
.display-4, .display-5 { font-weight: 600; letter-spacing: -0.035em; }
.display-4 { font-size: clamp(2.25rem, 4.6vw, 4rem); line-height: 1.02; }
.display-5 { font-size: clamp(2rem, 3.6vw, 3.25rem); line-height: 1.06; }
:focus-visible { outline: 2px solid var(--jks-orange); outline-offset: 3px; }
.nav-link:focus-visible { outline: 2px solid var(--jks-orange); outline-offset: 3px; box-shadow: none; }
[id] { scroll-margin-top: 7rem; }

/* Chinese, Japanese and Korean: no tight heading spacing, and more room between lines */
:root:lang(ja), :root:lang(ko), :root:lang(zh) { --bs-body-line-height: 1.8; }
:lang(ja) :is(h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5, .h6, .display-4, .display-5),
:lang(ko) :is(h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5, .h6, .display-4, .display-5),
:lang(zh) :is(h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5, .h6, .display-4, .display-5) { letter-spacing: 0; line-height: 1.35; }
:lang(ja), :lang(zh) { line-break: strict; }
:lang(ko) { word-break: keep-all; }

/* Logos over a 1600 x 900 photo. Sizes are percentages so they scale with it. The widths give "DIMENSION" and "DNEG" the same letter height. */
.jks-photo-logos img + img { top: 10%; left: 6%; width: 51.25%; height: auto; }
.jks-photo-logos img + img + img { left: auto; right: 6%; width: 22%; }
.jks-photo-fill { min-height: 14rem; } /* Grows to fill its card; the photo crops at the sides */

/* Screenshot placed over the screen of the laptop drawing, as percentages of the drawing */
.jks-laptop img { filter: drop-shadow(0 .4rem .4rem rgba(0, 0, 0, .35)); }
.jks-laptop img + img { top: 6.6%; left: 11.7%; width: 76.6%; height: 82.7%; object-fit: cover; filter: none; }

/* ---------- Layout ---------- */
.container {
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 992px) {
  .container { padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); }
}
/* The largest spacing step is generous and scales with the screen */
.py-5 { padding-block: clamp(5rem, 11vw, 10rem) !important; }
section > .container.py-5 { padding-block: clamp(3rem, 6vw, 5.5rem) !important; }
/* Inner page heroes: the space sits above the fine line and its row, not below them */
section > .container.py-5 > .border-top:last-child { margin-top: clamp(3rem, 6vw, 5.5rem) !important; }
section > .container.py-5:has(> .border-top:last-child) { padding-bottom: 2.5rem !important; }
.text-bg-primary > .container.py-5 { padding-block: clamp(4rem, 7vw, 6.5rem) !important; }
.mb-5 { margin-bottom: clamp(2.5rem, 5vw, 4.5rem) !important; }

/* Long-form page columns */
article { min-width: 0; }
/* Text fills its column; the 65-character limit only applies to text with no column around it */
article p, .card p, .alert p, [class*="col-"] > p, p[class*="col-"] { max-width: none; }
article h2 { margin-top: clamp(4rem, 7vw, 6rem); margin-bottom: 1.25rem; font-size: clamp(1.75rem, 2.8vw, 2.5rem); }
article h2:first-child { margin-top: 0; }
article > section + section { margin-top: clamp(4rem, 7vw, 6rem); }

/* ---------- Buttons: square-cornered, flat ---------- */
.btn {
  --bs-btn-font-family: var(--jks-font-display); --bs-btn-font-weight: 600; --bs-btn-border-radius: 0;
  --bs-btn-padding-x: 1.4rem; --bs-btn-padding-y: .85rem;
  transition: background-color .2s var(--jks-ease), color .2s var(--jks-ease), transform .15s var(--jks-ease);
}
.btn:active { transform: translateY(1px) scale(.98); }
.btn-primary {
  --bs-btn-color: #fff; --bs-btn-bg: var(--jks-blue); --bs-btn-border-color: var(--jks-blue);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--jks-blue-dark); --bs-btn-hover-border-color: var(--jks-blue-dark);
  --bs-btn-active-bg: #003A58; --bs-btn-active-border-color: #003A58; --bs-btn-active-color: #fff;
}
.text-bg-primary .btn-primary {
  --bs-btn-bg: var(--jks-blue-dark); --bs-btn-border-color: var(--jks-blue-dark);
  --bs-btn-hover-bg: #003A58; --bs-btn-hover-border-color: #003A58;
}
.btn-warning {
  --bs-btn-color: var(--jks-ink); --bs-btn-bg: var(--jks-orange); --bs-btn-border-color: var(--jks-orange);
  --bs-btn-hover-color: var(--jks-ink); --bs-btn-hover-bg: #F68C3B; --bs-btn-hover-border-color: #F68C3B;
  --bs-btn-active-bg: #DB6A14; --bs-btn-active-border-color: #DB6A14; --bs-btn-active-color: var(--jks-ink);
}
.btn-secondary {
  --bs-btn-color: var(--jks-on-dark); --bs-btn-bg: var(--jks-ink-2); --bs-btn-border-color: var(--jks-ink-2);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--jks-ink-3); --bs-btn-hover-border-color: var(--jks-ink-3);
  --bs-btn-active-bg: var(--jks-ink-3); --bs-btn-active-color: #fff; --bs-btn-active-border-color: var(--jks-ink-3);
}
.bg-body-tertiary .btn-secondary {
  --bs-btn-bg: var(--jks-ink-3); --bs-btn-border-color: var(--jks-ink-3);
  --bs-btn-hover-bg: #1A4A68; --bs-btn-hover-border-color: #1A4A68;
}
.btn-outline-light {
  --bs-btn-color: var(--jks-on-dark); --bs-btn-bg: transparent; --bs-btn-border-color: var(--jks-ink-3);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--jks-ink-2); --bs-btn-hover-border-color: var(--jks-ink-3);
  --bs-btn-active-bg: var(--jks-ink-2); --bs-btn-active-color: #fff; --bs-btn-active-border-color: var(--jks-ink-3);
  --bs-btn-border-width: 2px;
}
.btn-light {
  --bs-btn-color: var(--jks-blue); --bs-btn-bg: #fff; --bs-btn-border-color: #fff;
  --bs-btn-hover-color: var(--jks-ink); --bs-btn-hover-bg: var(--jks-blue-soft); --bs-btn-hover-border-color: var(--jks-blue-soft);
  --bs-btn-active-bg: var(--jks-blue-soft); --bs-btn-active-color: var(--jks-ink); --bs-btn-active-border-color: var(--jks-blue-soft);
}
/* Links with a chevron: Bootstrap's icon-link, with a chevron instead of an SVG icon */
.icon-link { display: inline; font-family: var(--jks-font-display); font-weight: 600; }
.icon-link::after {
  content: "\203A"; display: inline-block; margin-left: .4em; font-size: 1.2em; line-height: 0;
  transition: transform .2s var(--jks-ease);
}
a:hover .icon-link::after { transform: translateX(3px); }

/* ---------- Header and menus ---------- */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 1040; background: var(--jks-surface); }
header.sticky-top { top: env(safe-area-inset-top, 0px); z-index: 1030; background: var(--jks-surface); }
.navbar { --bs-navbar-padding-y: .75rem; --bs-navbar-nav-link-padding-x: .85rem; }
.navbar-brand { padding: 0; margin: 0; flex: none; }
.navbar-brand img { height: 44px; width: auto; display: block; }
@media (min-width: 992px) and (max-width: 1199.98px) {
  .navbar { --bs-navbar-nav-link-padding-x: .55rem; }
}
@media (min-width: 1200px) {
  .navbar-brand img { height: 48px; }
}
.navbar .nav-link { font-family: var(--jks-font-display); font-weight: 500; font-size: .875rem; color: var(--jks-text); }
.navbar .nav-link:hover, .navbar .nav-link:focus, .navbar .nav-link.show, .navbar .nav-link.active { color: var(--jks-accent); }
.navbar .nav-link.active { font-weight: 700; }
/* A down chevron in place of Bootstrap's triangle; it flips while the menu is open */
.navbar .dropdown-toggle::after {
  width: .46em; height: .46em; margin-left: .45em; vertical-align: .16em;
  border: 0; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg); transition: transform .2s var(--jks-ease);
}
.navbar .dropdown-toggle.show::after { transform: translateY(.14em) rotate(-135deg); }
.navbar-toggler { border: 0; background: var(--jks-ground); border-radius: 0; padding: .55rem .7rem; }
.navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23071E2C' stroke-linecap='round' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }
[data-bs-theme="dark"] .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23E9F0F5' stroke-linecap='round' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }
.dropdown-menu { --bs-dropdown-border-radius: 0; --bs-dropdown-border-width: 0; }
[data-bs-theme="dark"] .dropdown-menu { --bs-dropdown-bg: var(--jks-ink-3); --bs-dropdown-link-hover-bg: var(--jks-ink); --bs-dropdown-link-active-bg: var(--jks-blue); }
.navbar .dropdown-menu {
  --bs-dropdown-bg: var(--jks-surface); --bs-dropdown-link-color: var(--jks-text); --bs-dropdown-link-hover-color: var(--jks-accent);
  --bs-dropdown-link-hover-bg: var(--jks-surface-hover-tinted); --bs-dropdown-link-active-bg: var(--jks-blue);
  --bs-dropdown-spacer: .75rem;
  padding: 1.25rem; box-shadow: 0 24px 48px -24px rgba(7, 30, 44, .45);
}
.navbar .dropdown-item { font-size: var(--jks-size-small); padding: .5rem .75rem; }
/* Mega menu: Bootstrap has no multi-column menu, so this lays out a standard dropdown-menu */
.jks-mega { min-width: min(580px, 92vw); }
.jks-mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem 1rem; }
.jks-mega-intro { font-size: var(--jks-size-small); color: var(--jks-text-mute); padding: 0 .75rem 1rem; margin: 0; }
.jks-mega .dropdown-item { padding: .6rem .75rem; white-space: normal; }
.jks-mega .dropdown-item strong { display: block; font-family: var(--jks-font-display); font-weight: 600; font-size: 1rem; }
.jks-mega .dropdown-item span { display: block; font-size: var(--jks-size-small); color: var(--jks-text-mute); line-height: 1.35; }
.jks-mega .dropdown-item:active span { color: #fff; }
@media (max-width: 991.98px) {
  .navbar-collapse { padding-block: 1rem; }
  .navbar .dropdown-menu { --bs-dropdown-spacer: 0; box-shadow: none; background: var(--jks-ground); }
  .jks-mega { min-width: 0; }
  .jks-mega-grid { grid-template-columns: 1fr; }
}
/* Breadcrumbs sit on dark page headers */
.breadcrumb { --bs-breadcrumb-font-size: var(--jks-size-small); --bs-breadcrumb-item-active-color: var(--bs-body-color); }
.breadcrumb a { color: var(--bs-secondary-color); text-decoration: none; }
.breadcrumb a:hover { color: #fff; }
/* Side menu */
aside .sticky-top { top: calc(env(safe-area-inset-top, 0px) + 6rem); z-index: 1; }
aside .nav {
  --bs-nav-link-padding-x: 1rem; --bs-nav-link-padding-y: .5rem; --bs-nav-link-font-size: var(--jks-size-small);
  --bs-nav-link-color: var(--jks-text-mute); --bs-nav-link-hover-color: var(--jks-text);
}
aside .nav-link { box-shadow: inset 3px 0 0 var(--bs-tertiary-bg); transition: color .2s, box-shadow .2s; }
aside .nav-link:hover { box-shadow: inset 3px 0 0 var(--jks-surface-hover); }
aside .nav-link.active { color: var(--jks-text); font-weight: 600; box-shadow: inset 3px 0 0 var(--jks-accent); }

/* ---------- Cards, lists, callouts, badges ---------- */
.card {
  --bs-card-bg: var(--jks-surface); --bs-card-border-width: 0; --bs-card-border-radius: 0; --bs-card-inner-border-radius: 0;
  --bs-card-spacer-y: 1.5rem; --bs-card-spacer-x: 1.6rem; --bs-card-title-spacer-y: .5rem;
  transition: background-color .2s var(--jks-ease);
}
a.card:hover { --bs-card-bg: var(--jks-surface-hover); color: var(--bs-body-color); }
.bg-body-tertiary a.card:hover { --bs-card-bg: var(--jks-surface-hover-tinted); }
.card .card-text { margin-bottom: 0; }
.text-bg-primary p { color: #D5E6F0; }
a.card.text-bg-primary:hover { background-color: var(--jks-blue-dark) !important; color: #fff !important; }
.list-group {
  --bs-list-group-bg: var(--jks-surface); --bs-list-group-color: var(--jks-text); --bs-list-group-border-width: 0; --bs-list-group-border-radius: 0;
  --bs-list-group-item-padding-x: 1.5rem; --bs-list-group-item-padding-y: 1.25rem;
  gap: 2px;
}
.list-group .h5, a.card .h5, dt.h5 { font-size: 1.1875rem; }
.alert { --bs-alert-padding-x: 1.75rem; --bs-alert-padding-y: 1.6rem; --bs-alert-margin-bottom: 2rem; --bs-alert-border-radius: 0; --bs-alert-border-color: transparent; margin-top: 2rem; }
.alert-primary { --bs-alert-color: var(--jks-text); }
.alert-primary strong { color: var(--jks-accent); }
.badge { --bs-badge-font-size: .8125rem; --bs-badge-font-weight: 600; --bs-badge-padding-x: .55rem; --bs-badge-padding-y: .3rem; --bs-badge-border-radius: 0; line-height: 1.4; white-space: normal; text-align: left; }
.blockquote p { font-family: var(--jks-font-display); font-weight: 500; font-size: var(--jks-size-lead); line-height: 1.45; margin: 0; }
.blockquote p::before { content: "\201C"; color: var(--jks-accent); }
.blockquote p::after { content: "\201D"; color: var(--jks-accent); }
.blockquote + figcaption strong { color: var(--jks-accent); font-weight: 600; }
a.link-body-emphasis h3 { transition: color .2s; }
a.link-body-emphasis:hover h3 { color: var(--jks-accent); }

.form-control { border-radius: 0; }
.list-group-numbered > .list-group-item { display: flex; }
.list-group-numbered > .list-group-item::before { font-family: var(--jks-font-display); font-weight: 600; color: var(--jks-accent); margin-right: .5rem; }
.toast { --bs-toast-border-radius: 0; --bs-toast-border-width: 0; --bs-toast-max-width: 24rem; --bs-toast-bg: var(--jks-surface); --bs-toast-color: var(--jks-text); --bs-toast-font-size: var(--jks-size-small); --bs-toast-padding-x: 1.25rem; --bs-toast-padding-y: 1.25rem; box-shadow: 0 24px 48px -24px rgba(7, 30, 44, .45); }

/* Tabs: on dark bands the active tab joins the panel below it */
.nav-tabs { --bs-nav-tabs-border-radius: 0; --bs-nav-link-font-size: var(--jks-size-small); --bs-nav-link-font-weight: 500; }
.nav-tabs .nav-link { font-family: var(--jks-font-display); }
[data-bs-theme="dark"] .nav-tabs {
  --bs-nav-tabs-border-color: transparent; --bs-nav-tabs-border-width: 0;
  --bs-nav-link-color: var(--jks-on-dark); --bs-nav-link-hover-color: #fff; --bs-nav-tabs-link-hover-border-color: transparent;
  --bs-nav-tabs-link-active-color: #fff; --bs-nav-tabs-link-active-bg: var(--jks-graph-future);
  --bs-nav-tabs-link-active-border-color: transparent;
}
[data-bs-theme="dark"] .nav-tabs .nav-link.active { box-shadow: inset 0 3px 0 var(--jks-orange); }
@media (max-width: 575.98px) {
  .nav-tabs { --bs-nav-link-padding-x: .6rem; --bs-nav-link-font-size: .8125rem; flex-wrap: nowrap; }
  .nav-tabs .nav-link { white-space: nowrap; }
}

/* ---------- Tables ---------- */
.table { --bs-table-bg: var(--jks-surface); --bs-table-color: var(--jks-text); --bs-table-border-color: var(--jks-ground); margin: 0; font-size: var(--jks-size-small); }
.table > :not(caption) > * > * { padding: 1.1rem; border-bottom-width: 2px; vertical-align: top; }
.table thead th { background: var(--jks-ground); font-family: var(--jks-font-display); font-weight: 600; font-size: .9375rem; color: var(--jks-text); box-shadow: inset 0 -3px 0 var(--jks-accent); border-bottom: 0; padding-block: .8rem; }
.table thead th.text-bg-primary { box-shadow: inset 0 -3px 0 var(--jks-orange); }
.table tbody th { font-family: var(--jks-font-display); font-weight: 600; font-size: 1.0625rem; line-height: 1.3; width: 27%; }
.table:has(thead th:nth-child(4)) tbody th { width: 21%; }
.table-primary { --bs-table-bg: var(--jks-surface-hover); --bs-table-color: var(--jks-text); --bs-table-border-color: var(--jks-ground); }
/* Phones: each row becomes a card, with the column name from data-label */
@media (max-width: 767.98px) {
  .table thead { display: none; }
  .table, .table tbody, .table tr, .table th, .table td { display: block; width: 100%; }
  .table tbody tr { margin-bottom: .75rem; background: var(--jks-surface); }
  .table > :not(caption) > * > * { border-bottom: 0; padding: .35rem 1.1rem; }
  .table tbody th { width: 100% !important; padding-top: 1.1rem; }
  .table tbody td:last-child { padding-bottom: 1.1rem; }
  .table td::before { content: attr(data-label); display: block; font-size: .8125rem; font-weight: 400; color: var(--jks-text-mute); margin: .35rem 0; }
}

/* ---------- Footer ---------- */
footer a { color: var(--bs-body-color); text-decoration: none; transition: color .2s; }
footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
footer a.btn:hover { text-decoration: none; }
footer .btn-link { --bs-btn-font-family: var(--jks-font-body); --bs-btn-font-weight: 400; --bs-btn-font-size: var(--jks-size-small); --bs-btn-color: var(--bs-body-color); --bs-btn-hover-color: #fff; text-decoration: none; }
footer .btn-link:hover { text-decoration: underline; text-underline-offset: 3px; }
footer .pt-5 { padding-top: clamp(4rem, 7vw, 6rem) !important; }
/* Wide screens: the logo's lettering sits on the first heading's baseline, and the text below starts level with the first links */
@media (min-width: 1200px) {
  footer .col-xl-3 > a { height: 74px; margin-top: -22px; }
}

/* Home hero: moving web behind the text; drawn by main.js, softer on the left where the text sits */
.jks-hero-web { position: absolute; inset: 0; width: 100%; height: 100%; -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.25), #000 70%); mask-image: linear-gradient(90deg, rgba(0,0,0,.25), #000 70%); }

/* Fades the web out gradually behind the row at the bottom of the hero */
.jks-hero-fade { position: absolute; inset: auto 0 0; height: 60%; pointer-events: none; background: linear-gradient(to bottom, rgba(7, 30, 44, 0) 0%, rgba(7, 30, 44, .18) 25%, rgba(7, 30, 44, .5) 50%, rgba(7, 30, 44, .82) 72%, rgba(7, 30, 44, .96) 100%); }

/* ---------- Scroll entrances: no Bootstrap equivalent; pages show normally without them ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.jks-anim [data-reveal] > * { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--jks-ease), transform .7s var(--jks-ease); }
  html.jks-anim [data-reveal] > :nth-child(2) { transition-delay: .08s; }
  html.jks-anim [data-reveal] > :nth-child(3) { transition-delay: .16s; }
  html.jks-anim [data-reveal] > :nth-child(4) { transition-delay: .24s; }
  html.jks-anim [data-reveal] > :nth-child(n+5) { transition-delay: .32s; }
  html.jks-anim [data-reveal].is-in > * { opacity: 1; transform: none; }
  /* Jump links: allow for the 24px the content slides up after the page has scrolled to it */
  html.jks-anim [data-reveal]:not(.is-in) [id] { scroll-margin-top: calc(7rem + 24px); }
}