/* Home page, after realimage.com: dark, dense, photography on the right, short blocks, logo cards.
   Scoped to body.home-dark so no other page changes. */
body.home-dark {
  --ink: #f5f5f7; --ink-2: #d2d2d7; --ink-3: #98989d; --paper: #111113; --line: rgba(255, 255, 255, 0.12); --line-strong: rgba(255, 255, 255, 0.24);
  --brand-100: rgba(41, 151, 255, 0.14);
  background: #000; color: #f5f5f7;
}
body.home-dark .site-header { background: rgba(0, 0, 0, 0.82); }

/* hero: copy left, photograph fading in from the right */
.hd-hero { position: relative; isolation: isolate; background: #000; overflow: hidden; margin-top: calc(var(--header-h) * -1); }
.hd-hero__photo { position: absolute; inset: 0 0 0 38%; z-index: -1; }
.hd-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; border-radius: 0; display: block; }
.hd-hero__photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.55) 35%, rgba(0, 0, 0, 0) 75%), linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0) 30%); }
.hd-hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 1px; z-index: 1; background: linear-gradient(90deg, transparent, #2997ff 30%, #5e5ce6 70%, transparent); opacity: 0.7; }
.hd-hero__body { padding-top: calc(var(--header-h) + clamp(48px, 7vw, 92px)); padding-bottom: clamp(44px, 6vw, 80px); max-width: var(--container); }
.hd-kicker { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 14px; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #c7c7cc; }
.hd-kicker span { width: 34px; height: 2px; background: #2997ff; }
.hd-title { font-size: clamp(2.5rem, 1.3rem + 4.8vw, 5rem); line-height: 1.02; letter-spacing: -0.035em; font-weight: 700; max-width: 14ch; margin: 0; color: #fff; }
.hd-title em { font-style: normal; color: #2997ff; }
.hd-lead { max-width: 54ch; margin: 22px 0 0; font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.2rem); line-height: 1.5; color: #e5e5ea; }
.hd-lead--sub { margin-top: 12px; font-size: 0.98rem; color: #aeaeb2; }
.hd-hero .btn-row { margin-top: 28px; }
@media (max-width: 860px) {
  .hd-hero__photo { inset: 0; opacity: 0.55; }
  .hd-hero__photo::before { background: linear-gradient(0deg, #000 8%, rgba(0, 0, 0, 0.35) 70%, rgba(0, 0, 0, 0.6) 100%); }
}

/* sections */
.hd-sec { padding-block: clamp(36px, 4.5vw, 60px); border-top: 1px solid rgba(255, 255, 255, 0.08); }
.hd-h { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); letter-spacing: -0.028em; line-height: 1.1; margin: 0; color: #fff; }
.hd-sub { margin: 8px 0 0; max-width: 62ch; color: #aeaeb2; font-size: 1.02rem; }
.hd-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 22px; }
.hd-sec > .container > .hd-sub { margin-bottom: 22px; }
.hd-sec .link-arrow { color: #2997ff; }

/* why us */
.hd-why { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.hd-why__c { display: grid; gap: 6px; align-content: start; padding: 22px; border-radius: 18px; background: #111113; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); transition: transform .3s var(--ease), box-shadow .3s ease; }
.hd-why__c:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(41, 151, 255, 0.6), 0 14px 34px -14px rgba(41, 151, 255, 0.4); }
.hd-why__c svg { width: 28px; height: 28px; color: #2997ff; margin-bottom: 6px; stroke-width: 1.5; }
.hd-why__c strong { font-size: 1.12rem; letter-spacing: -0.015em; color: #fff; }
.hd-why__c span { color: #aeaeb2; font-size: 0.92rem; line-height: 1.45; }

/* solution tiles: photographs with the title on top, three across */
.hd-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.hd-tile { position: relative; display: flex; align-items: flex-end; min-height: 250px; border-radius: 20px; overflow: hidden; text-decoration: none; color: #fff; isolation: isolate; background: #111113; }
.hd-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; border-radius: 0; transition: transform .8s var(--ease); }
.hd-tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0.1) 100%); transition: background .3s ease; }
.hd-tile:hover img { transform: scale(1.06); }
.hd-tile:hover::before { background: linear-gradient(0deg, rgba(0, 20, 60, 0.92) 0%, rgba(0, 40, 110, 0.4) 60%, rgba(0, 0, 0, 0.1) 100%); }
.hd-tile > div { padding: 20px 22px; }
.hd-tile h3 { font-size: 1.35rem; letter-spacing: -0.02em; margin: 0 0 4px; }
.hd-tile p { margin: 0; font-size: 0.9rem; color: #d2d2d7; max-width: 36ch; }
.hd-tile__n { position: absolute; left: 18px; top: 16px; font-size: 0.8rem; font-weight: 600; color: #c7c7cc; }
.hd-tile__go { position: absolute; right: 16px; top: 14px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.92); color: #000; transition: transform .3s var(--ease), background-color .2s ease, color .2s ease; }
.hd-tile__go svg { width: 16px; height: 16px; }
.hd-tile:hover .hd-tile__go { transform: rotate(45deg); background: #2997ff; color: #fff; }

/* clients: two rows of white logo cards moving in opposite directions */
.hd-sec--clients { padding-bottom: clamp(28px, 3.5vw, 48px); overflow: hidden; }
.cmq { display: grid; gap: 14px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.cmq__row { overflow: hidden; }
.cmq__track { display: flex; width: max-content; }
.cmq__set { list-style: none; margin: 0; padding: 0 14px 0 0; display: flex; gap: 14px; flex: none; }
.cmq__card { flex: none; width: 210px; height: 124px; display: grid; place-items: center; background: #fff; border-radius: 18px; box-shadow: 0 0 0 2px #2997ff; padding: 18px; transition: transform .3s var(--ease), box-shadow .3s ease; }
.cmq__card:hover { transform: translateY(-4px) scale(1.03); box-shadow: 0 0 0 2px #5ec0ff, 0 16px 36px -10px rgba(41, 151, 255, 0.6); }
.cmq__card img { max-width: 82%; max-height: 74px; width: auto; height: auto; object-fit: contain; border-radius: 0; }
@media (prefers-reduced-motion: no-preference) {
  .cmq__row--l .cmq__track { animation: cmq-l 46s linear infinite; }
  .cmq__row--r .cmq__track { animation: cmq-r 52s linear infinite; }
  .cmq:hover .cmq__track { animation-play-state: paused; }
  @keyframes cmq-l { to { transform: translateX(-50%); } }
  @keyframes cmq-r { from { transform: translateX(-50%); } to { transform: translateX(0); } }
}
@media (prefers-reduced-motion: reduce) {
  .cmq { -webkit-mask-image: none; mask-image: none; }
  .cmq__track { width: auto; flex-wrap: wrap; justify-content: center; }
  .cmq__set { flex-wrap: wrap; justify-content: center; padding: 0; }
  .cmq__set[aria-hidden="true"] { display: none; }
}

/* platforms */
.hd-products { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.hd-products .product { background: #111113; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); color: #fff; }
.hd-products .product:hover { background: #17171a; box-shadow: inset 0 0 0 1px rgba(41, 151, 255, 0.6); }
.hd-products .product h3 { color: #fff; }
.hd-products .product p { color: #aeaeb2; }
.hd-products .product__role { color: #2997ff; }
.hd-products .link-arrow { color: #2997ff; }

/* partners strip on black */
.hd-sec--partners { overflow: hidden; }
.hd-sec--partners .marquee { color: #c7c7cc; }
.hd-sec--partners .plogo { background-color: #c7c7cc; }

/* contact and footer */
body.home-dark .section--dark, body.home-dark .section { background: #000; }
body.home-dark #contact { border-top: 1px solid rgba(255, 255, 255, 0.08); }
body.home-dark .footer { background: #000; color: #98989d; border-top: 1px solid rgba(255, 255, 255, 0.08); }
body.home-dark .footer__brand img { filter: none; }
body.home-dark .footer a, body.home-dark .footer__offices a, body.home-dark .footer__credit a { color: #d2d2d7; }
body.home-dark .footer h4, body.home-dark .footer__offices h5 { color: #fff; }
body.home-dark .footer__brand p, body.home-dark .footer__offices p, body.home-dark .footer__bottom, body.home-dark .footer__credit { color: #98989d; }
body.home-dark .footer__top, body.home-dark .footer__offices { border-bottom-color: rgba(255, 255, 255, 0.1); }

@media (max-width: 1000px) { .hd-why { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hd-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hd-products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .hd-why, .hd-tiles, .hd-products { grid-template-columns: 1fr; }
  .hd-tile { min-height: 200px; }
  .cmq__card { width: 160px; height: 100px; }
}

/* the enquiry form stays a light card, so its text gets the light-theme colours back */
body.home-dark .form { --ink: #1d1d1f; --ink-2: #424245; --ink-3: #6e6e73; --line: #d2d2d7; --line-strong: #b7b7bd; --paper: #f5f5f7; color: #1d1d1f; }
body.home-dark .form h3, body.home-dark .form label, body.home-dark .form legend { color: #1d1d1f; }