/* Innovation Hub public site: redesign layer. Loaded after main.css and site.css, so it wins on equal specificity. */

:root {
  --ih-bg: #000c14;
  --ih-surface: #06202d;
  --ih-surface-2: #0a2d3d;
  --ih-cyan: #2EDAF1;
  --ih-ink: #eaf7fa;
  --ih-mute: #a8c4cd;
  --ih-line: rgba(46, 218, 241, .16);
  --ih-ease: cubic-bezier(.16, 1, .3, 1);
}

/* Browser surfaces that normally ship unstyled */
::selection { background: var(--ih-cyan); color: #00131c; }
html { scrollbar-color: #14506a var(--ih-bg); scrollbar-width: thin; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--ih-cyan); outline-offset: 3px; border-radius: 4px; }

/* ---------- Hero ---------- */
.main-header { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; isolation: isolate; overflow: hidden; background: var(--ih-bg); }
.main-header .swiper-header { z-index: -1; }
.main-header .swiper-slide { overflow: hidden; }
.main-header .swiper-slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.14); transition: transform 9s linear; }
.main-header .swiper-slide-active img { transform: scale(1); }

/* The scrim keeps text readable on any slide: dark where the words sit, open on the right where the image breathes */
.main-header::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 12, 20, .95) 0%, rgba(0, 12, 20, .84) 30%, rgba(0, 12, 20, .42) 58%, rgba(0, 12, 20, .12) 100%),
    linear-gradient(180deg, rgba(0, 12, 20, .6) 0%, rgba(0, 12, 20, 0) 24%, rgba(0, 12, 20, 0) 58%, var(--ih-bg) 100%);
}

.main-header .hero { position: relative; z-index: 2; flex: 1; height: auto; min-height: 0; padding: 150px 0 190px; align-items: flex-start; justify-content: center; text-align: left; pointer-events: auto; }
.main-header .hero h1 { font-size: clamp(2.5rem, 5.2vw, 4.9rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.04; margin: 0 0 1.4rem; max-width: 9.6em; text-wrap: balance; }
.main-header .hero h1 .hero-accent { color: var(--ih-cyan); }
.main-header .hero p { margin: 0 0 2.2rem; max-width: 34em; padding: 0; font-size: clamp(1.02rem, 1.25vw, 1.2rem); line-height: 1.6; color: var(--ih-ink); text-align: left; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; }

.btn-hero { display: inline-flex; align-items: center; padding: 15px 28px; border-radius: 999px; font-weight: 700; font-size: .98rem; letter-spacing: .01em; text-decoration: none; transition: transform .3s var(--ih-ease), background-color .3s, border-color .3s, color .3s; }
.btn-hero-solid { background: var(--ih-cyan); color: #00131c; border: 1px solid var(--ih-cyan); }
.btn-hero-solid:hover { background: #7ae9f7; border-color: #7ae9f7; color: #00131c; transform: translateY(-2px); }
.btn-hero-line { color: #fff; border: 1px solid rgba(255, 255, 255, .5); }
.btn-hero-line:hover { border-color: var(--ih-cyan); color: var(--ih-cyan); transform: translateY(-2px); }

/* Slide reel: titles of the slides with a progress line that fills while the slide plays */
.hero-reel { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding-bottom: clamp(20px, 3.5vh, 40px); }
.hero-reel-list { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: clamp(12px, 2vw, 28px); }
.hero-reel-tab { all: unset; box-sizing: border-box; display: block; width: 100%; position: relative; padding-top: 14px; cursor: pointer; color: var(--ih-mute); transition: color .3s; }
.hero-reel-tab:hover, .hero-reel-tab.is-active { color: #fff; }
.hero-reel-tab:focus-visible { outline: 2px solid var(--ih-cyan); outline-offset: 6px; }
.hero-reel-bar { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: rgba(255, 255, 255, .24); overflow: hidden; }
.hero-reel-bar::after { content: ""; position: absolute; inset: 0; background: var(--ih-cyan); transform: scaleX(0); transform-origin: left; }
.hero-reel-tab.is-active .hero-reel-bar::after { animation: heroFill 5.5s linear forwards; }
.hero-reel-title { display: block; font-size: .92rem; font-weight: 600; line-height: 1.35; }
@keyframes heroFill { to { transform: scaleX(1); } }

@media (prefers-reduced-motion: no-preference) {
  .main-header .hero h1, .main-header .hero p, .main-header .hero .hero-cta, .hero-reel { animation: heroIn 1s var(--ih-ease) both; }
  .main-header .hero p { animation-delay: .12s; }
  .main-header .hero .hero-cta { animation-delay: .24s; }
  .hero-reel { animation-delay: .5s; }
}
@keyframes heroIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .main-header .swiper-slide img { transition: none; transform: none; }
  .hero-reel-tab.is-active .hero-reel-bar::after { animation: none; transform: scaleX(1); }
}

@media (max-width: 767px) {
  .main-header::before { background: linear-gradient(180deg, rgba(0, 12, 20, .78) 0%, rgba(0, 12, 20, .72) 55%, var(--ih-bg) 100%); }
  .main-header .hero { padding: 120px 0 150px; }
  .hero-reel-title { display: none; }
  .hero-reel-bar { height: 3px; }
}

/* ---------- About block ---------- */
.solution { padding: 110px 0; }
.solution .wrapper-solution .solution-col-1 img { border-radius: 14px; box-shadow: none; max-width: 100%; width: 100%; }
.solution .wa-animate-img { display: none !important; }
.solution .wrapper-solution .solution-col-2 h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); letter-spacing: -.01em; }
.solution .wrapper-solution .solution-col-2 p { max-width: 36em; }

/* ---------- Shared section parts ---------- */
.ih-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: end; margin-bottom: clamp(36px, 5vw, 64px); }
.ih-head h2 { font-size: clamp(2.1rem, 4.4vw, 3.6rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.06; margin: 0; text-wrap: balance; }
.ih-head h2 span { display: block; color: var(--ih-cyan); }
.ih-head p { margin: 0 0 1.4rem; max-width: 36em; color: var(--ih-mute); }
.ih-link { display: inline-flex; align-items: center; gap: 10px; color: var(--ih-cyan); font-weight: 700; text-decoration: none; padding-bottom: 3px; border-bottom: 1px solid currentColor; transition: color .3s, gap .3s var(--ih-ease); }
.ih-link:hover { color: #fff; gap: 14px; }

/* ---------- Services: image above, text below, never one over the other ---------- */
.ih-services { padding: 40px 0 110px; }
.ih-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ih-card { display: flex; flex-direction: column; background: var(--ih-surface); border: 1px solid var(--ih-line); border-radius: 14px; overflow: hidden; color: inherit; text-decoration: none; transition: transform .45s var(--ih-ease), border-color .3s, background-color .3s; }
.ih-card:hover { transform: translateY(-6px); border-color: rgba(46, 218, 241, .5); background: var(--ih-surface-2); color: inherit; }
.ih-card-media { aspect-ratio: 16 / 10; overflow: hidden; background: #021019; }
.ih-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ih-ease); }
.ih-card:hover .ih-card-media img { transform: scale(1.05); }
.ih-card-body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 24px 24px 26px; }
.ih-card-body h3 { margin: 0; font-size: 1.35rem; font-weight: 700; line-height: 1.2; color: #fff; }
.ih-card-body p { margin: 0; color: var(--ih-mute); line-height: 1.55; }
.ih-card-cta { margin-top: auto; padding-top: 10px; display: inline-flex; align-items: center; gap: 8px; color: var(--ih-cyan); font-weight: 700; }
.ih-card-cta svg { transition: transform .3s var(--ih-ease); }
.ih-card:hover .ih-card-cta svg { transform: translateX(5px); }

/* ---------- Spotlight strip: text always visible on a solid scrim ---------- */
.ih-spot { padding: 0 0 110px; }
.ih-spot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ih-spot-item { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 520px; border-radius: 14px; overflow: hidden; isolation: isolate; color: #fff; text-decoration: none; }
.ih-spot-item img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ih-ease); }
.ih-spot-item::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 12, 20, 0) 0%, rgba(0, 12, 20, .55) 28%, rgba(0, 12, 20, .9) 52%, rgba(0, 12, 20, .97) 100%); }
.ih-spot-item:hover img { transform: scale(1.05); }
.ih-spot-copy { padding: 28px; }
.ih-spot-copy h3 { margin: 0 0 .5rem; font-size: 1.55rem; font-weight: 700; line-height: 1.15; color: #fff; }
.ih-spot-copy p { margin: 0 0 1rem; max-width: 30em; color: #d4e8ee; }
.ih-spot-copy .ih-card-cta { padding-top: 0; }
.ih-spot-item:hover .ih-card-cta svg { transform: translateX(5px); }

@media (max-width: 991px) {
  .ih-head { grid-template-columns: 1fr; align-items: start; }
  .ih-grid, .ih-spot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .solution { padding: 80px 0; }
}
@media (max-width: 639px) {
  .ih-grid, .ih-spot-grid { grid-template-columns: 1fr; }
  .ih-spot-item { min-height: 400px; }
  .ih-services { padding-bottom: 80px; }
  .ih-spot { padding-bottom: 80px; }
}

/* =====================================================================
   Inner pages: About, Services, Contact, Blog
   ===================================================================== */

/* Buttons across the site: one calm pill, filled on hover (replaces the glowing text-shadow buttons) */
body .link-ht { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px !important; border-radius: 999px !important; border: 1px solid rgba(46, 218, 241, .6) !important; background: transparent !important; color: #fff !important; font-weight: 700; letter-spacing: .01em !important; text-shadow: none !important; text-decoration: none; transition: transform .3s var(--ih-ease), background-color .3s, color .3s, border-color .3s; }
body .link-ht:hover { background: var(--ih-cyan) !important; border-color: var(--ih-cyan) !important; color: #00131c !important; transform: translateY(-2px) !important; }

/* Page header: left-aligned title on a calm scrim, same voice as the home hero */
.page-header { background-size: cover; background-position: center; }
.page-header .hero { height: auto; min-height: 44vh; padding: 150px 0 64px; justify-content: flex-end; }
.page-header .hero.text-center { text-align: left !important; }
.page-header .hero h1 { margin: 0; max-width: 16em; font-size: clamp(2.2rem, 5vw, 3.9rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; text-transform: none; text-wrap: balance; }
.page-header .hero .hero-overlay { background: linear-gradient(180deg, rgba(0, 12, 20, .74) 0%, rgba(0, 12, 20, .9) 70%, var(--ih-bg) 100%); opacity: 1; }

/* About header: image sits inside the page, not bleeding off the left edge */
.page-header-about { padding-bottom: 0; }
.page-header-about .abs-hero-overlay, .service-displays-solution .abs-hero-overlay { display: none; }
.page-header-about .top-section-about { padding: 130px 0 40px; }
.page-header-about .service-displays-solution { padding: 20px 0 40px; }
.page-header-about .wrapper-sds { row-gap: 32px; align-items: center; }
.page-header-about .sds-img { position: relative; top: auto; left: auto; width: 100%; height: auto; max-height: 520px; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 14px; }
.page-header-about .sds-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }
.page-header-about .content-about h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; text-transform: none; }
.page-header-about .content-about p { max-width: 36em; }

/* Statement blocks: a real heading, then a calm paragraph (no tiny label above, no gradient text) */
.top-quality { margin: 90px 0 70px; }
.top-quality h2 { margin: 0 0 18px; font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 700; letter-spacing: -.01em; line-height: 1.15; text-transform: none; text-align: center; color: #fff; }
.top-quality p { max-width: 44em; background: none; -webkit-text-fill-color: #d8ecf1; color: #d8ecf1; font-size: clamp(1.05rem, 1.5vw, 1.25rem); font-weight: 400; letter-spacing: 0; line-height: 1.65; }
.transforming { padding: 90px 0; }

/* Call-to-action band: one rounded block, image and text always the same height */
.get-in-touch { padding: 0 0 110px; overflow: visible; }
.get-in-touch .get-in-touch-overlay { display: none; }
.about-get-in-touch::before { display: none; }
.get-in-touch > .container > .row { margin: 0; overflow: hidden; border: 1px solid var(--ih-line); border-radius: 14px; background: var(--ih-surface); align-items: stretch !important; }
.get-in-touch > .container > .row > div { padding: 0; }
.get-in-touch .get-in-touch-col-1 { height: 100%; }
.get-in-touch .get-in-touch-col-1 img { display: block; width: 100%; max-width: 100%; height: 100%; min-height: 340px; object-fit: cover; transform: none; }
.get-in-touch .get-in-touch-col-2 { padding: clamp(28px, 4vw, 56px); }
.get-in-touch .get-in-touch-col-2 h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); letter-spacing: -.01em; }
@media (max-width: 767px) { .get-in-touch .get-in-touch-col-2 { text-align: left; } }

/* Service category page */
.main-content .hero { width: 100%; height: auto; aspect-ratio: 16 / 8; object-fit: cover; border-radius: 14px; }
.thumbnail-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.thumbnail-row img { width: 100%; min-width: 0; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; }
.help-container { display: block !important; min-height: 0 !important; padding: 28px !important; background: var(--ih-surface) !important; background-image: none !important; border: 1px solid var(--ih-line); border-radius: 14px; }
.help-box { width: auto !important; padding: 0 !important; }
.help-box::before { display: none !important; }
.help-box h5 { margin: 0 0 .5rem !important; font-size: 1.3rem !important; line-height: 1.2 !important; }
.help-box p { color: var(--ih-mute); margin: 0; }

/* Blog empty state */
.ih-empty { max-width: 640px; margin: 0 auto; padding: 72px 0; text-align: center; }
.ih-empty h3 { margin: 0 0 .6rem; font-size: 1.6rem; font-weight: 700; }
.ih-empty p { margin: 0; color: var(--ih-mute); }

/* Related-service cards: picture above, text below, never one on top of the other */
.comprehensive-offerings .wrapper-comprehensive-offerings { background: none; border: 1px solid var(--ih-line); padding: clamp(24px, 5vw, 64px); row-gap: 24px; text-align: left; }
.comprehensive-offerings .wrapper-comprehensive-offerings > h2 { text-align: center; }
.comprehensive-offerings .wrapper-comprehensive-offerings .co-item { display: flex; flex-direction: column; max-width: none; height: 100%; overflow: hidden; border: 1px solid var(--ih-line); border-radius: 14px; background: var(--ih-surface); }
.comprehensive-offerings .wrapper-comprehensive-offerings .co-item .co-item-img { width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: 0; }
.comprehensive-offerings .wrapper-comprehensive-offerings .co-item .co-item-img img { border-radius: 0; object-fit: cover; }
.comprehensive-offerings .wrapper-comprehensive-offerings .co-item .co-item-info { max-width: none; margin: 0; position: static; padding: 24px; border: 0; border-radius: 0; background: transparent; text-align: left !important; }
.comprehensive-offerings .wrapper-comprehensive-offerings .co-item .co-item-info a { margin: 0; }

/* Form buttons: same calm pill as the rest of the site */
.contact-us form button[type="submit"], .subscribe button[type="submit"], form button[type="submit"] { font-family: inherit !important; font-weight: 700 !important; letter-spacing: .01em !important; text-shadow: none !important; border-radius: 999px !important; border: 1px solid var(--ih-cyan) !important; background: var(--ih-cyan) !important; color: #00131c !important; padding: 12px 26px !important; transition: transform .3s var(--ih-ease), background-color .3s !important; }
form button[type="submit"]:hover { background: #7ae9f7 !important; transform: translateY(-2px); }

/* =====================================================================
   Process, sectors, values and FAQ sections
   ===================================================================== */
.ih-process, .ih-sectors, .ih-values, .ih-faq { padding: 0 0 110px; }
.ih-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; counter-reset: step; }
.ih-steps li { position: relative; padding: 28px 24px 26px; border: 1px solid var(--ih-line); border-radius: 14px; background: var(--ih-surface); counter-increment: step; }
.ih-steps li::before { content: counter(step); display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 18px; border-radius: 50%; background: var(--ih-cyan); color: #00131c; font-weight: 800; }
.ih-steps h3, .ih-tile h3 { margin: 0 0 .5rem; font-size: 1.25rem; font-weight: 700; color: #fff; }
.ih-steps p, .ih-tile p { margin: 0; color: var(--ih-mute); line-height: 1.55; }
.ih-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.ih-tile { padding: 28px 24px; border: 1px solid var(--ih-line); border-radius: 14px; background: var(--ih-surface); }
.ih-faq-list { display: grid; gap: 12px; max-width: 900px; }
.ih-faq-item { border: 1px solid var(--ih-line); border-radius: 14px; background: var(--ih-surface); transition: border-color .3s, background-color .3s; }
.ih-faq-item[open] { border-color: rgba(46, 218, 241, .5); background: var(--ih-surface-2); }
.ih-faq-item summary { position: relative; list-style: none; cursor: pointer; padding: 20px 56px 20px 24px; font-weight: 700; font-size: 1.05rem; color: #fff; }
.ih-faq-item summary::-webkit-details-marker { display: none; }
.ih-faq-item summary::after { content: ""; position: absolute; right: 24px; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--ih-cyan); border-bottom: 2px solid var(--ih-cyan); transform: translateY(-70%) rotate(45deg); transition: transform .3s var(--ih-ease); }
.ih-faq-item[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.ih-faq-item p { margin: 0; padding: 0 24px 22px; max-width: 70ch; color: var(--ih-mute); line-height: 1.65; }
@media (max-width: 991px) { .ih-steps, .ih-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .ih-steps, .ih-tiles { grid-template-columns: 1fr; } .ih-process, .ih-sectors, .ih-values, .ih-faq { padding-bottom: 80px; } }

/* About: the five reasons sit in an even grid */
.why-choose { padding-bottom: 90px; }
.why-choose .why-choose-wrapper-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 24px; margin: 0; }
.why-choose .why-choose-wrapper-cards > div { flex: none; width: auto; max-width: none; padding: 0; }
.ih-values { padding-top: 20px; }

/* Service pages: key features without empty space, related cards with equal pictures */
.key-features .key-features-card { min-height: 0; padding: 26px 24px; }
.key-features .key-features-card h5 { margin: 0; }
.key-features .key-features-card p:empty { display: none; }
.comprehensive-offerings .wrapper-comprehensive-offerings .co-item .co-item-img { position: relative; overflow: hidden; }
.comprehensive-offerings .wrapper-comprehensive-offerings .co-item .co-item-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.comprehensive-offerings .wrapper-comprehensive-offerings .co-item .co-item-info a { justify-content: flex-start; width: auto !important; margin: 0 !important; padding: 0 !important; }
.key-features { padding-bottom: 70px; }

@media (max-width: 575px) { .why-choose .why-choose-wrapper-cards { grid-template-columns: 1fr; } }

/* contrast: footer copyright was 4.35:1, needs 4.5:1 */
footer .footer-copyright .wrapper-footer-copyright .footer-copyright-text { opacity: .8; }