/* ApexMake palette. Geometry, typography, and breakpoints live in landing-layout.css. */
:is(#apex-reference, .apex-reference) {
  --swatch--brand-burgundy: #0f6c86;
  --swatch--brand-black: #152e35;
  --swatch--brand-text: #152e35;
  --swatch--accent-coral: #b8d6d9;
  --swatch--warm-grey-25: #fafcfb;
  --swatch--warm-grey-50: #f2f6f7;
  --swatch--warm-grey-100: #eaf1f3;
  --swatch--warm-grey-200: #dbe7eb;
  --swatch--burgundy-50: #edf5f7;
  --swatch--burgundy-100: #e0eef2;
  --swatch--burgundy-200: #bcd9e3;
  --swatch--charcoal-950: #10292f;
  --swatch--charcoal-900: #183840;
  --swatch--cerulean-100: #eff4f6;
  --swatch--olive-100: #f1f4ed;
  --swatch--white: #ffffff;
  width: 100%;
  min-height: 100vh;
  isolation: isolate;
}
.apex-reference .apex-wordmark { display: block; width: 100%; height: 100%; object-fit: contain; }
.apex-reference .footer_logo_wrap img { display: block; width: 100%; height: 100%; object-fit: contain; }
.apex-reference .page_wrap { overflow: clip; }
.apex-reference .slider_element { overflow: visible; touch-action: pan-y; }
.apex-reference .slider_list { display: flex; position: relative; transition: transform 600ms ease; will-change: transform; }
.apex-reference .slider_testimonials .slider_list { transform: none !important; }
.apex-reference .slider_testimonials .swiper-slide:not(.is-active) { pointer-events: none; }
.apex-reference .card_case_reveal_wrap { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 400ms ease, opacity 300ms ease; }
.apex-reference .card_case_reveal_wrap > * { min-height: 0; overflow: hidden; }
.apex-reference .card_case_wrap:hover .card_case_reveal_wrap,
.apex-reference .card_case_wrap:focus-within .card_case_reveal_wrap { grid-template-rows: 1fr; opacity: 1; }
.apex-reference .nav_dropdown_backdrop, .apex-reference .nav_menu_backdrop { pointer-events: none; }
.apex-reference .nav_mobile_menu_wrap { display: none; }
:is(#apex-reference, .apex-reference).apex-menu-open .nav_mobile_menu_wrap { display: block; position: fixed; inset: var(--nav--height) 0 0; width: 100%; max-width: 100vw; height: calc(100dvh - var(--nav--height)); overflow-y: auto; }

body:has(.apex-reference.apex-menu-open) { overflow: hidden; }
.apex-reference [id] { scroll-margin-top: 5rem; }
.apex-reference .logos_img { filter: grayscale(1); }
.apex-reference .form_field { min-width: 0; }
@media (hover: none) {
  .apex-reference .card_case_reveal_wrap { grid-template-rows: 1fr; opacity: 1; }
}
@media (min-width: 1024px) {
  body:has(.apex-reference.apex-menu-open) { overflow: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .apex-reference *, .apex-reference *::before, .apex-reference *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .apex-reference .parallax-img_bg { transform: none !important; }
}

/* A single textured petrol panel frames the introduction and founder film. */
:is(#apex-reference, .apex-reference) .apex-hero-layout {
  --_theme---text: #fafcfb;
  --_theme---button-primary--text: #10292f;
  --_theme---button-primary--text-hover: #10292f;
  --_theme---button-primary--background: #fafcfb;
  --_theme---button-primary--background-hover: #dce9e9;
  padding-top: clamp(2.5rem, 5vw, 5rem);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fafcfb;
  background:
    radial-gradient(ellipse at 95% 98%, #3c574f70 0%, transparent 57%),
    radial-gradient(ellipse at 5% 0%, #0a424970 0%, transparent 58%),
    linear-gradient(135deg, #0a2429 0%, #06171c 52%, #15333a 100%);
}
:is(#apex-reference, .apex-reference) .apex-hero-layout::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(#03121060, #03121060), url("/reference/hero-grain.webp"), url("/reference/hero-ripples.svg");
  background-size: 100% 100%, 360px 360px, auto 100%;
  background-position: center, center, center;
  background-repeat: no-repeat, repeat, no-repeat;
  background-blend-mode: normal, soft-light, normal;
  opacity: .7;
}
:is(#apex-reference, .apex-reference) .apex-hero-layout > .u-layout-wrapper {
  padding-inline: clamp(1.25rem, 4vw, 4rem);
}
:is(#apex-reference, .apex-reference) .apex-hero-layout .u-text { color: #e0ecef; }
:is(#apex-reference, .apex-reference) .apex-hero-video-stage {
  display: flex;
  justify-content: center;
  margin-top: clamp(2rem, 4vw, 3.5rem);
  padding: 0 clamp(1rem, 2vw, 2rem) clamp(2.5rem, 5vw, 5rem);
}
:is(#apex-reference, .apex-reference) .apex-hero-video-frame {
  width: 100%;
  /* Preserve the previous 36rem maximum height at the film’s display ratio. */
  max-width: calc(36rem * 1024 / 429);
  aspect-ratio: 1024 / 429;
  position: relative;
  overflow: hidden;
  border-radius: 0.75rem;
  background: #10292f;
  box-shadow: 0 28px 70px -20px #04151bcc, 0 0 0 1px #ffffff33;
}
/* Match the chosen source, including after device rotation or window resizing. */
:is(#apex-reference, .apex-reference) .apex-hero-video-frame[data-video-format="mobile"] {
  aspect-ratio: 16 / 9;
  max-width: calc(36rem * 16 / 9);
}
@media (max-width: 1023px) {
  :is(#apex-reference, .apex-reference) .apex-hero-video-frame:not([data-video-format]) {
    aspect-ratio: 16 / 9;
    max-width: calc(36rem * 16 / 9);
  }
}
:is(#apex-reference, .apex-reference) .apex-hero-video-fallback {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
:is(#apex-reference, .apex-reference) .apex-hero-player { position: absolute; inset: 0; }
:is(#apex-reference, .apex-reference) .apex-hero-video[data-ended] .vds-poster {
  display: block;
  opacity: 1;
}

:is(#apex-reference, .apex-reference) .apex-hero-video {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
}
@media (max-width: 767px) {
  :is(#apex-reference, .apex-reference) .apex-hero-video-stage { padding: 0 1rem 1.5rem; }
  :is(#apex-reference, .apex-reference) .apex-hero-video-frame { border-radius: 0.5rem; }
}

/* Expert affiliations, using the reference strip's quiet monochrome treatment. */
:is(#apex-reference, .apex-reference) .expert-logos {
  gap: 0;
  padding-top: 2.5rem;
  border-bottom: 1px solid var(--_theme---border);
}
:is(#apex-reference, .apex-reference) .expert-logos-heading {
  margin: 0;
  color: #183840;
  font-family: var(--font-newsreader), Georgia, serif;
  font-size: .8125rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
}
:is(#apex-reference, .apex-reference) .expert-logos-list {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2rem;
  max-height: none;
  overflow: visible;
  padding: 1.25rem 0 2.75rem;
  border: 0;
}
:is(#apex-reference, .apex-reference) .expert-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-width: 0;
  height: 2.5rem;
}
:is(#apex-reference, .apex-reference) .expert-logo .logos_img {
  width: 100%;
  height: auto;
  max-width: 8rem;
  max-height: 2rem;
  object-fit: contain;
  filter: grayscale(1) brightness(0);
  opacity: .55;
}
:is(#apex-reference, .apex-reference) .expert-logo--google .logos_img { max-width: 6.25rem; }
:is(#apex-reference, .apex-reference) .expert-logo--aws .logos_img { max-width: 4.25rem; max-height: 2.25rem; }
:is(#apex-reference, .apex-reference) .expert-logo--mit .logos_img { max-width: 4rem; }
:is(#apex-reference, .apex-reference) .expert-logo--huggingface .logos_img { max-width: 9rem; filter: grayscale(1); opacity: .65; }
@media (max-width: 991px) {
  :is(#apex-reference, .apex-reference) .expert-logos-list { gap: 1.5rem; }
}
@media (max-width: 767px) {
  :is(#apex-reference, .apex-reference) .expert-logos { padding-top: 2rem; }
  :is(#apex-reference, .apex-reference) .expert-logos-heading { font-size: .75rem; }
  :is(#apex-reference, .apex-reference) .expert-logos-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.75rem 1.5rem;
    padding: 1rem 0 2rem;
  }
  :is(#apex-reference, .apex-reference) .expert-logo { width: calc((100% - 3rem) / 3); }
  :is(#apex-reference, .apex-reference) .expert-logo .logos_img { max-height: 1.75rem; }
}

/* Expert testimonial content retains the original cover-card geometry. */
:is(#apex-reference, .apex-reference) .expert-testimonial-name {
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -.025em;
}
:is(#apex-reference, .apex-reference) .expert-testimonial-role { margin-top: .5rem; font-size: 1rem; line-height: 1.4; }
:is(#apex-reference, .apex-reference) .expert-testimonial-card .card_case_image { width: 100%; object-fit: cover; object-position: center; }
#apex-testimonial-dialog {
  position: fixed;
  inset: 0;
  width: min(70rem, calc(100vw - 2rem));
  max-width: none;
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: .75rem;
  overflow: visible;
  background: #071d24;
  color: white;
  box-shadow: 0 24px 90px #0006;
}
#apex-testimonial-dialog::backdrop { background: #07151de6; backdrop-filter: blur(6px); }
#apex-testimonial-dialog .apex-testimonial-dialog-inner { position: relative; }
#apex-testimonial-dialog video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: calc(100dvh - 2rem);
  border-radius: .75rem;
  background: #000;
  object-fit: contain;
}
#apex-testimonial-dialog .apex-testimonial-close {
  position: absolute;
  z-index: 2;
  top: .75rem;
  right: .75rem;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid #ffffff50;
  border-radius: 50%;
  background: #10292fe6;
  color: white;
  font: 2rem/1 Arial, sans-serif;
  cursor: pointer;
}
#apex-testimonial-dialog .apex-testimonial-close:hover { background: #0f6c86; }
#apex-testimonial-dialog .apex-testimonial-close:focus-visible { outline: 2px solid white; outline-offset: 3px; }
:is(#apex-reference, .apex-reference) .expert-testimonial-card .card_case_link { opacity: 1; }

/* Sample research questions reuse the reference carousel and its square image slots. */
:is(#apex-reference, .apex-reference) .sample-questions-section .testimonials_slide_image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}
:is(#apex-reference, .apex-reference) .sample-question-eyebrow {
  margin: 0 0 1rem;
  font-size: .6875rem;
  letter-spacing: .12em;
  line-height: 1.4;
  text-transform: uppercase;
  color: #607b84;
}
:is(#apex-reference, .apex-reference) .sample-question-answer {
  margin: 1.25rem 0 0;
  font-family: var(--font-geist-sans), Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: #526b74;
}
:is(#apex-reference, .apex-reference) .sample-question-author {
  margin: .75rem 0 0;
  font-family: var(--font-geist-sans), Arial, sans-serif;
  font-size: .875rem;
  line-height: 1.5;
  font-weight: 500;
  color: #193b44;
}
:is(#apex-reference, .apex-reference) .sample-questions-section .testimonials_slide_quote_content { justify-content: flex-start; }
:is(#apex-reference, .apex-reference) .sample-questions-section .testimonials_slide_quote_text { font-size: clamp(1.4rem, 2vw, 2rem); }
@media (max-width: 767px) {
  :is(#apex-reference, .apex-reference) .sample-questions-section .testimonials_slide_image { max-width: 12rem; }
}

/* Petrol interaction states, shared across all reference button variants. */
:is(#apex-reference, .apex-reference) :is(.button_main_wrap, .button_arrow_wrap) {
  --_theme---button-primary--background-hover: #0b5368;
  --_theme---button-primary--text-hover: #ffffff;
  --_theme---button-secondary--background-hover: #0b5368;
  --_theme---button-secondary--text-hover: #ffffff;
}
:is(#apex-reference, .apex-reference) .solutions_links_item:is(:hover, :focus-within) {
  background: #0f6c86;
  color: #ffffff;
  --swatch--accent-coral: #0f6c86;
}
:is(#apex-reference, .apex-reference) :is(.nav_desktop_logo, .nav_mobile_logo) { width: 10.5rem; flex-shrink: 0; }
:is(#apex-reference, .apex-reference) .apex-header-brand { display: flex; align-items: center; gap: .55rem; width: 100%; }
:is(#apex-reference, .apex-reference) .apex-header-panther { width: 1.75rem; height: 1.875rem; flex-shrink: 0; object-fit: contain; }
:is(#apex-reference, .apex-reference) .apex-header-brand .apex-wordmark { width: calc(100% - 2.3rem); height: auto; }
:is(#apex-reference, .apex-reference) [data-apex-draggable] { cursor: grab; }
:is(#apex-reference, .apex-reference) [data-apex-draggable] img { -webkit-user-drag: none; user-select: none; }
:is(#apex-reference, .apex-reference) [data-apex-draggable].is-dragging { cursor: grabbing; user-select: none; }
:is(#apex-reference, .apex-reference) [data-apex-draggable].is-dragging .slider_list { transition: none; }
/* One original, continuous artwork spans the entire CTA, including its left gutter. */
:is(#apex-reference, .apex-reference) .cta-main_layout { position: relative; background: #092f36; }
:is(#apex-reference, .apex-reference) .cta-main_content { position: static; }
:is(#apex-reference, .apex-reference) .cta-main_visual { inset: 0; width: 100%; height: 100%; pointer-events: none; }
:is(#apex-reference, .apex-reference) .cta-main_visual .u-image-wrapper { width: 100%; height: 100%; border-radius: 0; }
:is(#apex-reference, .apex-reference) .cta-main_visual .u-image { width: 100%; height: 100%; object-fit: cover; filter: none; }

/* Preserve the full artwork from the matching ApexMake comparison article. */
:is(#apex-reference, .apex-reference) .blog-card_wrap.is-nav .blog-card_img { object-fit: contain; background: #f2f6f7; }

/* Keep the muted petrol treatment while meeting text contrast requirements. */
:is(#apex-reference, .apex-reference) .u-color-faded { color: color-mix(in srgb, currentColor 70%, transparent); }

/* Shared chrome uses the homepage scope without affecting other page bodies. */
:is(#apex-site-header, .site-chrome.apex-reference) { min-height: 0; height: auto; }
/* Keep the fixed header and its page offset in the same stylesheet so they
   always update together, including in the development preview. */
html:has(#apex-site-header), body:has(#apex-site-header) { overscroll-behavior-y: none; }
body:has(#apex-site-header) { padding-top: 4rem; }
#apex-site-header { position: fixed; inset: 0 0 auto; z-index: 1000; overflow: visible; }
#apex-site-header .nav_component { position: relative; }

/* The fixed header offset is reserved once on body, rather than again on the hero. */
#apex-reference .home-hero-card_wrap { margin-top: 0; }
:is(#apex-reference, .apex-reference).site-final-cta { min-height: 0; height: auto; }

/* The full navigation needs room for both the logo and account actions.
   Override the original container breakpoint before those actions can clip. */
@media (max-width: 1023px) {
  #apex-site-header .nav_desktop_wrap,
  #apex-site-header .nav_dropdown_backdrop { display: none; }
  #apex-site-header .nav_mobile_wrap { display: block; }
}
@media (min-width: 1024px) {
  #apex-site-header .nav_desktop_wrap { display: block; }
  #apex-site-header .nav_mobile_wrap,
  #apex-site-header .nav_menu_backdrop { display: none; }
}

/* Shared footer contact details and a space-reserved, deferred map. */
.site-footer.apex-reference .footer_contact { display: grid; gap: 1rem; width: 100%; }
.site-footer.apex-reference .footer_contact_details { display: grid; gap: .35rem; font-style: normal; line-height: 1.6; }
.site-footer.apex-reference .footer_contact_details p { margin: 0 0 .45rem; }
.site-footer.apex-reference .footer_contact_details a { width: fit-content; overflow-wrap: anywhere; }
.site-footer.apex-reference .footer_contact_details a:hover { text-decoration: underline; text-underline-offset: .2em; }
.site-footer.apex-reference .footer_contact_map { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid #c7d8dc; border-radius: .375rem; background: #dce7e9; }
.site-footer.apex-reference .footer_contact_map iframe { display: block; width: 100%; height: 100%; border: 0; }
.site-footer.apex-reference .footer_contact_maps_link { justify-self: start; color: #116f85; font-size: .8125rem; font-weight: 500; line-height: 1.5; text-underline-offset: .2em; }
.site-footer.apex-reference .footer_contact_maps_link:hover { text-decoration: underline; }

.site-footer.apex-reference .footer_contact_title { margin: 0; font-family: var(--font-display); font-size: clamp(2.25rem, 3.5vw, 3rem); font-weight: 400; line-height: 1.08; letter-spacing: -.03em; }

/* Tighten the logo-to-workflow transition after removing its eyebrow label. */
#apex-reference #how-it-works > .u-section-spacer:first-child {
  height: clamp(3rem, 6vw, 5rem);
}