/* ============================================================================
   EPIEME HOME — the only stylesheet we author.

   The UI comes entirely from vendor/ui/css/ (the saved site's own Webflow
   stylesheets, verbatim). This file exists for exactly three reasons:

     1. Swap the typeface. The saved CSS loads Armin Grotesk from the original
        site's Webflow CDN. Those font files are not in the folder, the face is
        commercially licensed, and hotlinking someone else's CDN is fragile.
        The family is fully tokenised (57 uses, 0 hardcoded), so repointing one
        variable swaps it everywhere — and leaves the Armin @font-face rules
        unused, so no request is ever made to that CDN.
     2. Neutral placeholders for image slots we have no real asset for, so the
        slot keeps its exact geometry from the vendor CSS without shipping
        another company's screenshots.
     3. Nothing else. If you find yourself adding layout or colour here, the
        vendor CSS almost certainly already has a class for it — use that.
   ============================================================================ */

/* ------------------------------------------------------ 0. colour theme ---- */
/* The vendor UI is fully tokenised: every rule reads from the `--_base--*`
   palette, and the `--_semantics--*` / `--_components--*` layers reference the
   base. Overriding ONLY the base palette here (this sheet loads after the
   vendor CSS) re-themes the whole page onto Epieme's cream / deep-green /
   teal system without touching a single vendor rule.

   Mapping: navy/blue stage+ink → deep green · blue accent → Epieme teal
   (#00896e) · purples (tags, AI gradient) → teal family · yellows (tertiary
   button) → Epieme warm gold · neutrals → cream/sage-tinted equivalents.
   White-alpha tokens are left alone (white overlays read the same on green). */
:root {
  /* — blues → deep green + teal accent — */
  --_base--blue--blue-900: #0b1c15;
  --_base--blue--blue-600: #00896e;
  --_base--blue--blue-500: #2fa287;
  --_base--blue--blue-450: #128a70;
  --_base--blue--blue-300: #7fd0bb;
  --_base--blue--blue-280: #7fd0bb;
  --_base--blue--blue-100: #d6e6dc;
  --_base--blue--blue-050: #f7faf8;

  /* — navys (borders, container hairlines, dark nav) — */
  --_base--navy--navy-050: #f4f7f5;
  --_base--navy--navy-100: #e5eae6;
  --_base--navy--navy-200: #d2dad4;
  --_base--navy--navy-400: #8d968f;
  --_base--navy--navy-500: #6a756d;
  --_base--navy--navy-800: #17382d;
  --_base--navy--navy-900: #0b1c15;

  /* — neutrals → white with a cool green-gray ramp — */
  --_base--neutral--neutral-0: #ffffff;
  --_base--neutral--neutral-50: #f4f7f5;
  --_base--neutral--neutral-100: #e5eae6;
  --_base--neutral--neutral-200: #d2dad4;
  --_base--neutral--neutral-400: #8d968f;
  --_base--neutral--neutral-500: #6a756d;
  --_base--neutral--neutral-600: #4c5a51;
  --_base--neutral--neutral-800: #223c30;
  --_base--neutral--neutral-900: #12281f;
  --_base--neutral--neutral-black: #0b1c15;

  /* — purples (tag highlights, AI-button gradient) → teal family — */
  --_base--purple--purple-50: #f7fbf9;
  --_base--purple--purple-100: #e2f0e9;
  --_base--purple--purple-200: #d6ece2;
  --_base--purple--purple-300: #8fc9b4;
  --_base--purple--purple-500: #2fa287;
  --_base--purple--purple-550: #2fa287;
  --_base--purple--purple-800: #00694f;

  /* — accent teals/greens — */
  --_base--teal--teal-500: #7fc9b8;
  --_base--green--green-050: #e6f4ee;
  --_base--green--green-300: #2aa38a;
  --_base--green--green-400: #35c99f;

  /* — yellows (tertiary button) → soft mint, keeping the page green+white — */
  --_base--yellow--yellow-0: #f2faf6;
  --_base--yellow--yellow-900: #b9e2d4;
  --_base--yellow--yellow-950: #b9e2d4;

  /* — semantic one-offs that carry raw values — */
  --_semantics---border-color--border-alternate: #1d332a;
}

/* Hardcoded-hex rules that bypass the tokens (overlays and tints painted with
   navy literals). Same selectors, colour-only, re-tinted to the green ink. */
.home-hero_overlay {
  background-color: #2e3e364d;
  background-image: linear-gradient(180deg, #0b1c1580, #0b1c151a 20%, transparent);
}

.blur-overlay {
  background-color: #0b1c1599;
}

.integration_overlay-wrapper {
  background-image: linear-gradient(#0b1c1500, #0b1c15);
}

.case-study-preview_background-overlay {
  background-image: linear-gradient(#0b1c1566, #0b1c15f2);
}

.image-testimonial_overlay {
  background-image: linear-gradient(270deg, #0b1c15e6, #0b1c15d9);
}

.testimonial-slider-overlay {
  background-image: linear-gradient(#0b1c1500, #0b1c15cc);
}

.footer_cta-inner.alternative {
  background-color: #2fa28733;
}

/* The laptop-podium render bakes in the reference's periwinkle blue; rotate
   it onto Epieme's teal-green. The bezel is near-black, so the shift only
   touches the podium. */
.dashboard-laptop {
  filter: hue-rotate(-72deg) saturate(0.62);
}

/* ---------------------------------------------------------- performance ---- */
/* The rail marks are pre-baked white (Icons8/white/) so the vendor's
   invert+grayscale filter — 120 live filter layers across the two rails —
   isn't needed on them. */
.client-logos_logo-image[src*="/Icons8/white/"] {
  filter: none;
}

/* The bento cards stack 15 backdrop-filter layers over images that are
   already dimmed to near-opacity by their tint — the frosted effect is
   invisible in practice but each layer costs GPU every frame. Drop the
   filter and compensate with a slightly deeper tint. */
.blur-overlay {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background-color: #0b1c15b3;
}

/* Below-fold sections skip layout & paint until they approach the viewport.
   Intrinsic sizes are the real measured heights at 1440px so scroll-trigger
   positions stay accurate before first render. Excluded: the hero (scrubbed
   pin), logos/stats/tabs/mission (near the fold or measured by SplitText). */
.section_case-study-preview {
  content-visibility: auto;
  contain-intrinsic-size: auto 1004px;
}
.section_features-grid {
  content-visibility: auto;
  contain-intrinsic-size: auto 1422px;
}
.section_integration {
  content-visibility: auto;
  contain-intrinsic-size: auto 824px;
}
.section_image-testimonial {
  content-visibility: auto;
  contain-intrinsic-size: auto 592px;
}
.section_compare {
  content-visibility: auto;
  contain-intrinsic-size: auto 981px;
}
.section_use-cases {
  content-visibility: auto;
  contain-intrinsic-size: auto 1067px;
}
.section_faq {
  content-visibility: auto;
  contain-intrinsic-size: auto 1221px;
}

/* ==== PAGE TRANSITIONS (extracted into navbar.css by make-shared-navbar.py) ====
   Cross-document View Transitions: both ends of a navigation must opt in, so
   this block ships on the homepage (here) and on every inner page (via the
   generated navbar.css). Design: the header is a shared element that glides
   between pages while the incoming page sweeps up over the dimming old one.
   Chrome/Edge 126+ and Safari 18.2+ animate; other browsers just navigate. */
@view-transition {
  navigation: auto;
}

/* The header persists across pages: same name on the homepage nav and the
   shared navbar mount (one per page — duplicate names would void the
   transition). */
.nav_main {
  view-transition-name: epieme-nav;
}

::view-transition-group(epieme-nav) {
  animation-duration: 0.3s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Outgoing page: settle back and dim underneath the incoming sweep. */
::view-transition-old(root) {
  animation: epieme-page-out 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Incoming page: bottom-up reveal with a small rise. */
::view-transition-new(root) {
  animation: epieme-page-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes epieme-page-out {
  to {
    opacity: 0.35;
    transform: scale(0.985);
  }
}

@keyframes epieme-page-in {
  from {
    clip-path: inset(100% 0 0 0);
    transform: translateY(1.5rem);
  }
  to {
    clip-path: inset(0 0 0 0);
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}
/* ==== END PAGE TRANSITIONS ==== */

/* ------------------------------------------------------------------ 1. type -- */
:root {
  --_typography---font-family--font-family-primary:
    "Schibsted Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", Arial,
    sans-serif;
}

/* --------------------------------------------------------- 2. placeholders -- */
/* Applied to an <img>'s wrapper, or used in place of one, when we have no real
   asset. Inherits the slot's sizing from the vendor CSS; only paints a surface. */
.epieme-placeholder {
  /* A query container so the label can hide itself in slots too small to
     read it — otherwise a 40px circular avatar slot renders "ORTRAI". */
  container-type: inline-size;

  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  /* No min-height: the slot's own geometry comes from the vendor CSS, and
     forcing 3rem overflows small avatar slots. */
  overflow: hidden;
  padding: 0.25rem;
  border: 1px solid var(--_semantics---border-color--border-primary);
  border-radius: var(--_layout---border-radius--border-radius-xxsmall);
  background-color: var(--_semantics---background-color--bg-shade-1);
  color: var(--_base--neutral--neutral-500);
  font-size: var(--_typography---text-size-xsmall--font-size);
  font-weight: var(--_typography---font-weight--font-weight-medium);
  letter-spacing: var(--tracking-wider, 0.05em);
  text-transform: uppercase;
  text-align: center;
}

/* The label lives in a <span> (added by home-src/labels.py) so it can be
   hidden when the slot is narrower than the text needs. Below ~7rem the slot
   reads as a neutral surface instead of clipped letters. */
.epieme-placeholder > span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

@container (max-width: 3rem) {
  .epieme-placeholder > span {
    display: none;
  }
}

/* ── contextual sizing ──
   The <img> elements these placeholders replaced had intrinsic dimensions;
   a div has none, so the slots collapse without an explicit size. These
   rules size ONLY our own placeholder class, anchored on the vendor slot
   it sits in — no vendor class is restyled. */

/* State chips in the marquee rail (was a ~100×40 logo image). */
.client-logos_logo-wrapper .epieme-placeholder {
  height: 2.5rem;
}

/* Bill chip in the case-study card corner (was an 81×50 logo image). */
.case-study-preview_logo-wrapper .epieme-placeholder {
  min-height: 2.5rem;
  min-width: 5rem;
}

/* (The hero laptop bezel slot is a real image again —
   /images/product/laptop-centred.png — so no placeholder rule is needed.) */

.epieme-placeholder.is-inverse {
  border-color: var(--_base--white--white-100);
  background-color: var(--_base--white--white-050);
  color: var(--_base--white--white-600);
}

/* A real Epieme asset dropped into a slot the vendor CSS sized for a
   screenshot: contain rather than crop, so nothing important is cut off. */
.epieme-asset {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}