/* ==========================================================================
   Ignitex WBS — theme layer.

   The design itself lives in assets/css/framer.css, which is the export's own
   stylesheet kept verbatim. This file deliberately adds ONLY:

     1. the scroll-motion layer that replaces Framer's React/Motion runtime,
     2. components WordPress needs that the original design has no markup for
        (comments, pagination, widgets, editor rich text, search form).

   It defines no typography, colour or layout of its own, so it cannot fight
   the original design.

   Movement uses the `translate` / `scale` longhands rather than `transform`,
   so any layout transform the export set inline (e.g. translateX(-50%) for
   centring) is preserved and composes with the reveal offset.
   ========================================================================== */

/* --------------------------------------------------------------- 1. motion */
.ix-js [data-ix-reveal] {
  opacity: 0;
  translate: 0 30px;
  transition:
    opacity .85s cubic-bezier(.16, 1, .3, 1),
    translate .85s cubic-bezier(.16, 1, .3, 1),
    scale .85s cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--ix-delay, 0ms);
}
.ix-js [data-ix-reveal="down"]  { translate: 0 -34px; }
.ix-js [data-ix-reveal="left"]  { translate: -30px 0; }
.ix-js [data-ix-reveal="right"] { translate: 30px 0; }
.ix-js [data-ix-reveal="fade"]  { translate: 0 0; }
.ix-js [data-ix-reveal="scale"] { translate: 0 0; scale: 1.14; }

.ix-js [data-ix-reveal].is-revealed {
  opacity: 1;
  /* Must end at `none`, not 0/1: any value other than `none` keeps creating a
     containing block, which breaks `position: sticky` in every descendant.
     The original design uses sticky for its stacking-card sections. */
  translate: none;
  scale: none;
}

/* Elements that contain sticky descendants never get a movement transform at
   all, so their sticky children work even mid-reveal. */
.ix-js [data-ix-reveal][data-ix-hassticky] {
  translate: none !important;
  scale: none !important;
}

/* Word-by-word headline reveal */
.ix-js [data-ix-words] .ix-word { display: inline-block; overflow: hidden; vertical-align: top; }
.ix-js [data-ix-words] .ix-word > span {
  display: inline-block;
  translate: 0 105%;
  transition: translate .9s cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--ix-delay, 0ms);
}
.ix-js [data-ix-words].is-revealed .ix-word > span { translate: 0 0; }

/* Marquee — drives the client logo strip without the Framer runtime */
.ix-marquee-track { display: flex; width: max-content; animation: ix-marquee var(--ix-marquee-dur, 40s) linear infinite; }
.ix-marquee-host:hover .ix-marquee-track { animation-play-state: paused; }
@keyframes ix-marquee { to { transform: translateX(-50%); } }

/* Page transition veil */
.ix-transition {
  position: fixed; inset: 0; z-index: 99999;
  background: #05080c;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .34s ease, visibility .34s;
}
.ix-transition.is-active { opacity: 1; visibility: visible; }

/* Mobile drawer open state (the export's phone nav markup is toggled by class) */
body.ix-nav-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .ix-js [data-ix-reveal],
  .ix-js [data-ix-words] .ix-word > span {
    opacity: 1 !important;
    translate: 0 0 !important;
    scale: 1 !important;
    transition: none !important;
  }
  .ix-marquee-track { animation: none !important; }
  .ix-transition { display: none; }
}

/* ------------------------------------------------- 2. WordPress components */

/* Skip link */
.ix-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100000;
  padding: 14px 22px; background: #fff; color: #05080c;
  font: 500 14px/1.2 "Geist", sans-serif; border-radius: 0 0 8px 0;
}
.ix-skip-link:focus { left: 0; }

/* Editor rich text — inherits type from framer.css via the wrapper it sits in */
.ix-rte > * + * { margin-top: 1.15em; }
.ix-rte p, .ix-rte li { line-height: 1.6; }
.ix-rte ul, .ix-rte ol { padding-left: 1.35em; margin-block: 0; }
.ix-rte ul li { list-style: disc; }
.ix-rte ol li { list-style: decimal; }
.ix-rte li + li { margin-top: .45em; }
.ix-rte a { text-decoration: underline; text-underline-offset: .18em; }
.ix-rte img, .ix-rte iframe, .ix-rte video { max-width: 100%; height: auto; border-radius: 16px; }
.ix-rte figure { margin: 0; }
.ix-rte figcaption { font-size: 14px; opacity: .65; margin-top: .6em; }
.ix-rte blockquote { margin: 0; padding-left: 1.2em; border-left: 2px solid currentColor; }
.ix-rte code, .ix-rte kbd, .ix-rte samp { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; }
.ix-rte pre { padding: 20px; border-radius: 12px; overflow-x: auto; background: rgba(127, 127, 127, .12); }
.ix-rte pre code { background: none; padding: 0; }
.ix-rte table { width: 100%; border-collapse: collapse; }
.ix-rte th, .ix-rte td { border: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 18%, transparent); padding: 10px 14px; text-align: left; }
.ix-rte hr { border: 0; border-top: 1px solid currentColor; opacity: .18; }
.ix-rte .alignwide { width: min(100%, 1100px); margin-inline: auto; }
.ix-rte .alignfull { width: 100vw; margin-inline: calc(50% - 50vw); max-width: none; }
.ix-rte .alignleft { float: left; margin: 0 1.5em 1em 0; }
.ix-rte .alignright { float: right; margin: 0 0 1em 1.5em; }
.ix-rte .aligncenter { margin-inline: auto; }

/* Pagination */
.ix-pagination { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 56px; }
.ix-pagination .page-numbers {
  min-width: 46px; height: 46px; padding: 0 15px;
  display: inline-grid; place-items: center;
  border: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 22%, transparent);
  border-radius: 500px; font-size: 15px;
  transition: background-color .3s ease, color .3s ease;
}
.ix-pagination .page-numbers.current,
.ix-pagination a.page-numbers:hover { background: currentColor; }
.ix-pagination .page-numbers.current { color: inherit; }
.ix-pagination a.page-numbers:hover span,
.ix-pagination .page-numbers.current { mix-blend-mode: difference; }

/* Comments */
.ix-comments { margin-top: 64px; }
.ix-comments .comment-list { display: flex; flex-direction: column; gap: 22px; list-style: none; padding: 0; }
.ix-comments .children { list-style: none; padding-left: 26px; margin-top: 22px; display: flex; flex-direction: column; gap: 22px; }
.ix-comments .comment-body {
  padding: 24px; border-radius: 16px;
  border: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 15%, transparent);
}
.ix-comments .comment-author { display: flex; align-items: center; gap: 12px; }
.ix-comments .comment-author img { border-radius: 50%; }
.ix-comments .comment-meta { font-size: 13px; opacity: .6; margin: 10px 0; }
.ix-comments .comment-respond { margin-top: 40px; }
.ix-comments .comment-form { display: grid; gap: 16px; }
.ix-comments .comment-form label { display: block; font-size: 13px; opacity: .7; margin-bottom: 6px; }
.ix-comments input:not([type="submit"]):not([type="checkbox"]),
.ix-comments textarea {
  width: 100%; padding: 15px 17px; font: inherit; font-size: 15px; color: inherit;
  background: transparent; border-radius: 10px;
  border: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 22%, transparent);
}
.ix-comments textarea { min-height: 140px; resize: vertical; }
.ix-comments .form-submit input[type="submit"] {
  padding: 16px 28px; border-radius: 500px; border: 0; cursor: pointer;
  font: inherit; font-weight: 500;
}

/* Widgets */
.ix-widget + .ix-widget { margin-top: 34px; }
.ix-widget ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ix-widget a:hover { opacity: .7; }

/* Search form */
.ix-search-form { display: flex; gap: 10px; flex-wrap: wrap; }
.ix-search-form input[type="search"] {
  flex: 1 1 220px; padding: 15px 18px; font: inherit; font-size: 15px; color: inherit;
  background: transparent; border-radius: 500px;
  border: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 25%, transparent);
}

/* Contact form validation states + honeypot */
.ix-hp { position: absolute !important; left: -9999px !important; }
.ix-field-error { display: block; font-size: 13px; color: #d3382f; margin-top: 6px; }
.ix-alert { padding: 15px 18px; border-radius: 10px; font-size: 15px; margin-bottom: 20px; }
.ix-alert--ok { background: rgba(34, 160, 90, .14); color: #157a45; }
.ix-alert--error { background: rgba(211, 56, 47, .12); color: #b3261e; }

/* Admin bar offset for the fixed header */
.admin-bar .ix-header-host { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .ix-header-host { top: 46px; } }

/* Back to top */
.ix-to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 800;
  width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center;
  background: #05080c; color: #fff;
  box-shadow: 0 10px 30px rgba(5, 8, 12, .32);
  opacity: 0; visibility: hidden; translate: 0 12px;
  transition: opacity .4s ease, translate .4s ease, visibility .4s;
}
.ix-to-top.is-visible { opacity: 1; visibility: visible; translate: 0 0; }
.ix-to-top img { width: 15px; height: 15px; }

/* ---------------------------------------------- 3. WordPress page scaffolding
   The export only ever contained a home page, so it has no markup for article
   bodies, archives or search. These few layout primitives fill that gap. They
   set no fonts or colours of their own — type and palette are inherited from
   framer.css so inner pages match the original design.
   -------------------------------------------------------------------------- */
.ix-page { padding: 190px 0 110px; }
.ix-page--dark { background: #05080c; color: #fff; }
.ix-wrap { width: 100%; max-width: 1460px; margin-inline: auto; padding-inline: 30px; }
.ix-wrap--narrow { max-width: 860px; }

.ix-page__head { display: flex; flex-direction: column; gap: 18px; margin-bottom: 56px; }
.ix-page__title { font-size: clamp(38px, 6vw, 84px); font-weight: 500; line-height: 1.05; letter-spacing: -.04em; margin: 0; }
.ix-page__intro { max-width: 60ch; opacity: .72; }

.ix-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 15px; opacity: .6; }
.ix-crumbs a:hover { opacity: 1; }

.ix-grid { display: grid; gap: 30px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ix-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1199px) { .ix-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 809px)  { .ix-grid, .ix-grid--2 { grid-template-columns: 1fr; } .ix-page { padding: 140px 0 80px; } .ix-wrap { padding-inline: 20px; } }

.ix-card { display: flex; flex-direction: column; gap: 14px; }
.ix-card__media { border-radius: 26px; overflow: hidden; aspect-ratio: 16 / 11; background: rgba(127,127,127,.12); }
.ix-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.16,1,.3,1); }
.ix-card:hover .ix-card__media img { transform: scale(1.05); }
.ix-card__meta { font-size: 14px; opacity: .6; display: flex; flex-wrap: wrap; gap: 8px; }
.ix-card__title { font-size: 22px; font-weight: 500; letter-spacing: -.03em; margin: 0; }
.ix-card__excerpt { font-size: 16px; opacity: .72; margin: 0; }

.ix-figure { border-radius: 26px; overflow: hidden; margin: 0 0 44px; }
.ix-figure img { width: 100%; height: auto; display: block; }

.ix-meta-row { display: flex; flex-wrap: wrap; gap: 14px; font-size: 15px; opacity: .65; }
.ix-prevnext { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 56px; }
@media (max-width: 809px) { .ix-prevnext { grid-template-columns: 1fr; } }
.ix-prevnext a { display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: 18px; border: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 18%, transparent); }
.ix-prevnext span { font-size: 13px; opacity: .55; }
.ix-prevnext strong { font-weight: 500; letter-spacing: -.03em; }

.ix-btn-simple {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px; border-radius: 500px;
  background: currentColor; font-size: 15px; font-weight: 500;
}
.ix-btn-simple > span { mix-blend-mode: difference; }
.ix-empty { opacity: .65; }

/* ------------------------------------------------- 4. Mobile nav drawer
   The export ships a hamburger button but no menu panel (Framer rendered that
   overlay from its runtime). This is the replacement, using the site's own
   WordPress menu and the design's palette and type.
   -------------------------------------------------------------------------- */
.ix-drawer {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; flex-direction: column; justify-content: center;
  gap: 40px; padding: 108px 26px 44px;
  background: #05080c; color: #fff;
  font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  opacity: 0; visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .65s cubic-bezier(.16,1,.3,1), opacity .35s ease, visibility .65s;
}
body.ix-nav-open .ix-drawer { opacity: 1; visibility: visible; clip-path: inset(0 0 0 0); }

.ix-drawer__nav { display: flex; flex-direction: column; gap: 2px; list-style: none; margin: 0; padding: 0; }
.ix-drawer__nav ul { list-style: none; margin: 0; padding: 0; }
.ix-drawer__nav li { list-style: none; }
.ix-drawer__nav a {
  display: block; padding: 11px 0;
  font-size: clamp(30px, 9vw, 44px); font-weight: 500;
  letter-spacing: -.04em; line-height: 1.1; color: #fff;
  opacity: 0; translate: 0 22px;
  transition: opacity .5s cubic-bezier(.16,1,.3,1), translate .5s cubic-bezier(.16,1,.3,1);
}
body.ix-nav-open .ix-drawer__nav a { opacity: 1; translate: 0 0; }
.ix-drawer__nav .sub-menu { padding-left: 16px; }
.ix-drawer__nav .sub-menu a { font-size: 20px; opacity: .7; }
.ix-drawer__nav .current-menu-item > a { opacity: .55; }

.ix-drawer__foot { display: flex; flex-direction: column; gap: 12px; font-size: 15px; color: #aaa9ad; }
.ix-drawer__foot a { color: inherit; }
.ix-drawer__foot a:hover { color: #fff; }
.ix-drawer__social { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 4px; }

/* The export's hamburger: animate its three bars into a close icon. */
[data-ix-burger] { cursor: pointer; }
[data-ix-burger] [data-framer-name="Divider"] {
  transition: transform .4s cubic-bezier(.16,1,.3,1), opacity .3s ease;
}
body.ix-nav-open [data-ix-burger] [data-framer-name="Divider"]:nth-child(1) { opacity: 0; }
body.ix-nav-open [data-ix-burger] [data-framer-name="Divider"]:nth-child(2) { transform: rotate(45deg); }
body.ix-nav-open [data-ix-burger] [data-framer-name="Divider"]:nth-child(3) { opacity: 0; }

/* Never leave the drawer visible on desktop. */
@media (min-width: 1200px) {
  .ix-drawer { display: none; }
  body.ix-nav-open { overflow: auto; }
}

/* The drawer sits outside the export's link styling, so reset decoration. */
.ix-drawer a { text-decoration: none; }
.ix-drawer__nav a:hover { opacity: .6; }
.ix-drawer__foot a { text-decoration: none; }

/* Breadcrumbs (ignitex_breadcrumb outputs .ix-breadcrumb). */
.ix-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 15px; opacity: .6; }
.ix-breadcrumb a { color: inherit; text-decoration: none; }
.ix-breadcrumb a:hover { opacity: 1; text-decoration: underline; text-underline-offset: .2em; }
.ix-breadcrumb span[aria-current] { opacity: .85; }

/* Editor headings need a scale of their own — framer.css only styles its own
   generated classes, not raw h1-h6 coming out of the block editor. */
.ix-rte h1 { font-size: clamp(34px, 4.4vw, 52px); font-weight: 500; letter-spacing: -.04em; line-height: 1.12; }
.ix-rte h2 { font-size: clamp(27px, 3.4vw, 38px); font-weight: 500; letter-spacing: -.035em; line-height: 1.15; margin-top: 1.5em; }
.ix-rte h3 { font-size: clamp(22px, 2.6vw, 28px); font-weight: 500; letter-spacing: -.03em; line-height: 1.2; margin-top: 1.4em; }
.ix-rte h4 { font-size: 21px; font-weight: 500; letter-spacing: -.03em; margin-top: 1.3em; }
.ix-rte h5, .ix-rte h6 { font-size: 18px; font-weight: 600; letter-spacing: -.02em; margin-top: 1.2em; }
.ix-rte p, .ix-rte li { font-size: 17px; }
.ix-rte > :first-child { margin-top: 0; }

/* Links inside WordPress content on the dark page background. */
.ix-page--dark .ix-rte a { color: inherit; }
.ix-page--dark .ix-card__title a,
.ix-page--dark .ix-prevnext a { text-decoration: none; }
.ix-page--dark .ix-card__title a:hover { opacity: .7; }

/* ---------------------------------------------------- 5. Client logo ticker
   The original strip scrolled continuously, driven by Framer's runtime. The
   export carries no ticker markup or keyframes, so the motion is rebuilt here.
   The wrapper is applied by JS, leaving the export's own children untouched.
   -------------------------------------------------------------------------- */
.ix-ticker {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ix-ticker__track {
  display: flex;
  flex: none;
  align-items: center;
  gap: inherit;
  animation: ix-ticker var(--ix-ticker-dur, 40s) linear infinite;
}
.ix-ticker:hover .ix-ticker__track { animation-play-state: paused; }
@keyframes ix-ticker { to { transform: translateX(-100%); } }

@media (prefers-reduced-motion: reduce) {
  .ix-ticker__track { animation: none !important; }
  .ix-ticker__track--clone { display: none; }
}