/* =============================================================================
   ITRIX — COMPONENTS & LAYOUT
   Loaded after bootstrap.min.css and theme.css.
   Everything here is driven by the tokens in theme.css — there are no raw
   hex values below except pure black/white alphas used for overlays.
   ========================================================================== */

/* ==========================================================================
   1. BASE
   ========================================================================== */
* { scroll-margin-top: 6rem; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--itx-bg);
  color: var(--itx-text);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .itx-display {
  font-family: 'Sora', 'Inter', system-ui, sans-serif;
  color: var(--itx-heading);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.12;
  text-wrap: balance;
}

h1, .itx-h1 { font-size: var(--itx-h1); font-weight: 800; letter-spacing: -0.032em; }
h2, .itx-h2 { font-size: var(--itx-h2); font-weight: 800; letter-spacing: -0.026em; }
h3, .itx-h3 { font-size: var(--itx-h3); }

p { text-wrap: pretty; }

.itx-lead {
  font-size: var(--itx-lead);
  line-height: 1.62;
  color: var(--itx-text);
}

/* Accessible skip link — visible the moment it receives focus. */
.itx-skip {
  position: fixed;
  top: 0; left: 50%;
  transform: translate(-50%, -120%);
  z-index: 2000;
  padding: .75rem 1.25rem;
  background: var(--itx-accent);
  color: var(--itx-on-accent);
  font-weight: 600;
  border-radius: 0 0 var(--itx-radius-sm) var(--itx-radius-sm);
  transition: transform .18s ease;
}
.itx-skip:focus { transform: translate(-50%, 0); color: var(--itx-on-accent); }

/* One consistent, always-visible focus ring across the whole site. */
:focus-visible {
  outline: 3px solid var(--itx-accent);
  outline-offset: 3px;
  border-radius: 4px;
}
.itx-on-ink :focus-visible { outline-color: var(--itx-accent-2); }

::selection { background: rgb(var(--itx-glow) / 22%); }

/* ==========================================================================
   2. LAYOUT PRIMITIVES
   ========================================================================== */

/* Bootstrap gives every .row a negative inline margin of half its gutter, and
   expects the parent .container's padding to cancel it out. That only balances
   when both use the same gutter value. This site uses g-5 rows (3rem gutter,
   so -24px margins) inside a default container (12px padding) — leaving a 12px
   overhang on each side, which is horizontal scroll on a phone.
   Matching the container's gutter to the largest row gutter cancels it exactly.
   Rows with smaller gutters simply sit further in, which is harmless. */
.container,
.container-fluid { --bs-gutter-x: 3rem; }
.itx-section { padding-block: var(--itx-section-y); }
.itx-section--tight { padding-block: calc(var(--itx-section-y) * .62); }
.itx-section--alt { background: var(--itx-surface-2); }

.itx-ink-band {
  background: var(--itx-ink);
  color: #CBD5E1;
  position: relative;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   .itx-on-ink is the single marker for "this section sits on the dark ink
   ground". It is what flips headings to white.

   Headings otherwise inherit var(--itx-heading), which is near-black in light
   mode — so without this every page-header H1 and every CTA heading renders
   dark-on-dark and is effectively invisible. Applied to the class rather than
   to each section type (.itx-hero, .itx-pagehead, .itx-ink-band, .itx-cta) so
   a new dark section only has to carry .itx-on-ink to be correct.
   -------------------------------------------------------------------------- */
.itx-on-ink,
.itx-ink-band { color: #CBD5E1; }

.itx-on-ink h1, .itx-on-ink h2, .itx-on-ink h3,
.itx-on-ink h4, .itx-on-ink h5, .itx-on-ink h6,
.itx-ink-band h1, .itx-ink-band h2, .itx-ink-band h3, .itx-ink-band h4 {
  color: #fff;
}

/* Body copy and lists inside a dark band. */
.itx-on-ink p,
.itx-on-ink li { color: #CBD5E1; }
.itx-on-ink strong { color: #fff; }

/* Cards deliberately keep their own light surface even on an ink band, so
   opt them back out of the inherited light-on-dark colours. */
.itx-on-ink .itx-card:not(.itx-card--ink) h1,
.itx-on-ink .itx-card:not(.itx-card--ink) h2,
.itx-on-ink .itx-card:not(.itx-card--ink) h3,
.itx-on-ink .itx-card:not(.itx-card--ink) h4 { color: var(--itx-heading); }
.itx-on-ink .itx-card:not(.itx-card--ink) p { color: var(--itx-text); }

/* Eyebrow label above a section heading. */
.itx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--itx-accent-text);
  margin-bottom: .85rem;
}
.itx-eyebrow::before {
  content: '';
  width: 26px; height: 2px;
  background: var(--itx-accent);
  border-radius: 2px;
}
.itx-on-ink .itx-eyebrow { color: var(--itx-accent-2); }
.itx-on-ink .itx-eyebrow::before { background: var(--itx-accent-2); }

.itx-section-head { max-width: 46rem; }
.itx-section-head--center { margin-inline: auto; text-align: center; }
.itx-section-head--center .itx-eyebrow::before { display: none; }

/* Gradient headline accent. Falls back to a solid colour where
   background-clip:text is unsupported. */
.itx-grad {
  color: var(--itx-accent-text);
  background: linear-gradient(100deg, var(--itx-accent), var(--itx-accent-2));
  -webkit-background-clip: text;
  background-clip: text;
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .itx-grad { -webkit-text-fill-color: transparent; color: transparent; }
  .itx-on-ink .itx-grad { background: linear-gradient(100deg, #fff, var(--itx-accent-2)); -webkit-background-clip: text; background-clip: text; }
}

/* ==========================================================================
   3. BUTTONS
   ========================================================================== */
.btn {
  --bs-btn-font-weight: 650;
  --bs-btn-padding-y: .82rem;
  --bs-btn-padding-x: 1.6rem;
  --bs-btn-border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  letter-spacing: -.005em;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease,
              background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn:active { transform: translateY(1px); }

.btn-itx {
  background: var(--itx-accent);
  color: var(--itx-on-accent);
  border: 1px solid transparent;
  box-shadow: 0 1px 2px rgb(var(--itx-glow) / 24%), 0 8px 22px rgb(var(--itx-glow) / 26%);
}
.btn-itx:hover, .btn-itx:focus-visible {
  background: var(--itx-accent-hover);
  color: var(--itx-on-accent);
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgb(var(--itx-glow) / 26%), 0 14px 32px rgb(var(--itx-glow) / 34%);
}

.btn-itx-ghost {
  background: transparent;
  color: var(--itx-accent-text);
  border: 1.5px solid var(--itx-border-2);
}
.btn-itx-ghost:hover, .btn-itx-ghost:focus-visible {
  background: var(--itx-chip-bg);
  color: var(--itx-accent-text);
  border-color: var(--itx-accent);
  transform: translateY(-2px);
}

/* Ghost button sitting on an ink background. */
.itx-on-ink .btn-itx-ghost {
  color: #fff;
  border-color: rgb(255 255 255 / 32%);
  background: rgb(255 255 255 / 6%);
  backdrop-filter: blur(6px);
}
.itx-on-ink .btn-itx-ghost:hover, .itx-on-ink .btn-itx-ghost:focus-visible {
  background: rgb(255 255 255 / 14%);
  border-color: rgb(255 255 255 / 60%);
  color: #fff;
}

.btn-lg { --bs-btn-padding-y: 1rem; --bs-btn-padding-x: 2rem; font-size: 1.03rem; }

/* Text link with a sliding arrow. */
.itx-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 650;
  color: var(--itx-accent-text);
  text-decoration: none;
}
.itx-arrow-link svg { transition: transform .2s ease; flex: none; }
.itx-arrow-link:hover svg, .itx-arrow-link:focus-visible svg { transform: translateX(4px); }
.itx-arrow-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   4. NAVBAR
   ========================================================================== */
.itx-nav {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--itx-bg);
  border-bottom: 1px solid var(--itx-border);
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
/* Over a dark hero the bar starts transparent, then solidifies on scroll.
   .is-stuck is toggled by site.js. */
.itx-nav--over-hero {
  position: fixed;
  inset-inline: 0;
  top: 0;
  background: transparent;
  border-bottom-color: transparent;
}
.itx-nav--over-hero .itx-nav-link,
.itx-nav--over-hero .itx-logo { color: #fff; }
.itx-nav--over-hero .itx-nav-toggle { color: #fff; border-color: rgb(255 255 255 / 30%); }

.itx-nav.is-stuck {
  background: color-mix(in srgb, var(--itx-bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--itx-border);
  box-shadow: var(--itx-shadow-sm);
}
.itx-nav--over-hero.is-stuck .itx-nav-link,
.itx-nav--over-hero.is-stuck .itx-logo { color: var(--itx-heading); }
.itx-nav--over-hero.is-stuck .itx-nav-toggle { color: var(--itx-heading); border-color: var(--itx-border); }

/* Browsers without color-mix get a solid bar — still correct, just not blurred. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .itx-nav.is-stuck { background: var(--itx-bg); }
}

.itx-logo {
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 1.38rem;
  letter-spacing: -.03em;
  color: var(--itx-heading);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  /* No flex `gap` here: the trailing dot is its own element, and a gap would
     push it away from the wordmark ("ITRIX ." instead of "ITRIX."). The mark
     carries its own right margin instead. */
}
.itx-logo:hover { color: var(--itx-heading); }
.itx-logo-mark { flex: none; margin-right: .55rem; }
.itx-logo-dot { color: var(--itx-accent); }
.itx-nav--over-hero:not(.is-stuck) .itx-logo-dot { color: var(--itx-accent-2); }

.itx-nav-link {
  color: var(--itx-text);
  font-weight: 550;
  font-size: .95rem;
  text-decoration: none;
  padding: .55rem .9rem;
  border-radius: 999px;
  position: relative;
  transition: color .18s ease, background-color .18s ease;
}
.itx-nav-link:hover { color: var(--itx-accent-text); background: var(--itx-chip-bg); }
.itx-nav--over-hero:not(.is-stuck) .itx-nav-link:hover {
  color: #fff; background: rgb(255 255 255 / 12%);
}
.itx-nav-link[aria-current='page'] { color: var(--itx-accent-text); font-weight: 700; }
.itx-nav--over-hero:not(.is-stuck) .itx-nav-link[aria-current='page'] { color: #fff; }
.itx-nav-link[aria-current='page']::after {
  content: '';
  position: absolute;
  left: .9rem; right: .9rem; bottom: .18rem;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: .85;
}

.itx-nav-toggle {
  border: 1.5px solid var(--itx-border);
  background: transparent;
  color: var(--itx-heading);
  border-radius: 12px;
  width: 44px; height: 44px;
  display: inline-grid;
  place-items: center;
}

/* Mode toggle */
.itx-mode-btn {
  border: 1.5px solid var(--itx-border);
  background: transparent;
  color: var(--itx-text);
  border-radius: 999px;
  width: 40px; height: 40px;
  display: inline-grid;
  place-items: center;
  flex: none;
}
.itx-mode-btn:hover { color: var(--itx-accent-text); border-color: var(--itx-accent); }
.itx-nav--over-hero:not(.is-stuck) .itx-mode-btn { color: #fff; border-color: rgb(255 255 255 / 30%); }
.itx-mode-btn .itx-icon-sun { display: none; }
:root[data-mode='dark'] .itx-mode-btn .itx-icon-sun { display: block; }
:root[data-mode='dark'] .itx-mode-btn .itx-icon-moon { display: none; }

/* Offcanvas mobile menu */
.offcanvas { background: var(--itx-bg); color: var(--itx-text); }
.offcanvas .itx-nav-link {
  display: block;
  padding: .85rem .25rem;
  border-bottom: 1px solid var(--itx-border);
  border-radius: 0;
  font-size: 1.06rem;
}
.offcanvas .itx-nav-link[aria-current='page']::after { display: none; }

/* Top contact strip.
   Lives INSIDE <header class="itx-nav">, not above it — the header is
   position:fixed over the hero, so a sibling strip in normal flow would sit
   underneath it and be clipped. Keeping them in one element means they move
   together, and the strip can collapse on scroll to reclaim the space. */
.itx-topbar {
  color: #94A3B8;
  font-size: .84rem;
  padding-block: .5rem;
  border-bottom: 1px solid rgb(255 255 255 / 10%);
  max-height: 3rem;
  overflow: hidden;
  transition: max-height .3s ease, opacity .25s ease,
              padding .3s ease, border-color .3s ease;
}
.itx-topbar a { color: #E2E8F0; text-decoration: none; font-weight: 550; }
.itx-topbar a:hover { color: #fff; text-decoration: underline; }

/* Collapse it once the visitor scrolls, so the sticky bar stays compact. */
.itx-nav.is-stuck .itx-topbar {
  max-height: 0;
  opacity: 0;
  padding-block: 0;
  border-bottom-color: transparent;
}

/* On a solid (scrolled) bar the strip needs the page's own text colours. */
.itx-nav.is-stuck .itx-topbar { color: var(--itx-text-muted); }
.itx-nav.is-stuck .itx-topbar a { color: var(--itx-text); }

@media (prefers-reduced-motion: reduce) {
  .itx-topbar { transition: none; }
}

/* ==========================================================================
   5. HERO
   ========================================================================== */
.itx-hero {
  position: relative;
  background: var(--itx-ink);
  color: #CBD5E1;
  isolation: isolate;
  /* Clears the fixed header, which is the contact strip (~33px) plus the nav
     row (~74px) on desktop. The minimum must stay above that combined height
     or the headline slides under the bar on short viewports. */
  padding-top: clamp(9rem, 6.5rem + 9vw, 12.5rem);
  padding-bottom: clamp(3.5rem, 2rem + 7vw, 6.5rem);
  overflow: hidden;
}
.itx-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.itx-hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Two-stop scrim: keeps text at AA over any photograph. */
.itx-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(105deg,
      color-mix(in srgb, var(--itx-ink) 96%, transparent) 0%,
      color-mix(in srgb, var(--itx-ink) 88%, transparent) 42%,
      color-mix(in srgb, var(--itx-ink) 58%, transparent) 72%,
      color-mix(in srgb, var(--itx-ink) 42%, transparent) 100%),
    radial-gradient(120% 90% at 78% 18%, rgb(var(--itx-glow) / 34%) 0%, transparent 62%);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .itx-hero__scrim { background: linear-gradient(105deg, rgb(0 0 0 / 90%), rgb(0 0 0 / 55%)); }
}

.itx-hero h1 { color: #fff; margin-bottom: 1.15rem; }
.itx-hero__lead {
  font-size: clamp(1.05rem, .98rem + .45vw, 1.28rem);
  color: #CBD5E1;
  max-width: 34rem;
  line-height: 1.6;
}

/* Rating pill in the hero */
.itx-rating {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .5rem .95rem .5rem .6rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 9%);
  border: 1px solid rgb(255 255 255 / 16%);
  backdrop-filter: blur(8px);
  font-size: .9rem;
  color: #E2E8F0;
}
.itx-stars { display: inline-flex; gap: 2px; color: var(--itx-star); flex: none; }
.itx-stars svg { width: 17px; height: 17px; }
.itx-rating strong { color: #fff; font-weight: 700; }

/* Floating "uptime" glass card over the hero photo */
.itx-hero__card {
  background: rgb(255 255 255 / 8%);
  border: 1px solid rgb(255 255 255 / 16%);
  backdrop-filter: blur(16px);
  border-radius: var(--itx-radius-lg);
  padding: 1.5rem;
  color: #E2E8F0;
  box-shadow: 0 24px 60px rgb(0 0 0 / 34%);
}
.itx-hero__card dt { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: #94A3B8; font-weight: 650; }
.itx-hero__card dd {
  font-family: 'Sora', sans-serif;
  font-size: 1.65rem;
  font-weight: 800;
  color: #fff;
  margin: .15rem 0 0;
  letter-spacing: -.02em;
}

/* Animated live-status dot */
.itx-pulse {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #22C55E;
  flex: none;
  position: relative;
}
.itx-pulse::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  background: #22C55E;
  animation: itx-ping 2s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes itx-ping { 75%, 100% { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .itx-pulse::after { animation: none; } }

/* Sub-hero trust strip */
.itx-trustbar {
  border-block: 1px solid var(--itx-border);
  background: var(--itx-surface-2);
  padding-block: 1.35rem;
}
.itx-trustbar__item {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .92rem;
  font-weight: 550;
  color: var(--itx-text);
}
.itx-trustbar__item svg { color: var(--itx-accent); flex: none; }

/* ==========================================================================
   6. CARDS
   ========================================================================== */
/* NOTE: no `height: 100%` here, deliberately.
   -------------------------------------------------------------------------
   Bootstrap columns are flex items and stretch to the height of the tallest
   column in the row. A card with height:100% therefore resolves to the FULL
   column height — which is right when the card is alone in its column, and
   badly wrong when several cards stack in one column: each one grows to the
   whole column height and the stack overflows into the next section.

   That's exactly what happened on the contact page, where three stacked cards
   each ballooned to ~730px and collided with the section below.

   Equal-height card grids should use Bootstrap's own `h-100` utility on the
   card instead, which is opt-in per usage. */
.itx-card {
  background: var(--itx-surface);
  border: 1px solid var(--itx-border);
  border-radius: var(--itx-radius-lg);
  padding: 1.85rem;
  position: relative;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.itx-card--hover:hover,
.itx-card--hover:focus-within {
  transform: translateY(-5px);
  box-shadow: var(--itx-shadow);
  border-color: color-mix(in srgb, var(--itx-accent) 40%, var(--itx-border));
}
.itx-card h3 { margin-bottom: .55rem; }
.itx-card p:last-child { margin-bottom: 0; }

/* Whole-card click target that keeps the real link accessible. */
.itx-stretch::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }

.itx-chip {
  width: 54px; height: 54px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: var(--itx-chip-bg);
  color: var(--itx-accent-text);
  margin-bottom: 1.15rem;
  transition: background-color .22s ease, color .22s ease, transform .22s ease;
}
.itx-card--hover:hover .itx-chip {
  background: var(--itx-accent);
  color: var(--itx-on-accent);
  transform: scale(1.06) rotate(-4deg);
}

/* Card on an ink band */
.itx-card--ink {
  background: var(--itx-ink-soft);
  border-color: var(--itx-ink-line);
  color: #CBD5E1;
}
.itx-card--ink h3, .itx-card--ink h4 { color: #fff; }
.itx-card--ink .itx-chip { background: rgb(255 255 255 / 8%); color: var(--itx-accent-2); }

/* Numbered process steps */
.itx-step { position: relative; padding-left: 4.2rem; }
.itx-step__num {
  position: absolute;
  left: 0; top: 0;
  width: 52px; height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  background: var(--itx-accent);
  color: var(--itx-on-accent);
  box-shadow: 0 6px 18px rgb(var(--itx-glow) / 32%);
}
.itx-step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 25px; top: 60px; bottom: -1.5rem;
  width: 2px;
  background: linear-gradient(var(--itx-border), transparent);
}
@media (min-width: 992px) {
  .itx-step { padding-left: 0; padding-top: 4.4rem; }
  .itx-step__num { top: 0; }
  .itx-step:not(:last-child)::before {
    left: 60px; right: -1.5rem; top: 25px; bottom: auto;
    width: auto; height: 2px;
    background: linear-gradient(90deg, var(--itx-border), transparent);
  }
}

/* ==========================================================================
   7. STATS
   ========================================================================== */
.itx-stat__value {
  font-family: 'Sora', sans-serif;
  font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1;
  color: #fff;
}
.itx-stat__label {
  font-size: .88rem;
  color: #94A3B8;
  margin-top: .5rem;
}
.itx-ink-band .itx-stat + .itx-stat { border-left: 1px solid var(--itx-ink-line); }
@media (max-width: 767.98px) {
  .itx-ink-band .itx-stat + .itx-stat { border-left: 0; }
}

/* ==========================================================================
   8. REVIEWS
   ========================================================================== */
.itx-review {
  background: var(--itx-surface);
  border: 1px solid var(--itx-border);
  border-radius: var(--itx-radius-lg);
  padding: 1.85rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}
.itx-review__quote {
  font-size: 1.02rem;
  line-height: 1.68;
  color: var(--itx-text);
  margin: 1rem 0 1.5rem;
  flex: 1;
}
.itx-review__quote::before { content: '\201C'; }
.itx-review__quote::after  { content: '\201D'; }
.itx-review__who { display: flex; align-items: center; gap: .85rem; }
.itx-avatar {
  width: 46px; height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--itx-accent);
  color: var(--itx-on-accent);
  font-weight: 700;
  font-family: 'Sora', sans-serif;
  flex: none;
  object-fit: cover;
}
.itx-review__name { font-weight: 700; color: var(--itx-heading); line-height: 1.3; }
.itx-review__meta { font-size: .85rem; color: var(--itx-text-muted); }

/* ==========================================================================
   9. PRICING
   ========================================================================== */
.itx-price-card {
  background: var(--itx-surface);
  border: 1px solid var(--itx-border);
  border-radius: var(--itx-radius-lg);
  padding: 2rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform .22s ease, box-shadow .22s ease;
}
.itx-price-card--featured {
  border-color: var(--itx-accent);
  border-width: 2px;
  box-shadow: 0 18px 48px rgb(var(--itx-glow) / 18%);
}
@media (min-width: 992px) { .itx-price-card--featured { transform: scale(1.035); } }
/* Four-up hosting row: "Medium Hosting" wraps to two lines while the others
   fit on one, and the Premium blurb runs to three lines while the others run
   to two. Left alone, that pushes each card's price to a different height and
   the row becomes hard to compare at a glance. Reserving a consistent height
   for the name and the blurb lines the prices up.
   Only above lg, where the cards sit side by side. */
@media (min-width: 992px) {
  /* Hosting: "Business Hosting" and "Premium Hosting" wrap to two lines while
     "Starter Hosting" and "Executive" fit on one, and the Executive blurb runs
     to three lines. Both need a reserved height. */
  #hosting .itx-price-card > h3 { min-height: 2.3em; }
  #hosting .itx-price-card > h3 + p { min-height: 5em; }

  /* Website packages: the names all fit on one line, so only the blurb needs
     reserving — Premium's runs to three lines where the others run to two. */
  #packages .itx-price-card > h3 + p { min-height: 5em; }
}

.itx-price-card__badge {
  position: absolute;
  top: -.85rem; left: 50%;
  transform: translateX(-50%);
  background: var(--itx-accent);
  color: var(--itx-on-accent);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: .34rem .95rem;
  border-radius: 999px;
  white-space: nowrap;
}
.itx-price {
  font-family: 'Sora', sans-serif;
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--itx-heading);
  letter-spacing: -.035em;
  line-height: 1;
}

/* A price range ("R2 999 – R5 000") is roughly twice as wide as a single
   figure and overflows a three-up column at the size above, so it steps down
   and is allowed to wrap at the dash rather than spilling out of the card. */
.itx-price--range {
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 1.95rem);
  display: block;
  white-space: nowrap;
}
.itx-price__to {
  color: var(--itx-text-muted);
  font-weight: 700;
  margin-inline: .1em;
}
.itx-price__period { font-size: .92rem; font-weight: 500; color: var(--itx-text-muted); }
.itx-price__from { font-size: .85rem; color: var(--itx-text-muted); display: block; margin-bottom: .2rem; }

.itx-ticks { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; gap: .72rem; }
.itx-ticks li { display: flex; gap: .65rem; align-items: flex-start; font-size: .95rem; }
.itx-ticks svg { color: var(--itx-accent); flex: none; margin-top: .22rem; }
.itx-ticks li.is-off { color: var(--itx-text-muted); }
.itx-ticks li.is-off svg { color: var(--itx-border-2); }

/* ==========================================================================
   10. PORTFOLIO
   ========================================================================== */
.itx-work {
  position: relative;
  border-radius: var(--itx-radius-lg);
  overflow: hidden;
  background: var(--itx-surface);
  border: 1px solid var(--itx-border);
  height: 100%;
  transition: transform .22s ease, box-shadow .22s ease;
}
.itx-work:hover { transform: translateY(-5px); box-shadow: var(--itx-shadow); }
.itx-work__img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--itx-surface-3); }
.itx-work__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.itx-work:hover .itx-work__img img { transform: scale(1.06); }
.itx-work__body { padding: 1.4rem 1.5rem 1.6rem; }
.itx-tag {
  display: inline-block;
  font-size: .74rem;
  font-weight: 650;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--itx-accent-text);
  background: var(--itx-chip-bg);
  padding: .28rem .7rem;
  border-radius: 999px;
}
@media (prefers-reduced-motion: reduce) {
  .itx-work:hover { transform: none; }
  .itx-work:hover .itx-work__img img { transform: none; }
  .itx-card--hover:hover { transform: none; }
  .btn-itx:hover { transform: none; }
}

/* ==========================================================================
   11. FAQ / ACCORDION
   ========================================================================== */
.accordion {
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-active-bg: var(--itx-chip-bg);
  --bs-accordion-active-color: var(--itx-accent-text);
  --bs-accordion-bg: var(--itx-surface);
  --bs-accordion-color: var(--itx-text);
  --bs-accordion-border-color: var(--itx-border);
  --bs-accordion-btn-color: var(--itx-heading);
  --bs-accordion-border-radius: var(--itx-radius);
}
.accordion-item { margin-bottom: .75rem; border-radius: var(--itx-radius) !important; overflow: hidden; }
.accordion-button {
  font-family: 'Sora', sans-serif;
  font-weight: 650;
  font-size: 1.03rem;
  padding: 1.2rem 1.35rem;
}
.accordion-body { padding: 0 1.35rem 1.35rem; }

/* ==========================================================================
   12. FORMS
   ========================================================================== */
.form-control, .form-select {
  background: var(--itx-surface);
  border: 1.5px solid var(--itx-border);
  color: var(--itx-heading);
  border-radius: var(--itx-radius-sm);
  padding: .82rem 1rem;
  font-size: 1rem;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.form-control::placeholder { color: var(--itx-text-muted); opacity: .85; }
.form-control:focus, .form-select:focus {
  background: var(--itx-surface);
  color: var(--itx-heading);
  border-color: var(--itx-accent);
  box-shadow: 0 0 0 4px rgb(var(--itx-glow) / 16%);
}
.form-label { font-weight: 600; color: var(--itx-heading); margin-bottom: .4rem; font-size: .93rem; }
.form-text { color: var(--itx-text-muted); }

/* Honeypot — off-screen rather than display:none, which bots detect and skip.
   aria-hidden + tabindex="-1" keep it away from assistive tech and keyboards. */
.itx-hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Verification question: answer box plus a "give me a different one" button.
   The input is deliberately narrow — the answer is at most two digits, and a
   full-width box invites people to type a sentence into it. */
.itx-captcha {
  display: flex;
  align-items: stretch;
  gap: .5rem;
}
.itx-captcha .form-control {
  max-width: 8rem;
  font-variant-numeric: tabular-nums;
}
.itx-captcha__refresh {
  flex: none;
  width: 46px;
  border: 1.5px solid var(--itx-border);
  border-radius: var(--itx-radius-sm);
  background: transparent;
  color: var(--itx-text-muted);
  display: grid;
  place-items: center;
  transition: color .16s ease, border-color .16s ease, background-color .16s ease;
}
.itx-captcha__refresh:hover,
.itx-captcha__refresh:focus-visible {
  color: var(--itx-accent-text);
  border-color: var(--itx-accent);
  background: var(--itx-chip-bg);
}

.itx-form-note {
  font-size: .87rem;
  color: var(--itx-text-muted);
}
.itx-alert {
  border-radius: var(--itx-radius-sm);
  padding: .95rem 1.15rem;
  font-size: .95rem;
  border: 1px solid transparent;
  display: flex;
  gap: .7rem;
  align-items: flex-start;
}
.itx-alert svg { flex: none; margin-top: .15rem; }
.itx-alert--ok  { background: #ECFDF5; border-color: #A7F3D0; color: #065F46; }
.itx-alert--err { background: #FEF2F2; border-color: #FECACA; color: #991B1B; }
:root[data-mode='dark'] .itx-alert--ok  { background: #052E23; border-color: #065F46; color: #6EE7B7; }
:root[data-mode='dark'] .itx-alert--err { background: #3B0A0A; border-color: #7F1D1D; color: #FCA5A5; }
@media (prefers-color-scheme: dark) {
  :root[data-mode='auto'] .itx-alert--ok  { background: #052E23; border-color: #065F46; color: #6EE7B7; }
  :root[data-mode='auto'] .itx-alert--err { background: #3B0A0A; border-color: #7F1D1D; color: #FCA5A5; }
}

/* ==========================================================================
   13. SALES TEAM
   ========================================================================== */
.itx-person {
  background: var(--itx-surface);
  border: 1px solid var(--itx-border);
  border-radius: var(--itx-radius-lg);
  padding: 1.6rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.itx-person:hover { transform: translateY(-4px); box-shadow: var(--itx-shadow); }
.itx-person--primary { border-color: var(--itx-accent); box-shadow: 0 10px 30px rgb(var(--itx-glow) / 14%); }
.itx-person__top { display: flex; align-items: center; gap: 1rem; }
.itx-person__avatar {
  width: 62px; height: 62px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 1.35rem;
  background: linear-gradient(135deg, var(--itx-accent), var(--itx-accent-2));
  color: var(--itx-on-accent);
  object-fit: cover;
}
.itx-person__name { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1.12rem; color: var(--itx-heading); line-height: 1.25; }
.itx-person__role { font-size: .87rem; color: var(--itx-accent-text); font-weight: 600; }
.itx-person__links { display: grid; gap: .5rem; margin-top: auto; }
.itx-person__link {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .93rem;
  font-weight: 550;
  color: var(--itx-text);
  text-decoration: none;
  padding: .6rem .8rem;
  border-radius: var(--itx-radius-sm);
  background: var(--itx-surface-2);
  border: 1px solid transparent;
  word-break: break-word;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.itx-person__link:hover { background: var(--itx-chip-bg); color: var(--itx-accent-text); border-color: var(--itx-accent); }
.itx-person__link svg { flex: none; color: var(--itx-accent-text); }

/* ==========================================================================
   14. FOOTER
   ========================================================================== */
.itx-footer { background: var(--itx-ink); color: #94A3B8; padding-top: 4.5rem; }
.itx-footer h2, .itx-footer h3, .itx-footer .itx-footer__head {
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  margin-bottom: 1.15rem;
  font-family: 'Inter', sans-serif;
}
.itx-footer a { color: #CBD5E1; text-decoration: none; }
.itx-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.itx-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .68rem; font-size: .94rem; }
.itx-footer__bottom {
  border-top: 1px solid var(--itx-ink-line);
  margin-top: 3rem;
  padding-block: 1.6rem;
  font-size: .87rem;
}
.itx-social {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: rgb(255 255 255 / 7%);
  color: #E2E8F0 !important;
  transition: background-color .18s ease, transform .18s ease;
}
.itx-social:hover { background: var(--itx-accent); color: var(--itx-on-accent) !important; transform: translateY(-2px); }

/* ==========================================================================
   15. CTA BAND
   ========================================================================== */
.itx-cta {
  position: relative;
  background: var(--itx-ink);
  overflow: hidden;
  isolation: isolate;
}
.itx-cta::before {
  content: '';
  position: absolute;
  inset: -40% -10% auto auto;
  width: 60rem; height: 60rem;
  z-index: -1;
  background: radial-gradient(circle, rgb(var(--itx-glow) / 38%) 0%, transparent 62%);
}

/* ==========================================================================
   16. BREADCRUMB / PAGE HEADER
   ========================================================================== */
.itx-pagehead {
  background: var(--itx-ink);
  color: #CBD5E1;
  padding-top: clamp(8.5rem, 6.5rem + 7vw, 11rem);
  padding-bottom: clamp(2.75rem, 2rem + 4vw, 4.5rem);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.itx-pagehead::before {
  content: '';
  position: absolute;
  inset: auto auto -60% -10%;
  width: 46rem; height: 46rem;
  z-index: -1;
  background: radial-gradient(circle, rgb(var(--itx-glow) / 30%) 0%, transparent 64%);
}
.breadcrumb { --bs-breadcrumb-divider-color: #64748B; font-size: .88rem; margin: 0; }
.breadcrumb a { color: #CBD5E1; text-decoration: none; }
.breadcrumb a:hover { color: #fff; text-decoration: underline; }
.breadcrumb-item.active { color: #94A3B8; }
.breadcrumb-item + .breadcrumb-item::before { color: #64748B; }

/* ==========================================================================
   17. ARTICLE / BLOG
   ========================================================================== */
.itx-prose { max-width: 44rem; font-size: 1.06rem; line-height: 1.78; }
.itx-prose h2 { margin-top: 2.6rem; margin-bottom: 1rem; font-size: clamp(1.45rem, 1.2rem + 1.1vw, 1.9rem); }
.itx-prose h3 { margin-top: 2rem; margin-bottom: .75rem; }
.itx-prose p { margin-bottom: 1.3rem; }
.itx-prose ul, .itx-prose ol { margin-bottom: 1.4rem; padding-left: 1.3rem; }
.itx-prose li { margin-bottom: .55rem; }
.itx-prose a { color: var(--itx-accent-text); text-underline-offset: 3px; }
.itx-prose img { border-radius: var(--itx-radius); margin-block: 1.8rem; }
.itx-prose blockquote {
  border-left: 3px solid var(--itx-accent);
  padding: .3rem 0 .3rem 1.4rem;
  margin: 1.8rem 0;
  font-size: 1.14rem;
  color: var(--itx-heading);
  font-style: italic;
}
.itx-prose code {
  background: var(--itx-surface-3);
  padding: .16em .42em;
  border-radius: 5px;
  font-size: .9em;
  color: var(--itx-accent-text);
}

.itx-post-card__img { aspect-ratio: 16 / 9; overflow: hidden; background: var(--itx-surface-3); }
.itx-post-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.itx-work:hover .itx-post-card__img img { transform: scale(1.05); }

/* ==========================================================================
   18. 404
   ========================================================================== */
.itx-404__code {
  font-family: 'Sora', sans-serif;
  font-size: clamp(6rem, 3rem + 18vw, 14rem);
  font-weight: 800;
  line-height: .85;
  letter-spacing: -.06em;
  background: linear-gradient(135deg, var(--itx-accent), var(--itx-accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ==========================================================================
   19. REVEAL ON SCROLL
   Progressive enhancement: .itx-reveal only hides content once site.js adds
   .itx-js to <html>, so a JS-off or failed-script visitor sees everything.
   ========================================================================== */
.itx-js .itx-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .62s cubic-bezier(.16,1,.3,1), transform .62s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
.itx-js .itx-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .itx-js .itx-reveal { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   20. UTILITIES
   ========================================================================== */
.itx-maxw-sm { max-width: 34rem; }
.itx-maxw-md { max-width: 46rem; }
.itx-maxw-lg { max-width: 58rem; }
.itx-divider { height: 1px; background: var(--itx-border); border: 0; opacity: 1; }
.itx-text-muted { color: var(--itx-text-muted) !important; }
.itx-on-ink .itx-text-muted { color: #94A3B8 !important; }

/* Anything inside .itx-hide-empty is removed by site.js when its config value
   is blank — used for optional social links and the VAT number. */
[hidden] { display: none !important; }

@media print {
  .itx-nav, .itx-topbar, .itx-footer, .itx-cta, .itx-skip { display: none !important; }
  body { color: #000; background: #fff; }
}