/*
Theme Name: Imran
Theme URI: https://imranx.com/
Author: Imran
Author URI: https://imranx.com/
Description: Imran is a fast, lightweight, plugin-free portfolio theme for WordPress experts, Shopify professionals and web designers. Built with semantic HTML5, hand-written CSS (Grid + Flexbox) and vanilla JavaScript. Every section is editable from the WordPress Customizer, with native Custom Post Types powering Portfolio, Services, Testimonials and Experience. No page builder, no ACF, zero plugin dependency.
Version: 1.0.0
Requires at least: 5.9
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: imranx
Tags: portfolio, blog, one-column, custom-logo, custom-menu, custom-colors, featured-images, translation-ready, full-width-template, threaded-comments
*/

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {
	/* Brand palette — the reference design system. */
	--ix-ink: #111111;
	--ix-ink-2: #333333;
	--ix-ink-soft: #555555;
	--ix-ink-faint: #888888;
	--ix-white: #ffffff;

	/* The page vs. the surfaces that sit on it. Kept as separate tokens so a
	   dark theme can invert one without dragging the other along. */
	--ix-page: #f3f3f5;
	--ix-card: #ffffff;
	--ix-card-glass: rgba( 255, 255, 255, 0.72);
	--ix-surface: #f7f7f8;
	--ix-surface-2: #f3f3f5;
	--ix-line: #ececef;
	--ix-line-strong: #dcdce2;
	--ix-line-soft: rgba( 17, 17, 17, 0.08 );
	--ix-header-bg: rgba( 255, 255, 255, 0.82 );
	--ix-header-bg-stuck: rgba( 255, 255, 255, 0.94 );
	--ix-chip-bg: rgba( 255, 255, 255, 0.94 );

	/* Footer — lavender gradient, matching the reference. */
	--ix-footer-bg: #ece9ff;
	--ix-footer-fg: #555555;

	/* Accent */
	--ix-accent: #0a00d6;
	--ix-accent-2: #1b1be0;
	--ix-accent-soft: #ecebff;
	--ix-secondary: #d9d6ff;
	--ix-accent-grad: linear-gradient( 135deg, var(--ix-accent) 0%, var(--ix-accent-2) 100% );

	/* Blob colours — the pastel glow palette. */
	--ix-blob-lavender: #c9c4ff;
	--ix-blob-pink: #ffc9d9;
	--ix-blob-lime: #dfff7a;
	--ix-blob-sky: #dce7ff;
	--ix-blob-mint: #dcf2ea;

	/* Pastel gradients */
	--ix-pastel-peach: linear-gradient( 135deg, #ffe6e6 0%, #fff1ee 100% );
	--ix-pastel-lilac: linear-gradient( 135deg, #e2dcff 0%, #f2efff 100% );
	--ix-pastel-sky: linear-gradient( 135deg, #dce7ff 0%, #eef4ff 100% );
	--ix-pastel-mint: linear-gradient( 135deg, #dcf2ea 0%, #eefaf5 100% );
	--ix-pastel-hero: linear-gradient( 115deg, #ffe9ef 0%, #f3ecff 38%, #e4ecff 68%, #e9f3ff 100% );
	--ix-pastel-sun: linear-gradient( 135deg, #fff2d6 0%, #fffaf0 100% );

	/* Typography — Satoshi is the reference face, self-hosted in assets/fonts. */
	--ix-font: "Satoshi", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--ix-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	--ix-fs-display: clamp( 3.25rem, 11vw, 8.5rem );
	--ix-fs-h1: clamp( 2.5rem, 6vw, 4.5rem );
	--ix-fs-h2: clamp( 2rem, 4vw, 3rem );
	--ix-fs-h3: clamp( 1.375rem, 2.2vw, 1.875rem );
	--ix-fs-h4: clamp( 1.125rem, 1.5vw, 1.375rem );
	--ix-fs-body: clamp( 0.9375rem, 1.05vw, 1.0625rem );
	--ix-fs-sm: 0.875rem;
	--ix-fs-xs: 0.75rem;

	--ix-lh-tight: 0.98;
	--ix-lh-snug: 1.15;
	--ix-lh-body: 1.7;

	--ix-ls-tight: -0.03em;
	--ix-ls-snug: -0.02em;
	--ix-ls-wide: 0.12em;
	--ix-ls-wider: 0.2em;

	/* Spacing scale */
	--ix-sp-1: 0.5rem;
	--ix-sp-2: 0.75rem;
	--ix-sp-3: 1rem;
	--ix-sp-4: 1.5rem;
	--ix-sp-5: 2rem;
	--ix-sp-6: 3rem;
	--ix-sp-7: 4rem;
	--ix-sp-8: 6rem;

	/* 120px desktop / 72px mobile section rhythm. */
	--ix-section-y: clamp( 4.5rem, 8vw, 7.5rem );
	--ix-container: 1200px;
	--ix-container-wide: 1400px;
	--ix-gutter: 24px;

	/* Radius — 12px inputs, 20px cards, 999px pills. */
	--ix-r-xs: 8px;
	--ix-r-sm: 12px;
	--ix-r-md: 16px;
	--ix-r-lg: 20px;
	--ix-r-xl: 28px;
	--ix-r-pill: 999px;

	/* Elevation */
	--ix-shadow-sm: 0 1px 2px rgba( 17, 17, 17, 0.04 );
	--ix-shadow-md: 0 8px 24px -12px rgba( 17, 17, 17, 0.12 );
	--ix-shadow-lg: 0 24px 60px -28px rgba( 17, 17, 17, 0.22 );
	--ix-shadow-xl: 0 40px 90px -40px rgba( 17, 17, 17, 0.3 );

	/* Solid (high-contrast) surfaces — inverts with the theme. */
	--ix-solid-bg: #111111;
	--ix-solid-fg: #ffffff;

	/* Motion — spring-like curves, 600–900ms for reveals. */
	--ix-ease: cubic-bezier( 0.22, 1, 0.36, 1 );
	--ix-ease-spring: cubic-bezier( 0.34, 1.56, 0.64, 1 );
	--ix-dur: 0.7s;
	--ix-dur-fast: 0.25s;
	--ix-dur-slow: 0.9s;

	/* Layout */
	--ix-header-h: 84px;
	--ix-header-pill-h: 68px;

	color-scheme: light;
}

/* ==========================================================================
   1b. DARK THEME
   Every value below remaps a token from :root — no component needs to know
   which theme is active. Applied via [data-theme] on <html>, set by the inline
   boot script in header.php so there is no flash of the wrong theme.
   ========================================================================== */

:root[data-theme="dark"] {
	color-scheme: dark;

	--ix-ink: #f4f4f7;
	--ix-ink-2: #d8d8e2;
	--ix-ink-soft: #a3a3b6;
	--ix-ink-faint: #7c7c90;

	/* --ix-white stays pure white: it means "text on an accent fill", which
	   must not invert. Surfaces use --ix-card / --ix-page instead. */
	--ix-page: #0e0e14;
	--ix-card: #17171f;
	--ix-card-glass: rgba( 23, 23, 31, 0.72 );
	--ix-surface: #1c1c26;
	--ix-surface-2: #23232e;
	--ix-line: #272733;
	--ix-line-strong: #35353f;
	--ix-line-soft: rgba( 255, 255, 255, 0.09 );
	--ix-header-bg: rgba( 20, 20, 28, 0.78 );
	--ix-header-bg-stuck: rgba( 20, 20, 28, 0.94 );
	--ix-chip-bg: rgba( 28, 28, 38, 0.94 );

	/* Footer keeps the lavender cast in dark mode, just deepened. */
	--ix-footer-bg: #1a1830;
	--ix-footer-fg: rgba( 255, 255, 255, 0.66 );

	/* The brand blue is too dark to read on a near-black page, so the dark
	   theme lifts it to a luminous indigo while keeping the same hue. */
	--ix-accent: #7b78ff;
	--ix-accent-2: #a09eff;
	--ix-accent-soft: #1e1e3c;
	--ix-secondary: #2a2a48;

	--ix-pastel-peach: linear-gradient( 135deg, #2a1e22 0%, #1e161a 100% );
	--ix-pastel-lilac: linear-gradient( 135deg, #221f3a 0%, #1a182b 100% );
	--ix-pastel-sky: linear-gradient( 135deg, #1a2136 0%, #151a28 100% );
	--ix-pastel-mint: linear-gradient( 135deg, #14261f 0%, #101c18 100% );
	--ix-pastel-hero: linear-gradient( 115deg, #221a30 0%, #1b1a33 38%, #16203a 68%, #141b2c 100% );
	--ix-pastel-sun: linear-gradient( 135deg, #2a2418 0%, #1e1a12 100% );

	--ix-solid-bg: #f4f4f7;
	--ix-solid-fg: #0e0e14;

	--ix-blob-lavender: #4a4386;
	--ix-blob-pink: #7a3b52;
	--ix-blob-lime: #4a5a1f;
	--ix-blob-sky: #2e4a66;
	--ix-blob-mint: #2c5648;

	--ix-shadow-sm: 0 1px 2px rgba( 0, 0, 0, 0.5 );
	--ix-shadow-md: 0 8px 24px -12px rgba( 0, 0, 0, 0.7 );
	--ix-shadow-lg: 0 24px 60px -28px rgba( 0, 0, 0, 0.85 );
	--ix-shadow-xl: 0 40px 90px -40px rgba( 0, 0, 0, 0.9 );
}

/* Blobs and grain are tuned for a white page; on dark they read as smudges. */
:root[data-theme="dark"] .ix-blob {
	opacity: 0.28;
}

:root[data-theme="dark"] .ix-noise {
	background-image: radial-gradient( rgba( 255, 255, 255, 0.05 ) 1px, transparent 1px );
}

/* Cards sit on a dark page, so borders need to read without a shadow. */
:root[data-theme="dark"] .ix-work,
:root[data-theme="dark"] .ix-service,
:root[data-theme="dark"] .ix-tech,
:root[data-theme="dark"] .ix-testimonial,
:root[data-theme="dark"] .ix-exp,
:root[data-theme="dark"] .ix-form-card {
	border-color: var(--ix-line);
}

/* Theme swap should feel intentional, but never animate on first paint. */
:root[data-theme-ready] body {
	transition: background-color 0.3s var(--ix-ease), color 0.3s var(--ix-ease);
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc( var( --ix-header-h ) + 1.5rem );
}

body {
	margin: 0;
	background-color: var(--ix-page);
	color: var(--ix-ink);
	font-family: var(--ix-font);
	font-size: var(--ix-fs-body);
	line-height: var(--ix-lh-body);
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 var(--ix-sp-3);
	font-weight: 700;
	line-height: var(--ix-lh-snug);
	letter-spacing: var(--ix-ls-snug);
	color: var(--ix-ink);
	text-wrap: balance;
}

h1 { font-size: var(--ix-fs-h1); }
h2 { font-size: var(--ix-fs-h2); }
h3 { font-size: var(--ix-fs-h3); }
h4 { font-size: var(--ix-fs-h4); }
h5,
h6 { font-size: 1rem; }

p {
	margin: 0 0 var(--ix-sp-4);
}

p:last-child {
	margin-bottom: 0;
}

a {
	color: var(--ix-ink);
	text-decoration: none;
	transition: color var(--ix-dur-fast) var(--ix-ease), opacity var(--ix-dur-fast) var(--ix-ease);
}

a:hover {
	color: var(--ix-accent-2);
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

img {
	border-style: none;
}

iframe,
embed,
object {
	max-width: 100%;
}

ul,
ol {
	margin: 0 0 var(--ix-sp-4);
	padding: 0 0 0 1.25rem;
}

li {
	margin-bottom: var(--ix-sp-1);
}

blockquote {
	margin: 0 0 var(--ix-sp-4);
	padding-left: var(--ix-sp-4);
	border-left: 3px solid var(--ix-accent);
	font-size: var(--ix-fs-h4);
	line-height: 1.5;
}

code,
kbd,
pre,
samp {
	font-family: var(--ix-font-mono);
	font-size: 0.875em;
}

pre {
	overflow: auto;
	padding: var(--ix-sp-4);
	background: var(--ix-surface);
	border-radius: var(--ix-r-sm);
}

table {
	width: 100%;
	margin-bottom: var(--ix-sp-4);
	border-collapse: collapse;
}

th,
td {
	padding: 0.75rem;
	border-bottom: 1px solid var(--ix-line);
	text-align: left;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
}

hr {
	height: 1px;
	margin: var(--ix-sp-6) 0;
	border: 0;
	background: var(--ix-line);
}

::selection {
	background: var(--ix-accent);
	color: var(--ix-white);
}

/* Accessibility ----------------------------------------------------------- */

:focus-visible {
	outline: 2px solid var(--ix-accent-2);
	outline-offset: 3px;
	border-radius: 4px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: var(--ix-sp-3);
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var(--ix-solid-bg);
	color: var(--ix-solid-fg);
	border-radius: var(--ix-r-pill);
	transition: top var( --ix-dur-fast ) var( --ix-ease );
}

.skip-link:focus {
	top: var(--ix-sp-3);
	color: var(--ix-solid-fg);
}

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

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   3. LAYOUT PRIMITIVES
   ========================================================================== */

.ix-container {
	width: 100%;
	max-width: var(--ix-container);
	margin-inline: auto;
	padding-inline: var(--ix-gutter);
}

.ix-container--wide {
	max-width: var(--ix-container-wide);
}

.ix-container--narrow {
	max-width: 820px;
}

.ix-section {
	position: relative;
	padding-block: var(--ix-section-y);
	overflow: hidden;
}

.ix-section--tight {
	padding-block: clamp( 3rem, 6vw, 5rem );
}

.ix-section--surface {
	background: var(--ix-surface);
}

.ix-section--flush-top {
	padding-top: 0;
}

.ix-grid {
	display: grid;
	gap: var(--ix-sp-5);
}

.ix-grid--2 {
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}

.ix-grid--3 {
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
}

.ix-grid--4 {
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
}

.ix-flex {
	display: flex;
	align-items: center;
	gap: var(--ix-sp-3);
}

.ix-flex--between {
	justify-content: space-between;
}

.ix-flex--wrap {
	flex-wrap: wrap;
}

.ix-stack > * + * {
	margin-top: var(--ix-sp-4);
}

/* ==========================================================================
   4. DECORATIVE ELEMENTS
   ========================================================================== */

.ix-blob {
	position: absolute;
	z-index: 0;
	border-radius: 50%;
	filter: blur( 70px );
	opacity: 0.7;
	pointer-events: none;
	will-change: transform;
}

.ix-blob--peach,
.ix-blob--pink {
	background: radial-gradient( circle at 30% 30%, var(--ix-blob-pink), #ffe9f0 70% );
}

.ix-blob--lilac {
	background: radial-gradient( circle at 30% 30%, var(--ix-blob-lavender), #ece9ff 70% );
}

.ix-blob--sky {
	background: radial-gradient( circle at 30% 30%, var(--ix-blob-sky), #e6f2ff 70% );
}

.ix-blob--mint {
	background: radial-gradient( circle at 30% 30%, var(--ix-blob-mint), #e6f8ef 70% );
}

.ix-blob--lime {
	background: radial-gradient( circle at 30% 30%, var(--ix-blob-lime), #f0ffc0 70% );
}

.ix-blob--sun {
	background: radial-gradient( circle at 30% 30%, #ffe7b0, #fff4d8 70% );
}

.ix-blob--sm { width: 220px; height: 220px; }
.ix-blob--md { width: 380px; height: 380px; }
.ix-blob--lg { width: 560px; height: 560px; }

.ix-float {
	animation: ix-float 7s var(--ix-ease) infinite;
}

.ix-float--slow {
	animation-duration: 11s;
}

.ix-float--delay {
	animation-delay: -3.5s;
}

@keyframes ix-float {
	0%,
	100% { transform: translate3d( 0, 0, 0 ); }
	50% { transform: translate3d( 0, -18px, 0 ); }
}

.ix-noise {
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0.35;
	pointer-events: none;
	background-image: radial-gradient( rgba( 11, 11, 15, 0.05 ) 1px, transparent 1px );
	background-size: 22px 22px;
	mask-image: radial-gradient( ellipse at center, #000 20%, transparent 75% );
	-webkit-mask-image: radial-gradient( ellipse at center, #000 20%, transparent 75% );
}

.ix-section > .ix-container {
	position: relative;
	z-index: 1;
}

/* ==========================================================================
   5. COMPONENTS — Buttons
   ========================================================================== */

.ix-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.875rem 1.75rem;
	border: 1px solid var(--ix-solid-bg);
	border-radius: var(--ix-r-pill);
	background: transparent;
	color: var(--ix-ink);
	font-size: var(--ix-fs-sm);
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--ix-dur-fast) var(--ix-ease),
		color var(--ix-dur-fast) var(--ix-ease),
		border-color var(--ix-dur-fast) var(--ix-ease),
		transform var(--ix-dur-fast) var(--ix-ease),
		box-shadow var(--ix-dur-fast) var(--ix-ease);
}

.ix-btn:hover,
.ix-btn:focus-visible {
	background: var(--ix-solid-bg);
	color: var(--ix-solid-fg);
	transform: translateY( -2px );
	box-shadow: var(--ix-shadow-md);
}

.ix-btn:active {
	transform: translateY( 0 );
}

/* Hover lifts exist only for precise pointers; touch taps stay put. */
html.ix-touch .ix-btn:hover {
	transform: none;
}

.ix-btn--solid {
	background: var(--ix-solid-bg);
	color: var(--ix-solid-fg);
}

.ix-btn--solid:hover,
.ix-btn--solid:focus-visible {
	background: var(--ix-solid-bg);
	color: var(--ix-solid-fg);
	filter: brightness( 1.12 );
}

.ix-btn--accent {
	border-color: transparent;
	background: var(--ix-accent-grad);
	color: var(--ix-white);
}

.ix-btn--accent:hover,
.ix-btn--accent:focus-visible {
	background: var(--ix-accent-grad);
	border-color: transparent;
	color: var(--ix-white);
	filter: brightness( 1.06 );
}

.ix-btn--ghost {
	border-color: var(--ix-line-strong);
}

.ix-btn--sm {
	padding: 0.625rem 1.25rem;
	font-size: var(--ix-fs-xs);
}

.ix-btn--lg {
	padding: 1.125rem 2.25rem;
	font-size: 1rem;
}

.ix-btn--block {
	width: 100%;
}

.ix-btn__icon {
	display: inline-flex;
	transition: transform var(--ix-dur-fast) var(--ix-ease);
}

.ix-btn:hover .ix-btn__icon {
	transform: translateX( 3px );
}

/* Leading icon stays put; trailing icon slides. */
.ix-btn:hover .ix-btn__icon--lead {
	transform: none;
}

/* Outlined pill — the reference's default button. */
.ix-btn--outline {
	border-color: var(--ix-ink);
}

/* ==========================================================================
   6. COMPONENTS — Badges & Eyebrows
   ========================================================================== */

.ix-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1.0625rem 0.5rem 0.875rem;
	border: 1px solid var(--ix-line);
	border-radius: var(--ix-r-pill);
	background: var(--ix-card);
	box-shadow: var(--ix-shadow-sm);
	color: var(--ix-ink-2);
	font-size: var(--ix-fs-xs);
	font-weight: 600;
	letter-spacing: var(--ix-ls-wide);
	text-transform: uppercase;
	line-height: 1;
}

.ix-badge__dot {
	position: relative;
	width: 8px;
	height: 8px;
	flex: 0 0 8px;
	border-radius: 50%;
	background: #22c55e;
}

.ix-badge__dot::after {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 1px solid #22c55e;
	opacity: 0.5;
	animation: ix-ping 2.4s var(--ix-ease) infinite;
}

@keyframes ix-ping {
	0% { transform: scale( 0.7 ); opacity: 0.6; }
	70% { transform: scale( 1.5 ); opacity: 0; }
	100% { transform: scale( 1.5 ); opacity: 0; }
}

.ix-badge--accent {
	border-color: transparent;
	background: var(--ix-accent-soft);
	color: var(--ix-accent-2);
}

.ix-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 var(--ix-sp-3);
	color: var(--ix-ink-faint);
	font-size: var(--ix-fs-xs);
	font-weight: 600;
	letter-spacing: var(--ix-ls-wider);
	text-transform: uppercase;
	line-height: 1;
}

.ix-eyebrow::before {
	content: "";
	width: 28px;
	height: 1px;
	background: var(--ix-accent);
}

.ix-eyebrow--center {
	justify-content: center;
}

.ix-eyebrow--center::after {
	content: "";
	width: 28px;
	height: 1px;
	background: var(--ix-accent);
}

/* Accent pill eyebrow — retired. Eyebrows now render as plain labels with a
   leading rule, so the pill variant is kept as a no-op for older markup. */
.ix-eyebrow--accent::before {
	content: none;
}

/* ==========================================================================
   7. COMPONENTS — Section header
   ========================================================================== */

.ix-section-head {
	margin-bottom: clamp( 2.5rem, 4.5vw, 4rem );
}

.ix-section-head--center {
	max-width: 720px;
	margin-inline: auto;
	text-align: center;
}

.ix-section-head__title {
	margin: 0;
	font-size: var(--ix-fs-h2);
	font-weight: 700;
	letter-spacing: var(--ix-ls-tight);
	line-height: var(--ix-lh-snug);
}

.ix-section-head__sub {
	margin: var(--ix-sp-3) 0 0;
	color: var(--ix-ink-soft);
	font-size: var(--ix-fs-body);
	max-width: 56ch;
}

.ix-section-head--center .ix-section-head__sub {
	margin-inline: auto;
}

.ix-section-head--split {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--ix-sp-5);
	flex-wrap: wrap;
}

/* Display headline (large two-line statements) */
.ix-display {
	margin: 0;
	font-size: clamp( 2.25rem, 5.4vw, 4.25rem );
	font-weight: 700;
	letter-spacing: var(--ix-ls-tight );
	line-height: 1.04;
}

.ix-display em {
	font-style: normal;
	background: var(--ix-accent-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* ==========================================================================
   8. COMPONENTS — Cards
   ========================================================================== */

.ix-card {
	position: relative;
	background: var(--ix-card);
	border: 1px solid var(--ix-line);
	border-radius: var(--ix-r-lg);
	transition: transform var(--ix-dur) var(--ix-ease),
		box-shadow var(--ix-dur) var(--ix-ease),
		border-color var(--ix-dur) var(--ix-ease);
}

.ix-card:hover {
	transform: translateY( -6px );
	border-color: var(--ix-line-strong);
	box-shadow: var(--ix-shadow-lg);
}

.ix-card__media {
	position: relative;
	overflow: hidden;
	border-radius: var(--ix-r-lg) var(--ix-r-lg) 0 0;
	background: var(--ix-surface-2);
}

.ix-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s var(--ix-ease);
}

.ix-card:hover .ix-card__media img {
	transform: scale( 1.04 );
}

.ix-card__body {
	padding: clamp( 1.25rem, 2.2vw, 1.75rem );
}

.ix-card__title {
	margin: 0 0 0.5rem;
	font-size: var(--ix-fs-h4);
	font-weight: 700;
	letter-spacing: var(--ix-ls-snug);
}

.ix-card__title a {
	color: inherit;
}

.ix-card__text {
	margin: 0;
	color: var(--ix-ink-soft);
	font-size: var(--ix-fs-sm);
	line-height: 1.65;
}

.ix-card__meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--ix-ink-faint);
	font-size: var(--ix-fs-xs);
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Tag / chip ------------------------------------------------------------- */

.ix-tag {
	display: inline-flex;
	align-items: center;
	padding: 0.375rem 0.8125rem;
	border-radius: var(--ix-r-pill);
	background: var(--ix-surface-2);
	color: var(--ix-ink-2);
	font-size: var(--ix-fs-xs);
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.4;
	white-space: nowrap;
}

.ix-tag--accent {
	background: var(--ix-accent-soft);
	color: var(--ix-accent-2);
}

/* Clickable tags on single posts — card-like chips with a clear hover state. */
a.ix-tag {
	border: 1px solid var(--ix-line);
	background: var(--ix-card);
	color: var(--ix-ink-soft);
	padding: 0.4375rem 0.9375rem;
	text-decoration: none;
	transition: color var(--ix-ease), background-color var(--ix-ease),
		border-color var(--ix-ease), transform var(--ix-ease),
		box-shadow var(--ix-ease);
}

a.ix-tag::before {
	content: "#";
	margin-right: 0.1875rem;
	color: var(--ix-ink-faint);
	font-weight: 700;
	transition: color var(--ix-ease);
}

a.ix-tag:hover,
a.ix-tag:focus-visible {
	background: var(--ix-accent-soft);
	border-color: var(--ix-accent);
	color: var(--ix-accent-2);
	transform: translateY(-2px);
	box-shadow: 0 6px 16px -8px var(--ix-accent);
}

a.ix-tag:hover::before,
a.ix-tag:focus-visible::before {
	color: var(--ix-accent);
}

.ix-tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ix-tag-list li {
	margin: 0;
	display: flex;
}

/* ==========================================================================
   9. COMPONENTS — Rating stars
   ========================================================================== */

.ix-stars {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	color: #f5a623;
}

.ix-stars svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

.ix-stars--lg svg {
	width: 20px;
	height: 20px;
}

/* ==========================================================================
   10. COMPONENTS — Avatar row
   ========================================================================== */

.ix-avatars {
	display: flex;
	align-items: center;
}

.ix-avatars__item {
	width: 44px;
	height: 44px;
	margin-left: -12px;
	border: 2px solid var(--ix-card);
	border-radius: 50%;
	overflow: hidden;
	background: var(--ix-surface-2);
	box-shadow: var(--ix-shadow-sm);
	transition: transform var(--ix-dur-fast) var(--ix-ease);
}

.ix-avatars__item:first-child {
	margin-left: 0;
}

.ix-avatars__item:hover {
	transform: translateY( -3px ) scale( 1.06 );
	z-index: 2;
}

.ix-avatars__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ix-avatars__more {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-left: -12px;
	border: 2px solid var(--ix-card);
	border-radius: 50%;
	background: var(--ix-solid-bg);
	color: var(--ix-solid-fg );
	font-size: var(--ix-fs-xs);
	font-weight: 700;
	box-shadow: var(--ix-shadow-sm);
}

/* ==========================================================================
   11. COMPONENTS — Trust marquee (rendered inside the hero, sharing its bg)
   ========================================================================== */

.ix-logos {
	padding-block: 0.75rem;
	background: var(--ix-pastel-hero);
}

/* Marquee embedded in the hero — no own background, blends seamlessly. */
.ix-hero__marquee {
	margin-top: clamp( 2.25rem, 4vw, 3.25rem );
	-webkit-mask-image: linear-gradient( to right, transparent, #000 8%, #000 92%, transparent );
	mask-image: linear-gradient( to right, transparent, #000 8%, #000 92%, transparent );
}

.ix-marquee {
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	overflow: hidden;
	padding-block: 1.25rem;
	user-select: none;
}

.ix-marquee--pastel {
	border-block-color: transparent;
	background: var(--ix-pastel-hero);
}

.ix-marquee__track {
	display: flex;
	flex-wrap: nowrap;
	flex: 0 0 auto;
	align-items: center;
	gap: clamp( 3rem, 6vw, 5rem );
	padding-right: clamp( 3rem, 6vw, 5rem );
	min-width: 100%;
	will-change: transform;
	backface-visibility: hidden;
	animation: ix-marquee var( --ix-marquee-duration, 140s ) linear infinite;
}

.ix-marquee:hover .ix-marquee__track,
.ix-marquee:focus-within .ix-marquee__track {
	animation-play-state: paused;
}

.ix-marquee__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--ix-ink-2);
	font-size: clamp( 1rem, 1.5vw, 1.25rem );
	font-weight: 700;
	letter-spacing: var(--ix-ls-snug);
	white-space: nowrap;
	/* Grayscale until hovered, matching the reference logo strip. */
	filter: grayscale( 1 );
	opacity: 0.55;
	transition: filter var(--ix-dur-fast) var(--ix-ease),
		opacity var(--ix-dur-fast) var(--ix-ease);
}

.ix-marquee__item:hover,
.ix-marquee__item:focus-visible {
	filter: grayscale( 0 );
	opacity: 1;
}

.ix-marquee__item img {
	display: block;
	width: auto;
	height: 36px;
	object-fit: contain;
}

@keyframes ix-marquee {
	from { transform: translate3d( 0, 0, 0 ); }
	to { transform: translate3d( var(--ix-marquee-travel, -50%), 0, 0 ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.ix-marquee__track {
		animation: none;
	}

	.ix-marquee {
		overflow-x: auto;
	}
}

/* ==========================================================================
   12. WORDPRESS CORE CLASSES
   ========================================================================== */

.alignleft {
	float: left;
	margin: 0 var(--ix-sp-4) var(--ix-sp-4) 0;
}

.alignright {
	float: right;
	margin: 0 0 var(--ix-sp-4) var(--ix-sp-4);
}

.aligncenter {
	display: block;
	margin-inline: auto;
}

.alignwide {
	margin-inline: calc( -1 * var( --ix-gutter ) );
	max-width: 100vw;
}

.alignfull {
	margin-inline: calc( -50vw + 50% );
	max-width: 100vw;
	width: 100vw;
}

.wp-caption {
	max-width: 100%;
	margin-bottom: var(--ix-sp-4);
}

.wp-caption-text {
	margin-top: 0.5rem;
	color: var(--ix-ink-faint);
	font-size: var(--ix-fs-xs);
	text-align: center;
}

.sticky .ix-card__title::after {
	content: " ★";
	color: var(--ix-accent);
}

.bypostauthor > .comment-body .comment-author-name::after {
	content: " (Author)";
	color: var(--ix-ink-faint);
	font-size: var(--ix-fs-xs);
}

.gallery {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: var(--ix-sp-2);
	margin-bottom: var( --ix-sp-4 );
}

.gallery-item {
	margin: 0;
}

.gallery-icon img {
	border-radius: var( --ix-r-sm );
}

.wp-block-image img {
	border-radius: var( --ix-r-md );
}

/* ==========================================================================
   13. UTILITIES
   ========================================================================== */

.ix-text-center { text-align: center; }
.ix-text-soft { color: var(--ix-ink-soft); }
.ix-text-faint { color: var(--ix-ink-faint); }
.ix-text-accent { color: var(--ix-accent-2); }

.ix-mt-0 { margin-top: 0; }
.ix-mt-3 { margin-top: var(--ix-sp-3); }
.ix-mt-4 { margin-top: var(--ix-sp-4); }
.ix-mt-5 { margin-top: var(--ix-sp-5); }
.ix-mb-0 { margin-bottom: 0; }

.ix-hidden { display: none !important; }

.ix-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	clip-path: inset( 50% );
}

/* Scroll reveal ---------------------------------------------------------
   Scoped to .ix-js, which theme.js adds to <html>. Without JavaScript the
   reveal never runs, so content stays visible rather than blank. */

.ix-js .ix-reveal {
	opacity: 0;
	transform: translate3d( 0, 24px, 0 );
	transition: opacity 0.7s var(--ix-ease), transform 0.7s var(--ix-ease);
	will-change: opacity, transform;
}

.ix-js .ix-reveal.is-visible {
	opacity: 1;
	transform: translate3d( 0, 0, 0 );
}

.ix-reveal--d1 { transition-delay: 0.08s; }
.ix-reveal--d2 { transition-delay: 0.16s; }
.ix-reveal--d3 { transition-delay: 0.24s; }
.ix-reveal--d4 { transition-delay: 0.32s; }

@media ( prefers-reduced-motion: reduce ) {
	.ix-js .ix-reveal {
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================================
   14. SKILLS + EXPERIENCE
   ========================================================================== */

.ix-skills-exp {
	position: relative;
	overflow: hidden;
}

.ix-skills-exp__grid {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: clamp( 2.5rem, 6vw, 5rem );
	align-items: start;
	margin-top: clamp( 2rem, 4vw, 3.5rem );
}

/* Experience timeline */
.ix-exp-timeline {
	margin: var(--ix-sp-5) 0 0;
	padding: 0;
	list-style: none;
	position: relative;
}

.ix-exp-timeline::before {
	content: "";
	position: absolute;
	left: 11px;
	top: 0;
	bottom: 0;
	width: 2px;
	background: linear-gradient( to bottom, var(--ix-accent) 0%, var(--ix-line) 100% );
}

.ix-exp-item {
	position: relative;
	padding-left: 2.25rem;
	margin-bottom: var(--ix-sp-5);
}

.ix-exp-item__dot {
	position: absolute;
	left: 4px;
	top: 6px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 2px solid var(--ix-white);
	background: var(--ix-accent);
	box-shadow: 0 0 0 3px var(--ix-accent-soft);
}

.ix-exp-item__role {
	margin: 0 0 0.25rem;
	font-size: var(--ix-fs-body);
	font-weight: 700;
	color: var(--ix-ink);
}

.ix-exp-item__company {
	margin: 0;
	color: var(--ix-accent-2);
	font-size: var(--ix-fs-sm);
	font-weight: 600;
}

.ix-exp-item__period {
	display: inline-block;
	margin-top: 0.375rem;
	padding: 0.2rem 0.6rem;
	border-radius: var(--ix-r-pill);
	background: var(--ix-surface-2);
	color: var(--ix-ink-soft);
	font-size: var(--ix-fs-xs);
	font-weight: 600;
}

.ix-exp-item__summary {
	margin: var(--ix-sp-3) 0 0;
	color: var(--ix-ink-soft);
	font-size: var(--ix-fs-sm);
	line-height: 1.65;
}

/* Skill bars */
.ix-skill-bars {
	display: flex;
	flex-direction: column;
	gap: var(--ix-sp-4);
	margin-top: var(--ix-sp-5);
}

.ix-skill__head {
	display: flex;
	justify-content: space-between;
	margin-bottom: 0.5rem;
}

.ix-skill__name {
	font-size: var(--ix-fs-sm);
	font-weight: 600;
	color: var(--ix-ink);
}

.ix-skill__pct {
	font-size: var(--ix-fs-sm);
	font-weight: 700;
	color: var(--ix-accent);
}

.ix-skill__track {
	height: 8px;
	border-radius: var(--ix-r-pill);
	background: var(--ix-line-strong);
	overflow: hidden;
}

.ix-skill__fill {
	height: 100%;
	border-radius: var(--ix-r-pill);
	background: var(--ix-accent);
	transform: scaleX( 0 );
	transform-origin: left;
	transition: transform 1.1s var(--ix-ease);
	will-change: transform;
}

.ix-js [data-ix-skills].is-visible .ix-skill__fill {
	transform: scaleX( 1 );
}

:root:not(.ix-js) .ix-skill__fill {
	transform: scaleX( 1 );
}

@media ( prefers-reduced-motion: reduce ) {
	.ix-skill__fill {
		transform: scaleX( 1 ) !important;
		transition: none;
	}
}

@media ( max-width: 768px ) {
	.ix-skills-exp__grid {
		grid-template-columns: minmax( 0, 1fr );
	}
}

/* ==========================================================================
   15. FAQ ACCORDION
   ========================================================================== */

.ix-faq {
	position: relative;
	background: var(--ix-page);
}

.ix-faq__list {
	max-width: 760px;
	margin: clamp( 2rem, 4vw, 3.5rem ) auto 0;
}

.ix-faq__item {
	border: 1px solid var(--ix-line);
	border-radius: var(--ix-r-lg);
	background: var(--ix-card);
	margin-bottom: var(--ix-sp-3);
	overflow: hidden;
	transition: box-shadow var(--ix-dur-fast) var(--ix-ease),
		border-color var(--ix-dur-fast) var(--ix-ease);
}

.ix-faq__item.is-open {
	border-color: var(--ix-accent);
	box-shadow: var(--ix-shadow-md);
}

.ix-faq__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	padding: clamp( 1rem, 2vw, 1.375rem ) clamp( 1rem, 2.5vw, 1.75rem );
	background: none;
	border: 0;
	color: var(--ix-ink);
	font: inherit;
	font-size: var(--ix-fs-body);
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}

.ix-faq__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--ix-surface-2);
	color: var(--ix-ink-soft);
	transition: transform var(--ix-dur-fast) var(--ix-ease);
}

.ix-faq__item.is-open .ix-faq__icon {
	transform: rotate( 180deg );
	background: var(--ix-accent-soft);
	color: var(--ix-accent);
}

.ix-faq__body {
	padding: 0 clamp( 1rem, 2.5vw, 1.75rem );
	transition: max-height var(--ix-dur) var(--ix-ease);
}

.ix-faq__body[hidden] {
	display: none;
}

.ix-faq__answer {
	padding-bottom: clamp( 1rem, 2vw, 1.375rem );
}

.ix-faq__answer p {
	margin: 0;
	color: var(--ix-ink-soft);
	font-size: var(--ix-fs-sm);
	line-height: 1.75;
}

/* ==========================================================================
   16. TRUST-BADGE MARQUEE
   ========================================================================== */

.ix-trust-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.4375rem 1.125rem;
	border: 1px solid var(--ix-line-strong);
	border-radius: var(--ix-r-pill);
	background: var(--ix-card);
	color: var(--ix-ink-2);
	font-size: var(--ix-fs-sm);
	font-weight: 600;
	white-space: nowrap;
}

/* ==========================================================================
   17. CUSTOM CURSOR
   ========================================================================== */

.ix-cursor__dot,
.ix-cursor__ring {
	position: fixed;
	top: 0;
	left: 0;
	pointer-events: none;
	z-index: 9999;
	border-radius: 50%;
	transition-property: opacity, transform;
}

.ix-cursor__dot {
	width: 8px;
	height: 8px;
	background: var(--ix-accent);
}

.ix-cursor__ring {
	width: 40px;
	height: 40px;
	border: 2px solid var(--ix-accent);
	opacity: 0.55;
	will-change: transform;
}

.ix-cursor__ring--drag::before {
	content: "Drag";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 0.5625rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--ix-accent);
}

/* Wordmark gradient cursor-follow */
[data-ix-wordmark] {
	background: radial-gradient(
		circle at var(--ix-grad-x, 50%) var(--ix-grad-y, 50%),
		var(--ix-accent) 0%,
		var(--ix-ink) 55%
	);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}