/* ==========================================================================
   RIIS-DATA – corporate design (public pages): white and light grey, grayscale architecture pictures,
   one deep red accent, a red wave under the hero, square buttons and light headings.
   Loaded after style.css; the admin and customer portal are not affected.
   ========================================================================== */
:root {
  --corp-grey: #f2f2f3;
  --corp-line: #e3e3e6;
  --corp-text: #3b3b40;
  --radius: .35rem;
}
body { color: var(--corp-text); }
h1, h2, h3, .display-5, .display-6 { color: #26262b; }
h1, .display-5 { font-weight: 600; letter-spacing: -.02em; }
h2, h3, .section-title { font-weight: 600; letter-spacing: -.015em; }
.lead { color: #55555c; }

/* Square-ish buttons with a chevron, like the design */
.btn { border-radius: 3px; font-weight: 500; letter-spacing: .01em; }
.btn-lg { padding: .8rem 1.6rem; }
.btn-brand { box-shadow: none; }
.btn-outline-ink { --bs-btn-border-color: #c9c9cf; }
.form-control, .form-select { border-radius: 4px; }

/* ---------- Top bar + main menu ---------- */
.topbar { background: #fff; border-bottom: 1px solid var(--corp-line); font-size: .78rem; position: relative; z-index: 1035; }
.topbar .dropdown-menu { z-index: 1040; font-size: .85rem; }
.topbar .container { min-height: 32px; }
.topbar a, .topbar .btn-link { color: #66666d; text-decoration: none; font-size: .78rem; }
.topbar a:hover, .topbar .btn-link:hover { color: var(--brand); }
.site-nav { background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--corp-line); padding-top: .55rem; padding-bottom: .55rem; }
.site-nav .nav-link { font-weight: 400; font-size: 1.02rem; color: #3b3b40; border-radius: 0; padding: .5rem .85rem !important; position: relative; }
.site-nav .nav-link.active, .site-nav .nav-link:hover { color: var(--brand); }
.site-nav .nav-link.active::after { content: ""; position: absolute; left: .85rem; right: .85rem; bottom: -.62rem; height: 3px; background: var(--brand); }
@media (max-width: 991.98px) { .site-nav .nav-link.active::after { display: none; } }
.site-search { position: relative; align-items: center; }
.site-search input { border: 1px solid var(--corp-line); background: var(--corp-grey); border-radius: 999px; height: 34px; width: 190px; padding: 0 2.4rem 0 .9rem; font-size: .85rem; transition: width .25s, background .2s; }
.site-search input:focus { outline: none; background: #fff; border-color: var(--brand); width: 230px; }
.site-search button { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; border: 0; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: .8rem; }
.site-search button:hover { background: var(--brand-600); }
#mainNav .site-search input { width: 100%; }

/* ---------- Hero: architecture picture, grayscale photo, red wave ---------- */
.hero-corp { position: relative; overflow: hidden; padding: 5.5rem 0 9.5rem; background: #f7f7f8; min-height: 540px; }
.hero-corp::before { display: none; }
.hc-bg { position: absolute; inset: 0; pointer-events: none; }
.hc-arch { position: absolute; inset: -20px; background: url(../img/arch-tunnel.svg) center / cover no-repeat;
  transform: translate3d(calc(var(--hx, 0) * -12px), calc(var(--hy, 0) * -7px), 0) scale(1.04); transition: transform 1.2s cubic-bezier(.2, .8, .2, 1); }
.hc-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(247, 247, 248, .97) 0%, rgba(247, 247, 248, .9) 30%, rgba(247, 247, 248, .6) 45%, rgba(247, 247, 248, .25) 60%, rgba(247, 247, 248, 0) 78%); }
.hc-photo { position: absolute; right: 0; top: 0; bottom: 0; width: 50%; z-index: 3;
  /* the photo is in FRONT of the arches and the 3D spheres: only its far left edge fades softly, the person is fully visible */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .3) 7%, rgba(0, 0, 0, .75) 16%, #000 26%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .3) 7%, rgba(0, 0, 0, .75) 16%, #000 26%); }
@media (min-width: 992px) and (max-width: 1199.98px) { .hc-photo { width: 44%; } }
.hc-photo picture { display: block; width: 100%; height: 100%; }
.hc-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 55% 15%; filter: grayscale(1) contrast(1.08) brightness(1.04); }
.hero-corp .container { z-index: 2; }
.hero-corp h1 { font-size: clamp(2.1rem, 4.2vw, 3.3rem); line-height: 1.12; font-weight: 600; }
.hero-corp .lead { font-size: 1.12rem; }
.hc-pdf { display: inline-flex; align-items: center; gap: .75rem; margin-top: 1.6rem; padding: .7rem 1rem .7rem .8rem; background: #fff; border: 1px solid var(--corp-line); border-left: 4px solid var(--brand);
  border-radius: 3px; color: #26262b; text-decoration: none; box-shadow: 0 10px 24px -16px rgba(0, 0, 0, .35); transition: transform .2s, box-shadow .2s; }
.hc-pdf:hover { transform: translateY(-2px); box-shadow: 0 16px 28px -16px rgba(0, 0, 0, .4); color: #26262b; }
.hc-pdf > i { font-size: 1.7rem; color: var(--brand); }
.hc-pdf span { display: flex; flex-direction: column; font-weight: 600; font-size: .95rem; line-height: 1.25; }
.hc-pdf small { font-weight: 400; color: var(--muted); font-size: .78rem; }
.hc-wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 120px; z-index: 4; }
@media (max-width: 991.98px) {
  .hero-corp { padding: 3.5rem 0 7rem; }
  .hero-corp { display: flex; flex-direction: column; }
  .hero-corp > .container { order: 1; }
  .hc-bg { position: static; order: 2; }
  .hc-photo { position: relative; width: auto; height: 380px; margin: 2rem 1rem 0; border-radius: 4px; -webkit-mask-image: linear-gradient(180deg, #000 75%, transparent); mask-image: linear-gradient(180deg, #000 75%, transparent); }
  .hc-bg::after { background: linear-gradient(180deg, rgba(247, 247, 248, .75), rgba(247, 247, 248, .95)); }
  .hc-wave { height: 70px; }
}

/* Info bar under the hero: latest news + contact */
.info-bar { background: #fff; border-bottom: 1px solid var(--corp-line); padding: .9rem 0; font-size: .9rem; position: relative; z-index: 3; box-shadow: 0 8px 18px -16px rgba(0, 0, 0, .3); }
.ib-news { color: #66666d; display: flex; flex-wrap: wrap; gap: .25rem .4rem; align-items: baseline; }
.ib-date { color: var(--brand); font-weight: 600; }
.ib-title { color: #3b3b40; text-decoration: none; max-width: 52ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-all { color: var(--brand); font-weight: 600; text-decoration: none; margin-left: .75rem; }
.ib-actions { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; }
.ib-actions a { color: var(--brand); text-decoration: none; display: inline-flex; align-items: center; gap: .5rem; font-weight: 500; }
.ib-ico { width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: .85rem; }
.ib-actions a:hover .ib-ico { background: var(--brand-600); }

/* "Our *services*" headings: dark word + red word */
.corp-title { font-weight: 400; font-size: clamp(1.7rem, 2.6vw, 2.2rem); }
.corp-title .text-brand { font-weight: 400; }

/* Picture tiles */
.svc-tile { position: relative; display: block; aspect-ratio: 16 / 10; background-size: cover; background-position: center; border-radius: 3px; overflow: hidden; color: #fff; text-decoration: none;
  box-shadow: 0 14px 30px -20px rgba(0, 0, 0, .55); isolation: isolate; }
.svc-tile::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .35)); z-index: -1; transition: background .3s; }
.svc-tile:hover { color: #fff; }
.svc-tile:hover::before { background: linear-gradient(180deg, rgba(200, 16, 46, .55), rgba(0, 0, 0, .1) 55%, rgba(0, 0, 0, .45)); }
.svc-tile.accent::before { background: linear-gradient(180deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .3)); }
.svc-name { position: absolute; left: 1.2rem; top: 1rem; right: 1rem; font-size: clamp(1.25rem, 1.8vw, 1.6rem); font-weight: 300; letter-spacing: -.01em; text-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
.svc-more { position: absolute; left: 1.2rem; bottom: .9rem; font-size: .85rem; font-weight: 500; opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s; }
.svc-tile:hover .svc-more, .svc-tile:focus-visible .svc-more { opacity: 1; transform: none; }
@media (hover: none) { .svc-more { opacity: 1; transform: none; } }

/* ---------- Page headings on the other pages: light grey with the architecture picture and a red line ---------- */
.page-head { background: #f7f7f8; border-bottom: 1px solid var(--corp-line); overflow: hidden; }
.page-head::before { background-image: url(../img/arch-tunnel.svg); background-size: cover; background-position: right center; opacity: .55;
  -webkit-mask-image: linear-gradient(90deg, transparent 25%, #000 85%); mask-image: linear-gradient(90deg, transparent 25%, #000 85%); }
.page-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, #7f0a1d, #c8102e 45%, #e0485c); }
.page-head h1 { font-weight: 600; }
.page-head .fx-floor { display: none; }

/* ---------- Cards and boxes: flatter, square corners ---------- */
.card-soft, .ref-card, .product-card { border-radius: 4px; border-color: var(--corp-line); }
.card-soft:hover, .ref-card:hover { box-shadow: 0 18px 34px -22px rgba(0, 0, 0, .45); }
.ref-card .thumb { border-radius: 0; }
.ref-card .thumb img { filter: grayscale(.85); transition: filter .4s, transform .4s; }
.ref-card:hover .thumb img { filter: none; }
.icon-dot { border-radius: 50%; background: var(--brand-50); }
.cta-box { border-radius: 4px; background: linear-gradient(110deg, #7f0a1d, #c8102e 55%, #e0485c); }
.tech-tag { border-radius: 3px; }
.eyebrow::before { border-radius: 0; width: 1.4rem; height: 2px; }
.bg-soft { background: var(--corp-grey) !important; }

/* ---------- Search page ---------- */
.search-hit { padding: 1.1rem 0; border-bottom: 1px solid var(--corp-line); }
.search-hit .kind { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--brand); font-weight: 700; }
.search-hit h2 { font-size: 1.15rem; margin: .15rem 0 .25rem; }
.search-hit h2 a { color: #1a1a1f; text-decoration: none; }
.search-hit h2 a:hover { color: var(--brand); }
.search-hit mark { background: var(--brand-50); color: inherit; padding: 0 .1em; }

/* ---------- "Other systems created" box on the references page ---------- */
.other-systems { background: #fff; border: 1px solid var(--corp-line); border-left: 4px solid var(--brand); border-radius: 4px; padding: 1.5rem 1.75rem; }
.other-systems ul { list-style: none; padding: 0; margin: 0; columns: 2 280px; column-gap: 2.5rem; }
.other-systems li { break-inside: avoid; padding: .5rem 0 .5rem 1.6rem; border-bottom: 1px dashed var(--corp-line); position: relative; }
.other-systems li::before { content: "\F285"; font-family: bootstrap-icons; position: absolute; left: 0; top: .5rem; color: var(--brand); font-size: .9rem; }
.hero-corp .fx-floor { display: none; }
.hero-corp .fx-orbs { z-index: 1; }

/* ---------- Hero photo animation ----------
   1. the photo slides in from the right, 2. a red/white light sweeps over it (again every 9 s),
   3. it zooms slowly in and out ("Ken Burns"), 4. it moves a little with the mouse (depth against the arches).
   This runs for every visitor – also with "reduce motion" switched on in Windows/macOS, where it is calmer
   (no repeating light sweep and a slower zoom), because the moving hero photo is part of the design. */
.hc-photo { transform: translate3d(calc(var(--hx, 0) * 16px), calc(var(--hy, 0) * 9px), 0); transition: transform 1.4s cubic-bezier(.2, .8, .2, 1);
  animation: hcReveal 1.6s cubic-bezier(.2, .8, .2, 1) .1s both; overflow: hidden; will-change: transform, opacity; backface-visibility: hidden; contain: paint; }
.hc-photo img { transform-origin: 65% 30%; animation: hcKen 14s ease-in-out 1.4s infinite alternate; will-change: transform; backface-visibility: hidden; }
.hc-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(200, 16, 46, .22) 47%, rgba(255, 255, 255, .32) 52%, transparent 62%);
  background-size: 260% 100%; background-position: 130% 0; opacity: .7; animation: hcSweep 9s ease-out .9s infinite; will-change: background-position; }
.hc-arch { animation: hcArch 1.6s ease-out both; }
.hc-wave path:first-child { animation: hcWave 1.4s cubic-bezier(.2, .8, .2, 1) .3s both; transform-origin: 50% 100%; }
@keyframes hcReveal { from { opacity: 0; translate: 60px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes hcKen { from { transform: scale(1); } to { transform: scale(1.12) translate3d(-2%, 1.5%, 0); } }
@keyframes hcSweep { 0% { background-position: 130% 0; } 30%, 100% { background-position: -40% 0; } }
@keyframes hcArch { from { opacity: 0; transform: scale(1.12); } to { opacity: 1; } }
@keyframes hcWave { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) {
  .hc-photo img { animation-duration: 30s; }
  .hc-photo::after { animation-iteration-count: 1; }
}
/* ---------- Standard hero photo: cut out with a transparent background ----------
   The person stands on the red wave in front of the arches – no dark box, no fade. */
.hc-photo.is-cutout { -webkit-mask-image: none; mask-image: none; overflow: visible; contain: none; }
.hc-photo.is-cutout img { object-fit: contain; object-position: right bottom; transform-origin: 70% 100%; animation-name: hcKenCut; }
.hc-photo.is-cutout::after { /* the light sweep only over the person, not over the arches */
  -webkit-mask-image: var(--hc-mask); mask-image: var(--hc-mask);
  -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: right bottom; mask-position: right bottom; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
@keyframes hcKenCut { from { transform: scale(1); } to { transform: scale(1.05); } }
@media (min-width: 992px) { .hc-photo.is-cutout { width: 48%; right: 1%; bottom: 0; top: 24px; } }
@media (max-width: 991.98px) { .hc-photo.is-cutout { height: 420px; } }
/* Contact form: the browser checks the required fields; mark them like the server does */
#contact-form.was-validated .form-control:invalid, #contact-form.was-validated .form-select:invalid { border-color: var(--bs-form-invalid-border-color, #dc3545); }
#contact-form.was-validated .form-control:invalid ~ .invalid-feedback, #contact-form.was-validated .form-select:invalid ~ .invalid-feedback { display: block; }