*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--white);
  background: var(--night);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg, video, picture { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
address { font-style: normal; }
main:focus { outline: none; }
[lang="en"] { font-family: var(--font-latin); }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; inset-inline-start: 12px; top: 12px; z-index: 200;
  padding: 10px 16px; border-radius: 999px; background: var(--white); color: var(--ink);
  transform: translateY(-160%); transition: transform .2s var(--ease-out);
}
.skip-link:focus { transform: none; }
:focus-visible { outline: 2px solid var(--wire); outline-offset: 3px; }

/* direction-aware arrow: drawn pointing right, mirrored in RTL */
.arrow { width: 1.1em; height: 1.1em; flex: none; }
[dir="rtl"] .arrow { transform: scaleX(-1); }

/* the mark: colour from currentColor */
.mark { overflow: visible; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 48px; padding: 0 24px; border-radius: 12px; border: 0;
  font-weight: 650; font-size: 15px; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .25s, color .25s, transform .25s var(--ease-out), box-shadow .25s, border-color .25s;
}
.btn--sm { min-height: 40px; padding: 0 16px; font-size: 14px; border-radius: 10px; }
.btn--green { background: var(--green-fill); color: var(--white); box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), 0 10px 30px -12px rgb(14 156 89 / .8); }
.btn--green:hover { background: var(--green-fill-hi); transform: translateY(-1px); }
.btn--ghost { background: rgb(255 255 255 / .06); color: var(--white); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .22); backdrop-filter: blur(8px); }
.btn--ghost:hover { background: rgb(255 255 255 / .12); }

/* tags (news kinds) */
.tag {
  display: inline-flex; align-items: center; gap: .4em; height: 1.9em; padding: 0 .75em; border-radius: 999px;
  font-size: .78em; font-weight: 700; line-height: 1; white-space: nowrap;
  background: rgb(91 230 198 / .12); color: var(--wire); box-shadow: inset 0 0 0 1px rgb(91 230 198 / .3);
}
.tag::before { content: ""; width: .45em; height: .45em; border-radius: 50%; background: currentColor; }
.tag--tender { background: rgb(255 179 71 / .14); color: var(--amber); box-shadow: inset 0 0 0 1px rgb(255 179 71 / .35); }
.tag--certificate { background: rgb(23 184 108 / .14); color: #4FD99A; box-shadow: inset 0 0 0 1px rgb(23 184 108 / .35); }
.tag--project { background: rgb(120 168 255 / .14); color: #9DBEFF; box-shadow: inset 0 0 0 1px rgb(120 168 255 / .35); }
.tag--contract { background: rgb(186 150 255 / .14); color: #C7AEFF; box-shadow: inset 0 0 0 1px rgb(186 150 255 / .35); }


/* ==========================================================================
   The light quality level: html[data-tier="lite"], a weak machine (partials/head.php decides, app.js may step down).
   The live blurs go (a blur behind glass is worked out again every frame that anything moves behind it); the glass
   gets a ground solid enough to stay readable. Decorative motion that never rests stands still. The sections' scripts
   lower their own costs (WebGL resolution, the hero's video).
   ========================================================================== */
html[data-tier="lite"] *, html[data-tier="lite"] *::before, html[data-tier="lite"] *::after, html[data-tier="lite"] ::backdrop {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html[data-tier="lite"] .hnav { background: rgb(12 18 25 / .9); }
html[data-tier="lite"] .hnav__rim { display: none; }   /* the light round the capsule: one more layer turning all the time */
html[data-tier="lite"] .epc { background: linear-gradient(180deg, rgb(58 68 76 / .97), rgb(24 32 40 / .97) 42%, rgb(10 15 20 / .98)); }
html[data-tier="lite"] .ncard { background: linear-gradient(160deg, rgb(44 54 62), rgb(18 25 32) 55%, rgb(22 30 37)); }
html[data-tier="lite"] .hero__cue, html[data-tier="lite"] .hero__pause, html[data-tier="lite"] .epc-steps { background: rgb(11 17 24 / .92); }
html[data-tier="lite"] .newspill { background: rgb(13 19 26 / .96); }
html[data-tier="lite"] .nws-cell { background: rgb(14 21 28 / .95); }
html[data-tier="lite"] .prj { --chip: rgb(14 21 28 / .95); --panel: rgb(10 16 22 / .97); }
html[data-tier="lite"] .prj.is-day { --chip: rgb(255 255 255 / .97); --panel: rgb(250 249 246 / .98); }
html[data-tier="lite"] .btn--ghost { background: rgb(28 36 44 / .92); }
html[data-tier="lite"] .cm::backdrop, html[data-tier="lite"] .bm::backdrop { background: rgb(3 6 8 / .9); }
html[data-tier="lite"] .nws-bg__item.is-on img { animation: none; transform: none; }   /* a full-screen picture slowly zooming */
html[data-tier="lite"] .blg__veil, html[data-tier="lite"] .blg__light { display: none; }   /* two drifting layers larger than the screen */
html[data-tier="lite"] .dn-card__name, html[data-tier="lite"] .menu__item, html[data-tier="lite"] .hero__title .hero__line { filter: none !important; }   /* blurs that change while moving */

/* a section screens away from what is shown is not drawn (app.js: data-far), nor one wholly covered (the news under
   the open map: projects.js, data-covered); each keeps its size and place */
[data-far], [data-far] *, [data-far] *::before, [data-far] *::after,
[data-covered], [data-covered] *, [data-covered] *::before, [data-covered] *::after { visibility: hidden !important; animation-play-state: paused !important; }

/* a row on a touch screen: a sideways swipe is the page's (app.js: data-swipe moves the page on), only up-and-down is the browser's */
[data-swipe] { touch-action: pan-y; }

/* ==========================================================================
   The display face (Kalameh) for the titles and the large figures, Dana for everything read (tokens.css). The titles
   that were set light (Estedad's thin weights) take Kalameh's regular, which is light by itself at these sizes; the
   bold ones its bold.
   ========================================================================== */
.hero__title, .nws-title__h, .prj__title, .dn-intro__n, .dn-intro__title, .dn-card__name, .fld__title, .fld-card__name,
.fld-info__name, .ab__title, .cm__title, .blg__title, .blg__name, .bm__title, .menu__t, .sf-act__say, .epc__title, .tui__title {
  font-family: var(--font-display);
}
.nws-title__h, .prj__title, .dn-intro__title, .dn-card__name, .fld__title, .fld-info__name, .ab__title, .cm__title,
.blg__title, .bm__title, .sf-act__say { font-weight: 400; }
.hero__title, .menu__t { font-weight: 700; }
.dn-intro__n { font-weight: 400; }