/*
 * Navigation behaviour for the ported design.
 *
 * The prototype showed one mega menu at a time from React state. Server-side we
 * render all seven so their links live in the HTML and are crawlable — so
 * something has to own visibility, or every panel paints at once stacked over
 * the page. That is this file.
 *
 * Hover opens on pointer devices; :focus-within keeps it keyboard-accessible
 * without JavaScript. design-nav.js layers on click/Escape and the mobile
 * toggle for touch, where :hover is unreliable.
 */

/* ── Design isolation ───────────────────────────────────────────────────── */

/*
 * There is deliberately NO element-level override here.
 *
 * An earlier attempt reset `.itc-design h1/a/button { color: inherit }` to undo
 * theme.css. That selector has specificity 0-1-1 and so also beat the DESIGN's
 * own single-class rules (0-1-0) — `.topinfo-link { color:#D6DCE6 }` lost, and
 * the top bar's email and phone links went invisible.
 *
 * The scaffold is scoped at source instead: theme.css's five bare-element rules
 * now live under `.itc-scaffold`, which only the un-ported templates carry. The
 * design's CSS is therefore free to work exactly as authored, with nothing
 * competing against it.
 */

/* ── Anchors minted from divs/buttons ───────────────────────────────────── */

/*
 * The port turns clickable cards into real <a> elements so they are crawlable.
 * That hands them two browser defaults the original <div> never had:
 *   - link blue, which repainted card headings that relied on inheriting white;
 *   - display:inline, which collapsed grid cards and let siblings overlap them.
 * Reset both. Scoped to the anchors WE created, so the design's own anchors keep
 * their authored colours.
 */
.itc-card-link,
.itc-btn-link {
	color: inherit;
	text-decoration: none;
}

/* Was a <div>: a block-level card. Without this it collapses to inline and the
   next element overlaps it. */
.itc-card-link {
	display: block;
}

/*
 * Was a <button>: shrink-wraps its label. `display:block` here stretched CTAs
 * like "See all products" across the full container width.
 *
 * Set the display fallback and NOTHING else. An earlier version also declared
 * `align-items:center; justify-content:center`, which looked harmless but was
 * not: mega-menu items carry inline `display:flex; width:100%` and no
 * justify-content of their own, so the centring rule applied and staggered
 * every row by its own content width. Alignment belongs to the element's own
 * styles — this class only supplies what the tag change took away.
 */
.itc-btn-link {
	display: inline-flex;
}

/*
 * …except where the "button" was really a CARD.
 *
 * Ten anchors carry a tag chip, a heading and a "Read more" row as BLOCK
 * children. inline-flex turns those into flex items, so the insight cards
 * ("Latest thinking") rendered chip, title and link squashed onto one line and
 * shrink-wrapped to their content instead of filling the grid cell.
 *
 * Scoped to these two class combinations on purpose: both are used ONLY on card
 * anchors — 10 of 10 contain block children, none are text-only — so this cannot
 * reach the 245 text-only buttons that legitimately want to shrink-wrap.
 */
.itc-btn-link.itc-h-65,
.itc-btn-link.prod-card {
	display: block;
}

/* ── Mega menus ─────────────────────────────────────────────────────────── */

.itc-navitem {
	position: relative;
}

.itc-mega {
	visibility: hidden;
	opacity: 0;
	transform: translateY(-6px);
	pointer-events: none;
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
	z-index: 120;
}

.itc-navitem:hover > .itc-mega,
.itc-navitem:focus-within > .itc-mega,
.itc-navitem.is-open > .itc-mega {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/*
 * The trigger is an <a> to a real page, so a click navigates. On touch that
 * makes the menu unreachable; design-nav.js sets .is-open on first tap and
 * lets the second tap through.
 */
.itc-navlink {
	cursor: pointer;
}

/* Hover styling the design expressed via a non-standard style-hover attribute,
   which does nothing in a browser. Reinstated here. */
.itc-navlink:hover,
.itc-navitem.is-open > .itc-navlink {
	background: #F5FBE6;
	color: #0A0E17;
	box-shadow: inset 0 -2px 0 0 #A6D82F;
}

/* ── Mobile panel ───────────────────────────────────────────────────────── */

.itc-mobile-panel {
	display: none;
}

.itc-mobile-panel.is-open {
	display: flex;
}

@media (min-width: 1025px) {
	.itc-mobile-panel {
		display: none !important;
	}
}

/* ── Overlays: cookie banner and exit promo ─────────────────────────────── */

/*
 * These carry an inline `display:flex` from the design. The browser's built-in
 * `[hidden] { display: none }` is a normal author-level default and an INLINE
 * style always beats it — so setting `.hidden = true` in JS did nothing: the
 * promo appeared on load and its close button looked broken.
 *
 * !important is the correct tool here precisely because we must outrank an
 * inline style we do not control.
 */
.itc-promo[hidden],
.itc-cookie[hidden] {
	display: none !important;
}

/* ── Switchable panels ──────────────────────────────────────────────────── */

/*
 * Exactly the same trap. `.dlv-detail` carries an inline `display:grid`, so
 * setting `.hidden = true` on a process-phase panel did nothing and all six
 * rendered at once. Industry panels are included for the same reason — their
 * markup could gain an inline display at any time.
 *
 * The generic tab panels are here for a reason worth remembering: the solution
 * tabs have no inline display and hid correctly, while the journey stages carry
 * `display:flex` and rendered all 18 stacked. Identical markup, opposite
 * outcomes — which is how this trap keeps going unnoticed.
 */
.itc-step-panel[hidden],
.itc-ind-panel[hidden],
.itc-design [data-itc-panel][hidden] {
	display: none !important;
}

/* The timeline fill animates as the phase changes. */
.dlv-fill {
	transition: width .35s ease;
}

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

/* ── Floating actions vs. back-to-top ───────────────────────────────────── */

/*
 * Two separate features both anchor to the bottom-right corner: the scaffold's
 * call/WhatsApp buttons and the design's #back-to-top. They were stacking on
 * top of each other. Lay them out as one column, back-to-top lowest, so both
 * stay reachable.
 */
/* Order bottom-up: call, WhatsApp, then back-to-top highest. */
.float-actions {
	position: fixed;
	right: 26px;
	bottom: 26px;
	z-index: 109;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/*
 * Clears both 52px float buttons plus their gap.
 *
 * !important is required, not lazy: the design ships this button with an INLINE
 * `bottom:26px`, and an inline style outranks any selector — even `#back-to-top`
 * at 1-0-0. Without it the arrow stays pinned to the corner, on top of the
 * WhatsApp icon.
 */
#back-to-top {
	right: 26px !important;
	bottom: 154px !important;
}

@media (max-width: 640px) {
	.float-actions {
		right: 16px;
		bottom: 16px;
	}

	#back-to-top {
		right: 16px !important;
		bottom: 138px !important;
	}
}

/* ── Media placeholders ─────────────────────────────────────────────────── */

/* Unfilled design media slots: hold the box rather than collapse the layout. */
img.itc-media {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */

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

/* ── Social-proof toasts ────────────────────────────────────────────────── */

.itc-toasts {
	position: fixed;
	/* Left-hand side: the right edge belongs to the call/WhatsApp/arrow column. */
	left: 22px;
	bottom: 24px;
	z-index: 108;
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 340px;
	pointer-events: none;
}

.itc-toast {
	pointer-events: auto;
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 13px 12px 13px 14px;
	border-radius: 14px;
	background: #0A0E17;
	border: 1px solid rgba(198, 242, 78, 0.32);
	box-shadow: 0 22px 44px -22px rgba(10, 14, 23, 0.7);
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .32s ease, transform .32s ease;
}

.itc-toast.is-in {
	opacity: 1;
	transform: translateY(0);
}

.itc-toast__link {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	text-decoration: none;
	flex: 1;
}

.itc-toast__icon {
	flex: none;
	font-size: 17px;
	line-height: 1.3;
}

.itc-toast__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.itc-toast__title {
	font-size: 13px;
	font-weight: 700;
	color: #EDF1F7;
	line-height: 1.35;
}

.itc-toast__text {
	font-size: 12.5px;
	color: #98A2B3;
	line-height: 1.45;
}

.itc-toast__cta {
	margin-top: 4px;
	font-size: 12.5px;
	font-weight: 700;
	color: #C6F24E;
}

.itc-toast__close {
	flex: none;
	width: 22px;
	height: 22px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.07);
	color: #98A2B3;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
}

.itc-toast__close:hover {
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
}

@media (max-width: 640px) {
	.itc-toasts {
		left: 12px;
		right: 12px;
		max-width: none;
		bottom: 16px;
	}
}

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

/* ── WordPress global styles vs. inline transitions ─────────────────────── */

/*
 * WordPress's block global styles ship this:
 *
 *   html :where([style*=border-color]) { border-style: solid }
 *   html :where([style*=border-width]) { border-style: solid }
 *
 * It is a SUBSTRING match on the whole style attribute, and it does not care
 * where in the attribute the text appears. The design animates its tab
 * underlines with `transition: color .2s, border-color .2s` — which contains
 * the literal "border-color" — so WordPress gave 98 elements
 * `border-style: solid` on all four sides. With no width declared that resolves
 * to the initial `medium` (~3px) in `currentColor`, which is why the sticky
 * sub-nav tabs rendered as boxes around each label.
 *
 * Resetting it here rather than editing 98 generated templates: this survives a
 * re-run of the design pipeline, which would reintroduce the transitions.
 *
 * Safe because every element the rule catches already declares its real border
 * inline, and inline styles win — so only the sides WordPress wrongly switched
 * on are affected. Verified: 0 of the 98 declare `border-color` for real, and no
 * class supplies a top/right/left border to any of them.
 */
.itc-design [style*="border-color"],
.itc-design [style*="border-width"] {
	border-style: none;
}

/* ── In-page section anchors ────────────────────────────────────────────── */

/*
 * The sub-nav ("What we do", "Methodology", "Packages", "FAQ") scrolls to a
 * section on the same page.
 *
 * NOT sticky. The design shipped it as `position:sticky; top:0; z-index:40`,
 * but the site header is also sticky at `top:0` with `z-index:60` — so the bar
 * slid under the header and then floated across the page content as you
 * scrolled. It stays where it belongs, just under the stats band. The inline
 * `position:sticky` needs !important to be overridden.
 *
 * Anything scrolled to still has to clear the sticky HEADER, or the heading you
 * asked for ends up hidden behind it. --itc-header-h is measured at runtime by
 * design-nav.js because the header changes height across breakpoints; the
 * fallback here matches the desktop header so anchors are correct before the
 * script runs.
 */
:root {
	--itc-header-h: 96px;
}

.itc-design .cons-jumpwrap {
	position: static !important;
}

.itc-design [id] {
	scroll-margin-top: calc(var(--itc-header-h) + 16px);
}

html {
	scroll-behavior: smooth;
}

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

/* ── Event rows ─────────────────────────────────────────────────────────── */

/*
 * Each row carries its type's colour as --itc-accent (set inline from the
 * record), so the hover border matches the badge instead of every row turning
 * the same pale blue. Beats `.itc-h-30:hover` (0-2-0) on specificity.
 */
.itc-design .event-row {
	transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.itc-design .event-row:hover,
.itc-design .itc-event-link:focus-visible .event-row {
	border-color: var(--itc-accent, #2F54FF);
	box-shadow: 0 22px 44px -30px rgba(10, 14, 23, 0.45);
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	.itc-design .event-row {
		transition: none;
	}

	.itc-design .event-row:hover {
		transform: none;
	}
}

/* ── Mobile drawer ──────────────────────────────────────────────────────── */

/*
 * The design ships the panel with an inline `display:flex` because React
 * decided when to render it. Server-side it therefore sat permanently open,
 * pushing the whole page down the screen on every phone — and design.css only
 * hides it at >=961px, so nothing closed it where it mattered.
 *
 * !important because we are outranking an inline style.
 */
.itc-design .itc-mobile-panel {
	display: none !important;
}

.itc-design .itc-mobile-panel.is-open {
	display: flex !important;
	max-height: calc(100vh - var(--itc-header-h, 96px));
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* The burger is hidden inline too; design.css reveals it under 960px. */
@media (max-width: 960px) {
	.itc-design .burger {
		display: inline-flex !important;
	}
}

/* Drawer sub-menus, built from the mega panels by design-nav.js: the whole
   row is the toggle (chevron turns), the section page is the first link. */
.itc-design .itc-m-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	min-height: 48px;
	padding: 12px 4px;
	background: none;
	border: 0;
	border-bottom: 1px solid #F0F2F7;
	font: inherit;
	font-size: 16px;
	font-weight: 500;
	color: #1B2230;
	text-align: left;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.itc-design .itc-m-toggle[aria-expanded="true"] {
	color: #2F54FF;
	border-bottom-color: transparent;
}

.itc-design .itc-m-chev {
	flex: none;
	width: 9px;
	height: 9px;
	margin-right: 6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform .2s ease;
	opacity: .7;
}

.itc-design .itc-m-toggle[aria-expanded="true"] .itc-m-chev {
	transform: translateY(2px) rotate(-135deg);
}

.itc-design .itc-m-sub {
	display: none;
	flex-direction: column;
	padding: 2px 0 10px 12px;
	border-left: 2px solid #EEF1FF;
	margin: 0 0 8px 4px;
}

.itc-design .itc-m-sub.is-open {
	display: flex;
}

.itc-design .itc-m-sub a {
	padding: 11px 4px;
	font-size: 14.5px;
	line-height: 1.35;
	color: #5B6472;
	text-decoration: none;
}

.itc-design .itc-m-sub a.itc-m-all {
	font-weight: 700;
	color: #2F54FF;
}

.itc-design .itc-m-sub a:hover,
.itc-design .itc-m-sub a:focus-visible {
	color: #2F54FF;
}

@media (prefers-reduced-motion: reduce) {
	.itc-design .itc-m-chev { transition: none; }
}

/* ── Small screens: never scroll sideways ───────────────────────────────── */

/*
 * A decorative element occasionally bleeds a few pixels past the viewport (the
 * contact page was 7px over), which on a phone turns into a page that drifts
 * horizontally under the thumb.
 *
 * `clip` rather than `hidden` on purpose: `overflow:hidden` on a root element
 * makes it a scroll container, which silently kills `position:sticky` — and the
 * header, the mega menus and the section anchors all depend on it.
 */
@media (max-width: 960px) {
	html,
	body {
		overflow-x: clip;
		max-width: 100%;
	}
}

/* Belt and braces for the mega panels: never wider than the viewport. */
.itc-design .itc-mega {
	max-width: calc(100vw - 32px);
}

/* ── Brand logos on dark badges ─────────────────────────────────────────── */

/*
 * simple-icons ships every logo as solid BLACK on transparent, and the design
 * sits them on a near-black badge — so rendering the real logo produced an
 * invisible one. Invert to white.
 *
 * Scoped to the badges we know are dark rather than applied to every brand
 * icon, so a logo on a light surface is never inverted into invisibility.
 */
.itc-design .itc-h-38 .itc-brand-icon,
.itc-design .ally-chip .itc-brand-icon,
.itc-design .orbit-node .itc-brand-icon {
	filter: brightness(0) invert(1);
	opacity: .92;
}

/* ── Alliances orbit ────────────────────────────────────────────────────── */

/*
 * Geometry and the orbSpin animation live inline in isAlliances.php, matching
 * the prototype exactly. Only the chip and core skins are here.
 */
.itc-design .ally-orbit__chip {
	width: 58px;
	height: 58px;
	border-radius: 16px;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .14);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 12px 30px -14px rgba(0, 0, 0, .6);
}

.itc-design .ally-orbit__chip .itc-brand-icon {
	width: 26px;
	height: 26px;
	filter: invert(1);
	opacity: .92;
}

.itc-design .ally-orbit__core {
	width: 116px;
	height: 116px;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	text-align: center;
	color: #fff;
	background: radial-gradient(120% 120% at 30% 20%, #2F54FF, #10184A 70%);
	box-shadow: 0 18px 44px -18px rgba(47, 84, 255, .8), inset 0 0 0 1px rgba(255, 255, 255, .16);
}

.itc-design .ally-orbit__core strong { font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.itc-design .ally-orbit__core small  { font-size: 9px; letter-spacing: .16em; color: #C6F24E; }

/* The rings turn forever; respect a reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
	.itc-design .ally-orbit * {
		animation: none !important;
	}
}

/* ── Hover states the design lost to its own inline styles ──────────────── */

/*
 * design-hover.css holds the real hover looks, but the design also writes the
 * same properties INLINE on those elements — and an inline style beats any
 * stylesheet rule. 360 declarations therefore never applied: buttons turned
 * into solid blocks (background changed, text colour did not), and the border
 * highlight that is this design's most common hover simply never appeared.
 *
 * Note border-color is beaten by the `border:` SHORTHAND, not by a matching
 * longhand — which is why a first pass looking only for `border-color:` in the
 * inline style missed 101 of these.
 *
 * Re-declared with !important, which is the right tool precisely because we
 * must outrank an inline style we do not control. `transform` is left alone (it
 * was beaten once and is animation, not colour), and itc-h-30 keeps its
 * border-color free so the per-type event-row accent above still wins.
 *
 * Generated from design-hover.css — regenerate if that file changes.
 */
.itc-design .itc-h-0:hover,
.itc-design .itc-h-0:focus-visible {
	background: #D4F76A !important;
}
.itc-design .itc-h-1:hover,
.itc-design .itc-h-1:focus-visible {
	background: rgba(255,255,255,0.12) !important;
}
.itc-design .itc-h-2:hover,
.itc-design .itc-h-2:focus-visible {
	background: rgba(255,255,255,0.1) !important;
	border-color: rgba(255,255,255,0.3) !important;
}
.itc-design .itc-h-3:hover,
.itc-design .itc-h-3:focus-visible {
	color: #1E3FE0 !important;
}
.itc-design .itc-h-4:hover,
.itc-design .itc-h-4:focus-visible {
	box-shadow: 0 26px 54px -30px rgba(10,14,23,0.4) !important;
}
.itc-design .itc-h-5:hover,
.itc-design .itc-h-5:focus-visible {
	border-color: rgba(198,242,78,0.45) !important;
	box-shadow: 0 34px 66px -34px rgba(0,0,0,0.85) !important;
}
.itc-design .itc-h-6:hover,
.itc-design .itc-h-6:focus-visible {
	border-color: #2F54FF !important;
	box-shadow: 0 22px 46px -30px rgba(10,14,23,0.4) !important;
}
.itc-design .itc-h-7:hover,
.itc-design .itc-h-7:focus-visible {
	box-shadow: 0 16px 32px -12px rgba(198,242,78,0.6) !important;
}
.itc-design .itc-h-8:hover,
.itc-design .itc-h-8:focus-visible {
	background: rgba(255,255,255,0.13) !important;
}
.itc-design .itc-h-9:hover,
.itc-design .itc-h-9:focus-visible {
	border-color: #2F54FF !important;
	box-shadow: 0 20px 44px -28px rgba(47,84,255,0.4) !important;
}
.itc-design .itc-h-10:hover,
.itc-design .itc-h-10:focus-visible {
	box-shadow: 0 20px 44px -28px rgba(47,84,255,0.4) !important;
}
.itc-design .itc-h-11:hover,
.itc-design .itc-h-11:focus-visible {
	border-color: #2F54FF !important;
	box-shadow: 0 24px 50px -30px rgba(10,14,23,0.4) !important;
}
.itc-design .itc-h-12:hover,
.itc-design .itc-h-12:focus-visible {
	border-color: #D3DEFF !important;
	box-shadow: 0 34px 60px -34px rgba(10,14,23,0.32) !important;
}
.itc-design .itc-h-13:hover,
.itc-design .itc-h-13:focus-visible {
	color: #2F54FF !important;
	border-color: #2F54FF !important;
}
.itc-design .itc-h-14:hover,
.itc-design .itc-h-14:focus-visible {
	color: #0A0E17 !important;
	background: #F0F2F7 !important;
}
.itc-design .itc-h-15:hover,
.itc-design .itc-h-15:focus-visible {
	background: rgba(255,255,255,0.07) !important;
	border-color: rgba(198,242,78,0.5) !important;
}
.itc-design .itc-h-16:hover,
.itc-design .itc-h-16:focus-visible {
	color: #fff !important;
	background: #0A0E17 !important;
}
.itc-design .itc-h-17:hover,
.itc-design .itc-h-17:focus-visible {
	background: #1B2230 !important;
}
.itc-design .itc-h-18:hover,
.itc-design .itc-h-18:focus-visible {
	color: #fff !important;
}
.itc-design .itc-h-19:hover,
.itc-design .itc-h-19:focus-visible {
	background: rgba(255,255,255,0.11) !important;
	border-color: rgba(255,255,255,0.3) !important;
}
.itc-design .itc-h-20:hover,
.itc-design .itc-h-20:focus-visible {
	background: rgba(255,255,255,0.11) !important;
}
.itc-design .itc-h-21:hover,
.itc-design .itc-h-21:focus-visible {
	border-color: #C6F24E !important;
	box-shadow: 0 22px 44px -28px rgba(10,14,23,0.4) !important;
}
.itc-design .itc-h-22:hover,
.itc-design .itc-h-22:focus-visible {
	background: rgba(255,255,255,0.09) !important;
	border-color: rgba(198,242,78,0.4) !important;
}
.itc-design .itc-h-23:hover,
.itc-design .itc-h-23:focus-visible {
	border-color: #D3DEFF !important;
	box-shadow: 0 40px 84px -40px rgba(10,14,23,0.4) !important;
}
.itc-design .itc-h-24:hover,
.itc-design .itc-h-24:focus-visible {
	border-color: #D3DEFF !important;
	box-shadow: 0 30px 56px -34px rgba(10,14,23,0.32) !important;
}
.itc-design .itc-h-25:hover,
.itc-design .itc-h-25:focus-visible {
	background: #b6e83a !important;
}
.itc-design .itc-h-26:hover,
.itc-design .itc-h-26:focus-visible {
	color: #2F54FF !important;
}
.itc-design .itc-h-27:hover,
.itc-design .itc-h-27:focus-visible {
	color: #2F54FF !important;
	background: #F5F7FF !important;
	border-color: #2F54FF !important;
}
.itc-design .itc-h-28:hover,
.itc-design .itc-h-28:focus-visible {
	border-color: #C6F24E !important;
}
.itc-design .itc-h-29:hover,
.itc-design .itc-h-29:focus-visible {
	border-color: #D3DEFF !important;
	box-shadow: 0 28px 52px -34px rgba(10,14,23,0.28) !important;
}
.itc-design .itc-h-30:hover,
.itc-design .itc-h-30:focus-visible {
	box-shadow: 0 24px 46px -34px rgba(10,14,23,0.3) !important;
}
.itc-design .itc-h-31:hover,
.itc-design .itc-h-31:focus-visible {
	box-shadow: 0 20px 38px -10px rgba(47,84,255,0.8) !important;
}
.itc-design .itc-h-32:hover,
.itc-design .itc-h-32:focus-visible {
	background: rgba(255,255,255,0.05) !important;
}
.itc-design .itc-h-33:hover,
.itc-design .itc-h-33:focus-visible {
	border-color: rgba(198,242,78,0.5) !important;
	box-shadow: 0 30px 60px -34px rgba(0,0,0,0.8) !important;
}
.itc-design .itc-h-34:hover,
.itc-design .itc-h-34:focus-visible {
	box-shadow: 0 18px 40px -30px rgba(10,14,23,0.4) !important;
}
.itc-design .itc-h-35:hover,
.itc-design .itc-h-35:focus-visible {
	background: #FAFBFE !important;
}
.itc-design .itc-h-36:hover,
.itc-design .itc-h-36:focus-visible {
	color: #fff !important;
	background: #0A0E17 !important;
	border-color: #2F54FF !important;
}
.itc-design .itc-h-37:hover,
.itc-design .itc-h-37:focus-visible {
	border-color: #D3DEFF !important;
	box-shadow: 0 28px 52px -34px rgba(10,14,23,0.3) !important;
}
.itc-design .itc-h-38:hover,
.itc-design .itc-h-38:focus-visible {
	border-color: #D3DEFF !important;
	box-shadow: 0 30px 56px -34px rgba(10,14,23,0.32) !important;
}
.itc-design .itc-h-39:hover,
.itc-design .itc-h-39:focus-visible {
	color: #fff !important;
	border-color: #C6F24E !important;
}
.itc-design .itc-h-40:hover,
.itc-design .itc-h-40:focus-visible {
	box-shadow: 0 22px 44px -30px rgba(10,14,23,0.4) !important;
}
.itc-design .itc-h-43:hover,
.itc-design .itc-h-43:focus-visible {
	box-shadow: 0 24px 48px -32px rgba(10,14,23,0.4) !important;
}
.itc-design .itc-h-44:hover,
.itc-design .itc-h-44:focus-visible {
	border-color: #2F54FF !important;
	box-shadow: 0 14px 28px -20px rgba(47,84,255,0.6) !important;
}
.itc-design .itc-h-45:hover,
.itc-design .itc-h-45:focus-visible {
	background: rgba(255,255,255,0.12) !important;
	border-color: rgba(198,242,78,0.4) !important;
}
.itc-design .itc-h-46:hover,
.itc-design .itc-h-46:focus-visible {
	border-color: rgba(198,242,78,0.4) !important;
}
.itc-design .itc-h-47:hover,
.itc-design .itc-h-47:focus-visible {
	box-shadow: 0 16px 40px -12px rgba(198,242,78,0.6) !important;
}
.itc-design .itc-h-48:hover,
.itc-design .itc-h-48:focus-visible {
	color: #fff !important;
	border-color: #C6F24E !important;
}
.itc-design .itc-h-50:hover,
.itc-design .itc-h-50:focus-visible {
	box-shadow: 0 20px 40px -30px rgba(10,14,23,0.4) !important;
}
.itc-design .itc-h-51:hover,
.itc-design .itc-h-51:focus-visible {
	color: #C6F24E !important;
	border-color: rgba(198,242,78,0.4) !important;
}
.itc-design .itc-h-52:hover,
.itc-design .itc-h-52:focus-visible {
	color: #0A0E17 !important;
	border-color: #2F54FF !important;
}
.itc-design .itc-h-53:hover,
.itc-design .itc-h-53:focus-visible {
	background: #1E3FE0 !important;
}
.itc-design .itc-h-54:hover,
.itc-design .itc-h-54:focus-visible {
	border-color: var(--tint) !important;
	box-shadow: 0 22px 40px -26px var(--tint) !important;
}
.itc-design .itc-h-55:hover,
.itc-design .itc-h-55:focus-visible {
	background: rgba(255,255,255,0.07) !important;
	border-color: rgba(198,242,78,0.45) !important;
}
.itc-design .itc-h-56:hover,
.itc-design .itc-h-56:focus-visible {
	border-color: var(--tint) !important;
	box-shadow: 0 22px 40px -26px var(--tint) !important;
}
.itc-design .itc-h-57:hover,
.itc-design .itc-h-57:focus-visible {
	border-color: rgba(198,242,78,0.4) !important;
	box-shadow: 0 34px 64px -34px rgba(198,242,78,0.35) !important;
}
.itc-design .itc-h-58:hover,
.itc-design .itc-h-58:focus-visible {
	border-color: #C9D3FF !important;
	box-shadow: 0 26px 50px -30px rgba(47,84,255,0.5) !important;
}
.itc-design .itc-h-59:hover,
.itc-design .itc-h-59:focus-visible {
	box-shadow: 0 20px 44px -12px rgba(198,242,78,0.7) !important;
}
.itc-design .itc-h-60:hover,
.itc-design .itc-h-60:focus-visible {
	background: rgba(255,255,255,0.13) !important;
}
.itc-design .itc-h-61:hover,
.itc-design .itc-h-61:focus-visible {
	border-color: var(--tint) !important;
	box-shadow: 0 24px 44px -28px var(--tint) !important;
}
.itc-design .itc-h-62:hover,
.itc-design .itc-h-62:focus-visible {
	color: #0A0E17 !important;
	border-color: #C6F24E !important;
}
.itc-design .itc-h-63:hover,
.itc-design .itc-h-63:focus-visible {
	background: #1B2A5E !important;
}
.itc-design .itc-h-64:hover,
.itc-design .itc-h-64:focus-visible {
	box-shadow: 0 16px 32px -24px rgba(10,14,23,0.4) !important;
}
.itc-design .itc-h-65:hover,
.itc-design .itc-h-65:focus-visible {
	border-color: #C6D2E8 !important;
	box-shadow: 0 24px 48px -32px rgba(10,14,23,0.4) !important;
}
.itc-design .itc-h-66:hover,
.itc-design .itc-h-66:focus-visible {
	border-color: #2F54FF !important;
	box-shadow: 0 16px 30px -22px rgba(47,84,255,0.55) !important;
}
.itc-design .itc-h-67:hover,
.itc-design .itc-h-67:focus-visible {
	background: rgba(255,255,255,0.12) !important;
	border-color: rgba(198,242,78,0.4) !important;
}
.itc-design .itc-h-68:hover,
.itc-design .itc-h-68:focus-visible {
	color: #0A0E17 !important;
	background: #F5FBE6 !important;
	box-shadow: inset 0 -2px 0 0 #A6D82F !important;
}
.itc-design .itc-h-69:hover,
.itc-design .itc-h-69:focus-visible {
	background: #F5F7FC !important;
}
.itc-design .itc-h-70:hover,
.itc-design .itc-h-70:focus-visible {
	background: #D4F76A !important;
	box-shadow: 0 16px 34px -10px rgba(198,242,78,0.9) !important;
}
.itc-design .itc-h-71:hover,
.itc-design .itc-h-71:focus-visible {
	box-shadow: 0 14px 28px -12px rgba(198,242,78,0.6) !important;
}
.itc-design .itc-h-72:hover,
.itc-design .itc-h-72:focus-visible {
	box-shadow: 0 20px 42px -12px rgba(10,14,23,0.8) !important;
}
.itc-design .itc-h-73:hover,
.itc-design .itc-h-73:focus-visible {
	color: #fff !important;
	background: rgba(255,255,255,0.14) !important;
}
.itc-design .itc-h-74:hover,
.itc-design .itc-h-74:focus-visible {
	box-shadow: 0 26px 50px -16px rgba(198,242,78,0.7) !important;
}
.itc-design .itc-h-75:hover,
.itc-design .itc-h-75:focus-visible {
	color: #AEB6C6 !important;
}

/* ── Sticky header ──────────────────────────────────────────────────────── */

/*
 * The strip holding the announcement bar, contact bar and menu row is what
 * sticks — see design-nav.js. The header inside it cannot: a sticky element is
 * confined to its parent's box, and that parent is only ~166px tall on an
 * 8000px page, so it scrolled away almost immediately.
 *
 * design-nav.js sets the negative `top` so the bars scroll off and the menu row
 * stays. The fallback here keeps it sensible before the script runs.
 */
.itc-design .itc-header-wrap {
	position: sticky;
	top: 0;
	z-index: 60;
}

/*
 * Article contents links (#sec-N): leave room for the sticky menu row (~92px
 * on desktop) so a jumped-to heading is not tucked under it. The design's
 * inline 96px left 4px; !important is the only way past an inline style.
 */
.post-prose section[id^="sec-"] {
	scroll-margin-top: 124px !important;
}

/*
 * Case-study cards (inc/cases.php → itc_case_card_links): an empty link
 * stretched over the whole card, so the card opens its case study without
 * changing the design's markup. Absolutely positioned, so it takes no grid
 * cell in the featured story's two-column grid.
 */
.itc-case-card {
	cursor: pointer;
}

.itc-case-link {
	position: absolute;
	inset: 0;
	z-index: 5;
	border-radius: inherit;
}

.itc-case-link:focus-visible {
	outline: 3px solid #2F54FF;
	outline-offset: 3px;
}

/*
 * Mobile drawer open: the floating call/WhatsApp buttons (z 180), the sticky
 * CTA (z 170) and social-proof toasts are fixed to the viewport and painted
 * over the drawer's last links and its own "Book a call" button. Hide them
 * until the drawer closes (design-nav.js toggles .itc-drawer-open).
 */
.itc-drawer-open .float-actions,
.itc-drawer-open .sticky-cta,
.itc-drawer-open .itc-toasts {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

/*
 * Section headers laid out as one `white-space:nowrap` row — dot, <h2>, and a
 * "— blurb" (/brochures/: "Services — What we do across the Salesforce…").
 * On a phone the row ran 50–120px past the screen edge and the page scrolled
 * sideways. Let such rows wrap on narrow screens.
 */
@media (max-width: 640px) {
	.itc-design [style*="white-space:nowrap"]:has(> h2) {
		white-space: normal !important;
		flex-wrap: wrap;
		row-gap: 4px;
	}
}

/*
 * VoiceDeal: tighter section rhythm. The design's .vd-sec padding (112px top
 * and bottom, so ~224px between sections) left long empty bands once
 * several sections were hidden (itc_voicedeal_hide_sections()).
 */
body .vd-sec {
	padding: 72px 24px;
}

@media (max-width: 720px) {
	body .vd-sec {
		padding: 52px 20px;
	}
}

/*
 * Blog table-of-contents numbers ("01", "02"…): the design's #C0C7D4 on white
 * is 1.7:1. #6B7588 is 4.8:1 (WCAG AA) and still reads as secondary.
 */
body a > span[style*="color:#C0C7D4"] {
	color: #6B7588 !important;
}

/*
 * "Connected ecosystem" tiles on the cloud/product layouts show the partner
 * name (itc_fill_empty_logo_tiles()). They sit on a dark panel, so the text
 * must be light.
 */
body div[style*="height:74px"][style*="rgba(255,255,255,0.06)"] {
	color: #E7EAF1;
	font-family: 'Archivo', sans-serif;
	font-weight: 700;
	font-size: 16px;
	letter-spacing: -0.01em;
}

/* Full-card links (itc_card_links()): cover the card. NOT .itc-card-link,
   which the blog grid already uses for its wrapping anchors. */
.itc-card-cover {
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: inherit;
}

.itc-card-cover:focus-visible {
	outline: 3px solid #2F54FF;
	outline-offset: 2px;
}

/* Blog pager: links laid out like the design's buttons, current page marked. */
nav[aria-label="Blog pagination"] {
	align-items: center;
}

nav[aria-label="Blog pagination"] a,
nav[aria-label="Blog pagination"] span {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

nav[aria-label="Blog pagination"] a[aria-current="page"] {
	background: #0A0E17 !important;
	border-color: #0A0E17 !important;
	color: #fff !important;
}

nav[aria-label="Blog pagination"] .itc-pager-step.is-disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

nav[aria-label="Blog pagination"] .itc-pager-dots {
	min-width: 28px;
	color: #8A93A3;
	font-weight: 700;
}

.itc-pager-count {
	text-align: center;
	margin-top: 12px;
	font-size: 13px;
	color: #6B7588;
}

/* /blogs/ topic chips: 14 of them stack 7 rows deep on a phone, so they become
   one swipeable row there (inline flex-wrap needs !important). */
@media (max-width: 640px) {
	#topics {
		flex-wrap: nowrap !important;
		overflow-x: auto;
		padding: 2px 0 6px;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	#topics::-webkit-scrollbar { display: none; }
	#topics a { flex: 0 0 auto; white-space: nowrap; }
}

/* Site search form (searchform.php) on the 404 page and listings: the submit
   button carries btn--lime but rendered dark-on-dark. */
.listing-search .btn--lime {
	background: #C6F24E !important;
	color: #0A0E17 !important;
	border-color: #C6F24E !important;
}

/* Blog / case-study thumbnails: whole image, blurred fill behind
   (itc_full_thumbnails() in production-ready.php). The backdrop comes first in
   the DOM and the photo is positioned without a z-index, so badges and
   gradients that follow still paint on top. */
:where(div, a, figure):has(> img.itc-thumb) {
	position: relative;
	overflow: hidden;
	background: #0B1020;
	/* Centre the photo when the frame is taller than it (mobile featured card). */
	display: flex;
	align-items: center;
	justify-content: center;
}
img.itc-thumb-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: blur(18px) saturate(1.1) brightness(0.8);
	transform: scale(1.15);
	pointer-events: none;
}
img.itc-media.itc-thumb {
	position: relative;
	object-fit: contain !important;
}

/* Blog pager on phones: Prev 1 … 5 … 115 Next fits; the full window
   (4 5 6) needed 413px on a 390px screen. */
@media (max-width: 520px) {
	nav[aria-label="Blog pagination"] { gap: 6px !important; }
	nav[aria-label="Blog pagination"] .itc-pager-near { display: none !important; }
	nav[aria-label="Blog pagination"] .itc-pager-step { padding: 0 12px !important; }
}

/* /blogs/ search, beside "Browse all articles" (inc/blog-topics.php,
   assets/js/blog-search.js). */
.itc-blog-search {
	position: relative;
	display: flex;
	align-items: center;
	width: 360px;
	max-width: 100%;
	color: #8A93A3;
}
.itc-blog-search svg { position: absolute; left: 16px; pointer-events: none; }
.itc-blog-search input {
	width: 100%;
	box-sizing: border-box;
	height: 48px;
	padding: 0 44px 0 44px;
	border: 1.5px solid #E1E6F2;
	border-radius: 14px;
	background: #fff;
	color: #0A0E17;
	font: inherit;
	font-size: 15px;
	outline: none;
	transition: border-color .2s, box-shadow .2s;
}
.itc-blog-search input::-webkit-search-cancel-button { display: none; }
.itc-blog-search input:focus { border-color: #2F54FF; box-shadow: 0 0 0 3px rgba(47, 84, 255, 0.14); }
.itc-blog-search__clear {
	position: absolute;
	right: 8px;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 50%;
	background: #F1F4FB;
	color: #3A4250;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}
.itc-blog-search__clear:hover { background: #0A0E17; color: #fff; }
.itc-blog-search__clear[hidden] { display: none; }
.itc-blog-search__spin {
	position: absolute;
	right: 48px;
	width: 16px;
	height: 16px;
	border: 2px solid #D6DCEB;
	border-top-color: #2F54FF;
	border-radius: 50%;
	opacity: 0;
	animation: itc-spin .7s linear infinite;
}
.itc-blog-search.is-loading .itc-blog-search__spin { opacity: 1; }
[data-blog-results][aria-busy="true"] { opacity: .55; transition: opacity .2s; }
@keyframes itc-spin { to { transform: rotate(360deg); } }
@media (max-width: 720px) { .itc-blog-search { width: 100%; } }

/* Phones: thumbnail frames take the image's shape instead of the design's
   fixed desktop heights (the featured card was ~2x taller than its image). */
@media (max-width: 720px) {
	:where(div, a, figure):has(> img.itc-thumb) {
		height: auto !important;
		min-height: 0 !important;
		aspect-ratio: 16 / 9 !important;
	}
}

/* "How we deliver" (home, services, industries) on phones: the box kept its
   desktop 64px/48px inline padding and the six phase buttons ran off-screen
   (Launch/Evolve cut off). Phones get tighter padding and a 3×2 grid of
   phases; the timeline line only makes sense in one row, so it hides. */
@media (max-width: 720px) {
	:where(div):has(> div > .dlv-track) {
		padding: 40px 18px !important;
		border-radius: 20px !important;
	}
	.dlv-track { display: none !important; }
	:where(div):has(> .itc-step-tab) {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 18px 6px !important;
	}
	.dlv-node { gap: 7px; min-width: 0; }
	.dlv-name { font-size: 13.5px; }
	.dlv-detail {
		padding: 22px !important;
		gap: 22px !important;
		margin-top: 28px !important;
	}
	.dlv-detail h3 { font-size: 24px !important; }
}

/* /contact-us/ "What happens next" card (itc_contact_next_steps()). */
.itc-design .itc-next {
	position: relative;
	border-radius: 24px;
	padding: 32px;
	color: #fff;
	background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025));
	border: 1px solid rgba(255,255,255,0.12);
	box-shadow: 0 30px 80px -40px rgba(47,84,255,0.55);
	overflow: hidden;
}
.itc-design .itc-next::before {
	content: "";
	position: absolute;
	top: -120px;
	right: -100px;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(47,84,255,0.35), transparent 65%);
	pointer-events: none;
}
.itc-design .itc-next-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 700;
	color: #C6F24E;
}
.itc-design .itc-next-eyebrow span { width: 7px; height: 7px; border-radius: 50%; background: #C6F24E; box-shadow: 0 0 10px #C6F24E; }
.itc-design .itc-next-h { font-size: 24px; line-height: 1.25; font-weight: 700; margin: 12px 0 0; color: #fff; }
.itc-design .itc-next-steps { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.itc-design .itc-next-steps li { display: flex; gap: 16px; position: relative; padding-bottom: 22px; }
.itc-design .itc-next-steps li:last-child { padding-bottom: 0; }
.itc-design .itc-next-steps li:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 19px;
	top: 42px;
	bottom: 4px;
	width: 2px;
	background: linear-gradient(180deg, rgba(198,242,78,0.5), rgba(47,84,255,0.35));
}
.itc-design .itc-next-num {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	display: grid;
	place-items: center;
	font-weight: 800;
	font-size: 13.5px;
	color: #0A0E17;
	background: #C6F24E;
}
.itc-design .itc-next-steps strong { display: block; font-size: 16px; font-weight: 700; color: #fff; margin-top: 2px; }
.itc-design .itc-next-steps p { font-size: 14px; line-height: 1.55; color: #AEB6C6; margin: 5px 0 0; }
.itc-design .itc-next-reach { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.1); }
.itc-design .itc-next-reach-t { font-size: 13px; color: #8A93A3; margin-bottom: 12px; }
.itc-design .itc-next-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.itc-design .itc-next-btns a {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border-radius: 12px;
	font-size: 14px;
	font-weight: 600;
	color: #fff !important;
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.14);
	text-decoration: none;
	transition: background .2s, border-color .2s;
}
.itc-design .itc-next-btns a:hover { background: rgba(198,242,78,0.12); border-color: rgba(198,242,78,0.45); }
@media (max-width: 720px) {
	.itc-design .itc-next { padding: 24px 20px; border-radius: 20px; }
	.itc-design .itc-next-h { font-size: 21px; }
}