/* ==========================================================================
   HEXACOM Corporate — theme styles
   Charcoal #1E2126 · Champagne #C9AA7B · Cream #F6F0E7 · White · Gray #F3F4F6
   ========================================================================== */

:root {
	--hx-charcoal: var(--wp--preset--color--charcoal, #1E2126);
	--hx-charcoal-soft: var(--wp--preset--color--charcoal-soft, #2A2E35);
	--hx-champagne: var(--wp--preset--color--champagne, #C9AA7B);
	--hx-champagne-deep: var(--wp--preset--color--champagne-deep, #7F6238);
	--hx-cream: var(--wp--preset--color--cream, #F6F0E7);
	--hx-gray: var(--wp--preset--color--light-gray, #F3F4F6);
	--hx-slate: var(--wp--preset--color--slate, #4A4F57);
	--hx-line: var(--wp--preset--color--line, #E4DED3);
	--hx-header-h: 76px;
	--hx-radius: 3px;
	--hx-ease: cubic-bezier(.2, .7, .2, 1);
	--hx-section-y: clamp(2.75rem, 5vw, 4.5rem);
}

html { scroll-padding-top: calc(var(--hx-header-h) + 1rem); }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img { height: auto; max-width: 100%; }
::selection { background: var(--hx-champagne); color: var(--hx-charcoal); }
:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--hx-champagne-deep);
	outline-offset: 3px;
}
.screen-reader-text:focus { clip: auto !important; }

/* Skip link (core adds one for block themes) */
.skip-link.screen-reader-text:focus { background: var(--hx-charcoal); color: #fff; padding: .75rem 1rem; z-index: 100000; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.hx-header {
	position: sticky; top: 0; z-index: 50;
	background: #fff; /* No backdrop-filter: it would trap the fixed mobile menu overlay inside the header. */
	border-bottom: 1px solid transparent;
	transition: border-color .25s var(--hx-ease), box-shadow .25s var(--hx-ease);
}
.admin-bar .hx-header { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) { .admin-bar .hx-header { top: 0; } }
.hx-header.is-scrolled { border-bottom-color: var(--hx-line); box-shadow: 0 6px 24px -18px rgba(30, 33, 38, .35); }
.hx-header__inner { min-height: var(--hx-header-h); gap: 2rem; }
.hx-header__nav { gap: 1.75rem; }
.hx-logo a { display: inline-block; color: inherit; text-decoration: none; }
.hx-logo svg { max-width: 100%; }

.hx-nav .wp-block-navigation-item__content { color: var(--hx-charcoal); text-decoration: none; padding: .5rem 0; letter-spacing: .01em; }
.hx-nav .wp-block-navigation-item__content:hover { color: var(--hx-champagne-deep); }
.hx-nav.wp-block-navigation { gap: 1.6rem; }
.hx-nav .wp-block-navigation__submenu-container {
	border: 1px solid var(--hx-line) !important;
	border-radius: var(--hx-radius);
	box-shadow: 0 24px 48px -24px rgba(30, 33, 38, .28);
	padding: .5rem 0 !important;
	min-width: 270px !important;
	background: #fff;
}
.hx-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: .6rem 1.25rem !important; font-size: .9rem; }
.hx-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: var(--hx-cream); color: var(--hx-charcoal); }
.hx-nav .wp-block-navigation__submenu-icon { color: var(--hx-champagne-deep); }
.hx-header__cta .wp-block-button__link { padding: .7rem 1.2rem; font-size: .84rem; white-space: nowrap; }

/* Mobile overlay */
.hx-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.hx-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.hx-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
.hx-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { align-items: flex-start !important; text-align: left; }
.hx-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item { width: 100%; border-bottom: 1px solid rgba(255, 255, 255, .1); padding-bottom: .75rem; }
.hx-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: 1.5rem clamp(1rem, 6vw, 2.5rem) 2.5rem;
}
.hx-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { color: #fff; font-size: 1.1rem; }
.hx-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { border: 0 !important; box-shadow: none; background: transparent; padding: 0 0 0 1rem !important; }
.hx-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { color: rgba(255, 255, 255, .72); font-size: .98rem; padding: .35rem 0 !important; }
.hx-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 1rem; }
.hx-nav .wp-block-navigation__responsive-container-open svg,
.hx-nav .wp-block-navigation__responsive-container-close svg { width: 28px; height: 28px; }

@media (max-width: 1080px) {
	.hx-header .hx-header__cta { display: none !important; }
}

/* --------------------------------------------------------------------------
   Typography helpers
   -------------------------------------------------------------------------- */
.is-style-hx-eyebrow {
	display: inline-flex; align-items: center; gap: .75rem;
	font-size: .74rem !important; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
	color: var(--hx-champagne-deep); margin-bottom: 1rem !important;
}
.is-style-hx-eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.has-text-align-center.is-style-hx-eyebrow { display: flex; justify-content: center; }
.is-style-hx-lead { font-size: clamp(1.08rem, 1.6vw, 1.22rem); line-height: 1.65; color: var(--hx-slate); max-width: 46rem; }
.has-text-align-center.is-style-hx-lead { margin-left: auto !important; margin-right: auto !important; }
.hx-muted { color: #5F6369; }

h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.wp-element-button, .wp-block-button__link { transition: background-color .2s var(--hx-ease), color .2s var(--hx-ease), border-color .2s var(--hx-ease); }
.wp-block-button.is-style-hx-outline .wp-block-button__link { background: transparent; color: var(--hx-charcoal); border: 1px solid var(--hx-charcoal); }
.wp-block-button.is-style-hx-outline .wp-block-button__link:hover { background: var(--hx-charcoal); color: #fff; }
.wp-block-button.is-style-hx-light .wp-block-button__link { background: var(--hx-champagne); border-color: var(--hx-champagne); color: var(--hx-charcoal); }
.wp-block-button.is-style-hx-light .wp-block-button__link:hover { background: #fff; border-color: #fff; color: var(--hx-charcoal); }
.wp-block-button.is-style-hx-text .wp-block-button__link {
	text-align: left; background: none; border: 0; padding: .25rem 0; color: var(--hx-charcoal);
	border-bottom: 1px solid var(--hx-champagne); border-radius: 0; font-weight: 600;
}
.wp-block-button.is-style-hx-text .wp-block-button__link::after { content: "→"; display: inline-block; margin-left: .5rem; transition: transform .2s var(--hx-ease); }
.wp-block-button.is-style-hx-text .wp-block-button__link:hover { color: var(--hx-champagne-deep); background: none; }
.wp-block-button.is-style-hx-text .wp-block-button__link:hover::after { transform: translateX(3px); }
.hx-section--dark .wp-block-button.is-style-hx-outline .wp-block-button__link,
.hx-dark .wp-block-button.is-style-hx-outline .wp-block-button__link { color: #fff; border-color: rgba(255, 255, 255, .5); }
.hx-section--dark .wp-block-button.is-style-hx-outline .wp-block-button__link:hover { background: #fff; color: var(--hx-charcoal); }
.hx-section--dark .wp-block-button.is-style-hx-text .wp-block-button__link { color: #fff; }

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.hx-main { margin-top: 0; }
.hx-main > .wp-block-post-content > *:first-child { margin-top: 0; }
.wp-block-post-content > .alignfull + .alignfull { margin-top: 0; }
.hx-section { padding-top: var(--hx-section-y); padding-bottom: var(--hx-section-y); margin-top: 0 !important; margin-bottom: 0 !important; }
.hx-section--tight { padding-top: clamp(2.25rem, 4vw, 3.5rem); padding-bottom: clamp(2.25rem, 4vw, 3.5rem); }
.hx-section--slim { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.hx-section--cream, .is-style-hx-cream { background: var(--hx-cream); }
.hx-section--gray { background: var(--hx-gray); }
.hx-section--line { border-top: 1px solid var(--hx-line); }
.hx-section--dark, .is-style-hx-dark { background: var(--hx-charcoal); color: rgba(255, 255, 255, .78); }
.hx-section--dark :where(h1, h2, h3, h4, h5, h6) { color: #fff; }
.hx-section--dark a:where(:not(.wp-element-button)) { color: #fff; }
.hx-section--dark .is-style-hx-eyebrow { color: var(--hx-champagne); }
.hx-section--dark .is-style-hx-lead { color: rgba(255, 255, 255, .72); }

.hx-section__head { margin-bottom: clamp(1.5rem, 3vw, 2.5rem) !important; }
.hx-section__head.is-split { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; }
.hx-section__head h2 { max-width: 22ch; }
.hx-section__head .is-style-hx-lead { margin-top: 1rem; }

/* --------------------------------------------------------------------------
   Home hero
   -------------------------------------------------------------------------- */
.hx-hero { position: relative; overflow: hidden; padding-top: clamp(2.5rem, 5vw, 4.5rem) !important; padding-bottom: clamp(2.5rem, 5vw, 4.5rem) !important; background: linear-gradient(180deg, #fff 0%, var(--hx-cream) 100%); }
.hx-hero .wp-block-columns { align-items: center !important; gap: clamp(2rem, 5vw, 4.5rem); }
.hx-hero h1 { font-size: clamp(2.5rem, 5.4vw, 4.4rem); max-width: 13ch; }
.hx-hero h1 em, .hx-accent { font-style: normal; color: var(--hx-champagne-deep); }
.hx-hero .is-style-hx-lead { margin-top: 1.5rem; }
.hx-hero .wp-block-buttons { margin-top: 2.25rem; }

.hx-hero__visual {
	position: relative; aspect-ratio: 4 / 4.4; background: var(--hx-charcoal); color: #fff;
	padding: clamp(1.5rem, 3vw, 2.5rem) !important; overflow: hidden; border-radius: var(--hx-radius);
	display: flex; flex-direction: column; justify-content: flex-end;
}
.hx-hero__visual::before {
	content: ""; position: absolute; inset: 0;
	background-image:
		linear-gradient(rgba(201, 170, 123, .09) 1px, transparent 1px),
		linear-gradient(90deg, rgba(201, 170, 123, .09) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
	mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
}
.hx-hero__visual::after {
	content: ""; position: absolute; right: 9%; top: 9%; width: 48%; aspect-ratio: 183.5 / 143.75;
	background: url("../brand/mark-champagne.svg") no-repeat center / contain; opacity: .95;
}
.hx-hero__visual > * { position: relative; z-index: 1; }
.hx-hero__visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hx-hero__visual .wp-block-image { margin: 0; position: absolute; inset: 0; z-index: 0; }
.hx-hero__visual:has(.wp-block-image)::after { display: none; }
.hx-hero__visual:has(.wp-block-image)::before { background: linear-gradient(180deg, rgba(30, 33, 38, 0) 35%, rgba(30, 33, 38, .88) 100%); -webkit-mask-image: none; mask-image: none; z-index: 1; }
.hx-hero__visual .wp-block-image img { object-position: center 30%; }
.hx-hero__visual:has(.wp-block-image) .hx-hero__pillars li { background: rgba(30, 33, 38, .72); }
.hx-hero__pillars { list-style: none; padding: 0 !important; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .12); }
.hx-hero__pillars li { background: rgba(30, 33, 38, .92); padding: 1rem 1.1rem; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .86); }
.hx-hero__pillars li::before { content: ""; display: block; width: 18px; height: 1px; background: var(--hx-champagne); margin-bottom: .7rem; }
.hx-hero__caption { font-size: .8rem !important; color: rgba(255, 255, 255, .55); margin-top: 1rem !important; letter-spacing: .04em; }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.hx-card, .is-style-hx-card {
	position: relative; background: #fff; border: 1px solid var(--hx-line); border-radius: var(--hx-radius);
	padding: clamp(1.5rem, 2.5vw, 2.1rem);
	transition: border-color .25s var(--hx-ease), transform .25s var(--hx-ease), box-shadow .25s var(--hx-ease);
}
.hx-section--cream .hx-card { background: #fff; }
.hx-card:hover { border-color: var(--hx-champagne); box-shadow: 0 22px 40px -32px rgba(30, 33, 38, .45); }
.hx-card h3 { font-size: 1.3rem; margin-top: 1.1rem; margin-bottom: .6rem; }
.hx-card p { font-size: .96rem; }
.hx-card .hx-icon { color: var(--hx-champagne-deep); line-height: 0; }

.hx-service-card { display: flex; flex-direction: column; height: 100%; padding-top: 2.1rem !important; }
.hx-service-card::before { content: ""; position: absolute; left: -1px; top: -1px; width: 48px; height: 2px; background: var(--hx-champagne); }
.hx-service-card h3 { min-height: 2.6em; }
.hx-service-card .wp-block-list { margin: .9rem 0 1.4rem; padding: 0; list-style: none; font-size: .9rem; }
.hx-service-card .wp-block-list li { padding: .42rem 0; border-top: 1px solid var(--hx-gray); color: var(--hx-charcoal); }
.hx-service-card .wp-block-buttons { margin-top: auto !important; }
.hx-grid-equal > * { height: 100%; }

.hx-value { border-top: 1px solid var(--hx-line); padding-top: 1.5rem !important; }
.hx-value .hx-icon { color: var(--hx-champagne-deep); }
.hx-value h3 { font-size: 1.12rem; margin: .9rem 0 .5rem; }
.hx-value p { font-size: .94rem; }
.hx-section--dark .hx-value { border-top-color: rgba(255, 255, 255, .14); }
.hx-section--dark .hx-value .hx-icon { color: var(--hx-champagne); }

/* Industry tiles */
.hx-industry { background: #fff; border: 1px solid var(--hx-line); padding: 1.6rem !important; border-radius: var(--hx-radius); height: 100%; }
.hx-industry .hx-icon { color: var(--hx-champagne-deep); }
.hx-industry h3 { font-size: 1.08rem; margin: 1rem 0 .4rem; }
.hx-industry p { font-size: .92rem; margin: 0; }

.hx-section--dark .hx-industry { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .14); }
.hx-section--dark .hx-industry .hx-icon { color: var(--hx-champagne); }
.hx-section--dark .hx-industry p { color: rgba(255, 255, 255, .68); }

/* Steps */
.hx-steps { counter-reset: hxstep; }
.hx-step { counter-increment: hxstep; position: relative; padding-top: 3rem !important; border-top: 1px solid var(--hx-line); }
.hx-step::before {
	content: counter(hxstep, decimal-leading-zero); position: absolute; top: 1.1rem; left: 0;
	font-size: .82rem; font-weight: 600; letter-spacing: .14em; color: var(--hx-champagne-deep);
}
.hx-step::after { content: ""; position: absolute; top: -1px; left: 0; width: 40px; height: 1px; background: var(--hx-charcoal); }
.hx-step h3 { font-size: 1.15rem; margin: 0 0 .5rem; }
.hx-step p { font-size: .94rem; margin: 0; }
.hx-section--dark .hx-step { border-top-color: rgba(255, 255, 255, .16); }
.hx-section--dark .hx-step::before { color: var(--hx-champagne); }
.hx-section--dark .hx-step::after { background: var(--hx-champagne); }

/* Photos */
.hx-photo img, .hx-hero-photo img, .hx-system__image img { contain-intrinsic-size: none; }
.hx-photo, .hx-hero-photo { margin: 0 !important; }
.hx-photo img, .hx-hero-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--hx-radius); display: block; }
.hx-hero-photo img { aspect-ratio: 4 / 3.4; box-shadow: 0 30px 60px -40px rgba(30, 33, 38, .55); }
.hx-split--media { align-items: center !important; }
.hx-split--media .hx-photo:not(.hx-photo--contain) img { aspect-ratio: 4 / 3.6; }
.hx-photo--contain img { object-fit: contain; height: auto; background: #fff; border-radius: var(--hx-radius); }
.hx-photo--panel { margin-bottom: 1.5rem !important; }
.hx-photo--panel img { aspect-ratio: 16 / 9; }
.hx-hero-split { align-items: center !important; gap: clamp(1.5rem, 4vw, 3.5rem) !important; }
.hx-page-hero.has-photo::after { display: none; }
.hx-page-hero--product .hx-hero-photo img { object-fit: contain; background: #fff; aspect-ratio: 1 / 1; padding: 1rem; box-sizing: border-box; }
.hx-reseller { gap: 1.25rem 2rem !important; align-items: center; background: #fff; border: 1px solid var(--hx-line); border-left: 3px solid var(--hx-champagne); padding: 1rem 1.5rem !important; }
.hx-reseller p { margin: 0; }
.hx-reseller__logo { margin: 0 !important; }
.hx-reseller__logo img { height: 46px; width: auto; }
.hx-reseller__logo--terracom img { height: 40px; border-radius: 4px; }
.hx-photo--wide { max-width: 860px; margin: 2.25rem auto 0 !important; }
.hx-industries-line { margin-top: 1.75rem !important; font-size: .95rem; }
.hx-care-grid { gap: .75rem !important; }
.hx-care-item { gap: .9rem !important; align-items: center; background: #fff; border: 1px solid var(--hx-line); padding: 1rem 1.1rem !important; border-radius: var(--hx-radius); }
.hx-care-item .hx-icon { color: var(--hx-champagne-deep); }
.hx-care-item p { margin: 0; font-size: .95rem; color: var(--hx-charcoal); }

/* Split feature blocks */
.hx-split { gap: clamp(2rem, 6vw, 5rem) !important; }
.hx-split .is-style-hx-lead { margin-top: 1rem; }
.hx-panel { background: var(--hx-cream); padding: clamp(1.5rem, 3vw, 2.5rem) !important; border-radius: var(--hx-radius); }
.hx-section--cream .hx-panel { background: #fff; }
.hx-panel h3 { font-size: 1.1rem; }

.is-style-hx-checks, .hx-checks { list-style: none; padding-left: 0 !important; padding-inline-start: 0 !important; }
.is-style-hx-checks li, .hx-checks li { position: relative; padding: .55rem 0 .55rem 1.75rem; border-bottom: 1px solid var(--hx-line); }
.is-style-hx-checks li::before, .hx-checks li::before { content: ""; position: absolute; left: 0; top: 1.2rem; width: 12px; height: 1px; background: var(--hx-champagne-deep); }
.is-style-hx-checks li:last-child, .hx-checks li:last-child { border-bottom: 0; }

/* Systems (technology) list */
.hx-system { gap: clamp(1.5rem, 4vw, 3rem) !important; padding: clamp(1.75rem, 3vw, 2.5rem) 0 !important; border-top: 1px solid var(--hx-line); margin: 0 !important; align-items: center !important; }
.hx-system h3 { margin: 0 0 .25rem; font-size: 1.4rem; }
.hx-system .hx-system__kicker { font-size: .78rem !important; letter-spacing: .14em; text-transform: uppercase; color: var(--hx-champagne-deep); margin: 0 0 .75rem !important; }
.hx-system__best { font-size: .92rem; background: var(--hx-gray); padding: .8rem 1rem; border-left: 2px solid var(--hx-champagne); }
.hx-system__image { margin: 0 !important; background: var(--hx-cream); border-radius: var(--hx-radius); padding: 1.25rem; text-align: center; }
.hx-system__image img { width: 100%; height: auto; max-height: 320px; object-fit: contain; }
.hx-system__icon { min-height: 170px; display: grid !important; place-items: center; background: var(--hx-cream); color: var(--hx-champagne-deep); border-radius: var(--hx-radius); }
.hx-system .wp-block-buttons { gap: 1rem; align-items: center; }

/* Service page hero */
.hx-page-hero {
	padding-top: clamp(1.75rem, 3.5vw, 3rem) !important; padding-bottom: clamp(2rem, 4vw, 3rem) !important;
	background: var(--hx-cream); border-bottom: 1px solid var(--hx-line); margin-bottom: 0 !important;
}
.hx-page-hero h1, .hx-page-hero .wp-block-post-title, .hx-page-hero .wp-block-query-title { font-size: clamp(2.1rem, 4.2vw, 3.4rem); max-width: 22ch; margin-top: .25rem; }
.hx-page-hero .is-style-hx-lead { margin-top: 1.1rem; }
.hx-page-hero .wp-block-buttons { margin-top: 2rem; }
.hx-page-hero--service { background: var(--hx-cream); position: relative; overflow: hidden; }
.hx-page-hero--service::after {
	content: ""; position: absolute; right: -60px; bottom: -40px; width: 360px; aspect-ratio: 183.5 / 143.75;
	background: url("../brand/mark-champagne.svg") no-repeat center / contain; opacity: .12; pointer-events: none;
}
.page .hx-main > .wp-block-post-content { padding-top: clamp(2rem, 4vw, 3rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.page-template-page-landing .hx-main > .wp-block-post-content,
.home .hx-main > .wp-block-post-content,
.hx-main--landing > .wp-block-post-content { padding-top: 0; padding-bottom: 0; }
.wp-site-blocks > * { margin-block-start: 0 !important; }

/* FAQ */
.hx-faq > h2 { margin-bottom: 1.5rem; }
.hx-faq .wp-block-details { border-top: 1px solid var(--hx-line); padding: .95rem 0; margin: 0; }
.hx-faq .wp-block-details:last-child { border-bottom: 1px solid var(--hx-line); }
.hx-faq summary { cursor: pointer; font-weight: 600; color: var(--hx-charcoal); list-style: none; position: relative; padding-right: 2rem; font-size: 1.04rem; }
.hx-faq summary::-webkit-details-marker { display: none; }
.hx-faq summary::after { content: "+"; position: absolute; right: 0; top: -.1rem; font-weight: 300; font-size: 1.5rem; color: var(--hx-champagne-deep); transition: transform .2s var(--hx-ease); }
.hx-faq details[open] summary::after { transform: rotate(45deg); }
.hx-faq details > :not(summary) { margin-top: .75rem; }

/* Notice / disclaimer */
.hx-note { font-size: .88rem; color: #5D626B; border-left: 2px solid var(--hx-champagne); padding: .9rem 1.1rem !important; background: var(--hx-gray); }

/* Related services */
.hx-related a { text-decoration: none; }
.hx-related .hx-card h3 a { color: var(--hx-charcoal); }
.hx-related .hx-card h3 a::after { content: ""; position: absolute; inset: 0; }

/* --------------------------------------------------------------------------
   CTA
   -------------------------------------------------------------------------- */
.hx-cta {
	background: var(--hx-charcoal); color: rgba(255, 255, 255, .78); text-align: center;
	padding: clamp(3rem, 6vw, 4.5rem) clamp(1rem, 4vw, 2.5rem) !important; position: relative; overflow: hidden; margin-top: 0 !important;
}
.hx-cta::before {
	content: ""; position: absolute; left: 50%; bottom: -55%; width: 620px; aspect-ratio: 183.5 / 143.75; transform: translateX(-50%);
	background: url("../brand/mark-champagne.svg") no-repeat center / contain; opacity: .07; pointer-events: none;
}
.hx-cta > * { position: relative; }
.hx-cta h2 { color: #fff; font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
.hx-cta .is-style-hx-eyebrow { color: var(--hx-champagne); display: flex; justify-content: center; }
.hx-cta .is-style-hx-lead { color: rgba(255, 255, 255, .72); }
.hx-cta .wp-block-buttons { margin-top: 2rem; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.hx-footer { background: #17191D; color: rgba(255, 255, 255, .66); padding-top: clamp(2.75rem, 5vw, 4rem); padding-bottom: 2rem; font-size: .92rem; margin-top: 0 !important; }
.hx-footer a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.hx-footer a:hover { color: var(--hx-champagne); }
.hx-footer__cols { gap: clamp(2rem, 4vw, 4rem) !important; }
.hx-footer__tagline { max-width: 30rem; margin-top: 1.5rem !important; line-height: 1.7; }
.hx-footer__title { font-size: .74rem !important; letter-spacing: .2em; text-transform: uppercase; color: var(--hx-champagne) !important; font-weight: 600; margin-bottom: 1.1rem !important; }
.hx-footer__list { list-style: none; padding: 0 !important; margin: 0; }
.hx-footer__list li { padding: .32rem 0; }
.hx-footer__bottom { margin-top: clamp(2.5rem, 5vw, 4rem) !important; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .82rem; }
.hx-footer__bottom p { margin: 0; }
.hx-footer .hx-company-info { margin-top: 1.5rem; }
.hx-footer .hx-company-info__item { color: rgba(255, 255, 255, .78); }

/* --------------------------------------------------------------------------
   Company info, clients, breadcrumbs, badges (plugin blocks)
   -------------------------------------------------------------------------- */
.hx-company-info { display: grid; gap: .65rem; font-style: normal; }
.hx-company-info--inline { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.hx-company-info__item { display: flex; gap: .7rem; align-items: flex-start; color: var(--hx-charcoal); text-decoration: none; }
.hx-company-info__item svg { flex: none; margin-top: .3rem; color: var(--hx-champagne); }
.hx-company-info--cards { grid-template-columns: 1fr; gap: .75rem; margin-bottom: 2.5rem; }
.hx-company-info--cards .hx-company-info__item { flex-direction: row !important; align-items: flex-start; gap: 1rem !important; }
.hx-company-info--cards .hx-company-info__text { display: flex; flex-direction: column; gap: .2rem; overflow-wrap: anywhere; }
.hx-company-info--cards .hx-company-info__item { flex-direction: column; background: #fff; border: 1px solid var(--hx-line); padding: 1.4rem; border-radius: var(--hx-radius); gap: .4rem; }
.hx-company-info--cards .hx-company-info__label { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--hx-champagne-deep); }
.hx-company-info--cards .hx-company-info__value { font-weight: 600; color: var(--hx-charcoal); font-size: 1.02rem; }
.hx-company-info--cards a.hx-company-info__item:hover { border-color: var(--hx-champagne); }

.hx-clients__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; list-style: none; padding: 0 !important; margin: 0; background: var(--hx-line); border: 1px solid var(--hx-line); }
.hx-clients__item { background: #fff; display: grid; place-items: center; aspect-ratio: 3 / 2; padding: 1.25rem 1.5rem; }
.hx-clients__item img { max-height: 70px; max-width: 80%; width: auto; object-fit: contain; }
.hx-clients--grayscale .hx-clients__item img { filter: grayscale(1); opacity: .72; transition: filter .25s, opacity .25s; }
.hx-clients--grayscale .hx-clients__item:hover img, .hx-clients--grayscale .hx-clients__item:focus-within img { filter: none; opacity: 1; }
.hx-clients__head { margin-bottom: 2.5rem; }

.hx-breadcrumbs { font-size: .8rem; color: #5F6369; margin-bottom: 1.25rem; }
.hx-breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.hx-breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: .4rem; color: var(--hx-champagne-deep); }
.hx-breadcrumbs a { color: #5F6369; text-decoration: none; }
.hx-breadcrumbs a:hover { color: var(--hx-charcoal); text-decoration: underline; }
.hx-breadcrumbs [aria-current] { color: var(--hx-charcoal); }

.hx-lang-badge {
	display: inline-flex; align-items: center; justify-content: center; min-width: 2.3rem;
	padding: .15rem .55rem; border: 1px solid var(--hx-line); border-radius: 999px;
	font-size: .7rem; font-weight: 600; letter-spacing: .08em; color: var(--hx-charcoal); background: #fff; line-height: 1.6;
}
.hx-lang-badge[lang="ar"] { font-family: var(--wp--preset--font-family--plex-arabic); letter-spacing: 0; font-size: .74rem; border-color: var(--hx-champagne); background: var(--hx-cream); }

/* --------------------------------------------------------------------------
   Insights listing & cards
   -------------------------------------------------------------------------- */
.hx-insights__body { padding-top: clamp(1.5rem, 3vw, 2.5rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.hx-card--insight { padding: 0 !important; overflow: hidden; display: flex; flex-direction: column; height: 100%; }
.hx-card--insight .hx-card__image { margin: 0; background: var(--hx-cream); }
.hx-card--insight .hx-card__image img { transition: transform .5s var(--hx-ease); }
.hx-card--insight:hover .hx-card__image img { transform: scale(1.025); }
.hx-card__body { padding: 1.4rem 1.5rem 1.6rem !important; display: flex; flex-direction: column; flex: 1; }
.hx-card__meta { gap: .6rem !important; align-items: center; margin-bottom: .8rem; font-size: .76rem; }
.hx-card__cat, .hx-article__cat { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--hx-champagne-deep); }
.hx-card__cat a, .hx-article__cat a { color: inherit; text-decoration: none; }
.hx-card__title { font-size: 1.18rem !important; line-height: 1.35; margin: 0 0 .6rem !important; }
.hx-card__title a { color: var(--hx-charcoal); text-decoration: none; }
.hx-card__title a:hover { color: var(--hx-champagne-deep); }
.hx-card__excerpt { font-size: .92rem; color: var(--hx-slate); }
.hx-card__excerpt p { margin: 0; }
.hx-card__more { margin-top: auto !important; padding-top: 1rem; font-size: .84rem; font-weight: 600; color: var(--hx-charcoal); text-decoration: none; }
.hx-card__more::after { content: " →"; color: var(--hx-champagne-deep); }
.hx-pagination { margin-top: 3rem !important; gap: .4rem; font-size: .9rem; }
.hx-pagination .page-numbers { display: inline-grid; place-items: center; min-width: 2.4rem; height: 2.4rem; border: 1px solid var(--hx-line); text-decoration: none; color: var(--hx-charcoal); }
.hx-pagination .page-numbers.current { background: var(--hx-charcoal); color: #fff; border-color: var(--hx-charcoal); }
.hx-empty { padding: 3rem; text-align: center; background: var(--hx-cream); }

/* Filters */
.hx-filter { box-sizing: border-box; display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: flex-end; padding: 1.25rem; background: #fff; border: 1px solid var(--hx-line); border-radius: var(--hx-radius); margin-bottom: 2.25rem; }
.hx-filter__field { display: flex; flex-direction: column; gap: .3rem; flex: 1 1 12rem; }
.hx-filter__field--search { flex: 2 1 16rem; }
.hx-filter label { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: #5F6369; font-weight: 600; }
.hx-filter select, .hx-filter input[type="search"] { height: 2.9rem; border: 1px solid var(--hx-line); border-radius: 2px; padding: 0 .85rem; font: inherit; font-size: .94rem; background: #fff; color: var(--hx-charcoal); width: 100%; }
.hx-filter button { height: 2.9rem; padding: 0 1.4rem; background: var(--hx-charcoal); color: #fff; border: 0; border-radius: 2px; font: inherit; font-weight: 600; font-size: .88rem; cursor: pointer; }
.hx-filter button:hover { background: var(--hx-champagne); color: var(--hx-charcoal); }
.hx-filter__reset { font-size: .84rem; align-self: center; }
.hx-filter__langs { display: flex; gap: .4rem; }
.hx-filter__langs a { padding: .55rem .9rem; border: 1px solid var(--hx-line); text-decoration: none; font-size: .84rem; color: var(--hx-charcoal); border-radius: 999px; }
.hx-filter__langs a[aria-current="true"] { background: var(--hx-charcoal); color: #fff; border-color: var(--hx-charcoal); }

/* Resource center themes */
.hx-topic { border: 1px solid var(--hx-line); padding: 1.5rem !important; background: #fff; border-radius: var(--hx-radius); height: 100%; }
.hx-topic h3 { font-size: 1.05rem; margin: 0 0 .5rem; }
.hx-topic p { font-size: .9rem; margin: 0; }
.hx-ar-title { font-family: var(--wp--preset--font-family--plex-arabic); letter-spacing: 0 !important; }

/* --------------------------------------------------------------------------
   Single article
   -------------------------------------------------------------------------- */
.hx-single__crumbs { padding-top: 2rem; }
.hx-article { padding-bottom: clamp(3rem, 6vw, 5rem); }
.hx-article__head { padding-top: .5rem; padding-bottom: 2rem; }
.hx-article__kicker { gap: .75rem !important; align-items: center; }
.hx-article__title { font-size: clamp(2rem, 4vw, 3.1rem) !important; margin-top: 1rem !important; }
.hx-article__dek { font-size: 1.18rem; color: var(--hx-slate); margin-top: 1rem; }
.hx-article__dek p { margin: 0; }
.hx-article__image { margin-bottom: 2.5rem !important; }
.hx-article-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; font-size: .84rem; color: #5F6369; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--hx-line); }
.hx-article-meta strong { color: var(--hx-charcoal); font-weight: 600; }

.hx-prose { font-size: 1.08rem; line-height: 1.78; color: #383C43; }
.hx-prose > * + * { margin-top: 1.25em; }
.hx-prose h2 { font-size: clamp(1.5rem, 2.6vw, 1.95rem); margin-top: 2.4em; }
.hx-prose h3 { font-size: clamp(1.2rem, 2vw, 1.4rem); margin-top: 2em; }
.hx-prose a { text-decoration-color: var(--hx-champagne); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.hx-prose ul, .hx-prose ol { padding-inline-start: 1.4em; }
.hx-prose li + li { margin-top: .45em; }
.hx-prose li::marker { color: var(--hx-champagne-deep); }
.hx-prose blockquote, .hx-prose .wp-block-quote {
	border: 0 !important; border-inline-start: 2px solid var(--hx-champagne) !important;
	padding: .25rem 0 !important; padding-inline-start: 1.5rem !important; margin-inline: 0; color: var(--hx-charcoal);
}
.hx-prose table, .hx-prose .wp-block-table table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.hx-prose th, .hx-prose td { border: 1px solid var(--hx-line); padding: .7rem .9rem; text-align: start; vertical-align: top; }
.hx-prose th { background: var(--hx-cream); color: var(--hx-charcoal); font-weight: 600; }
.hx-prose .wp-block-table { overflow-x: auto; }
.hx-prose figure { margin-inline: 0; }
.hx-prose .hx-faq { margin-top: 2rem; }

.hx-sources { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--hx-line); font-size: .9rem; }
.hx-sources h2 { font-size: .78rem !important; letter-spacing: .18em; text-transform: uppercase; color: var(--hx-champagne-deep) !important; margin-bottom: 1rem; }
.hx-sources ol { padding-inline-start: 1.25em; }
.hx-sources li { margin-bottom: .4rem; overflow-wrap: anywhere; }
.hx-sources .hx-note { margin-top: 1.5rem; }

.hx-related-insights { background: var(--hx-cream); padding: clamp(2.5rem, 5vw, 3.5rem) clamp(1rem, 4vw, 2.5rem); }
.hx-related-insights__inner { max-width: 1240px; margin: 0 auto; }
.hx-related-insights h2 { font-size: 1.6rem; margin-bottom: 2rem; }
.hx-related-insights__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1.5rem; }

/* --------------------------------------------------------------------------
   Arabic / RTL — scoped to article-owned content via lang="ar" dir="rtl"
   (set by HEXACOM Core on the element itself, never on <html>)
   -------------------------------------------------------------------------- */
[lang="ar"] {
	font-family: var(--wp--preset--font-family--plex-arabic);
	letter-spacing: 0 !important;
	font-feature-settings: normal;
}
[lang="ar"] :where(h1, h2, h3, h4, h5, h6, p, li, td, th, a, span, strong, summary) { letter-spacing: 0 !important; }
[lang="ar"] :where(h1, h2, h3, h4) { line-height: 1.45; font-weight: 600; }
[lang="ar"].hx-prose, [lang="ar"] .hx-prose { line-height: 1.95; font-size: 1.1rem; }
[dir="rtl"] { text-align: start; }
[dir="rtl"] .hx-faq summary { padding-right: 0; padding-left: 2rem; }
[dir="rtl"] .hx-faq summary::after { right: auto; left: 0; }
[dir="rtl"] .hx-note, [dir="rtl"].hx-note { border-left: 0; border-right: 2px solid var(--hx-champagne); }
[dir="rtl"] .hx-card__more::after { content: " ←"; }
.hx-card__title[dir="rtl"], .hx-card__excerpt[dir="rtl"] { text-align: right; }
.hx-card__title[lang="ar"] { font-size: 1.22rem !important; line-height: 1.55; }
.hx-card__excerpt[lang="ar"] { line-height: 1.85; }
.hx-article[dir="rtl"] .hx-article__kicker { justify-content: flex-start; }
.hx-article[dir="rtl"] .hx-sources ol { padding-inline-start: 1.25em; }
bdi.hx-ltr, .hx-ltr { unicode-bidi: isolate; direction: ltr; }

/* --------------------------------------------------------------------------
   Contact form
   -------------------------------------------------------------------------- */
.hx-form, .hx-form * { box-sizing: border-box; }
.hx-form__field { min-width: 0; }
.hx-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.25rem; }
.hx-form__field { display: flex; flex-direction: column; gap: .4rem; }
.hx-form__field--full { grid-column: 1 / -1; }
.hx-form label { font-size: .82rem; font-weight: 600; color: var(--hx-charcoal); }
.hx-form .hx-req { color: var(--hx-champagne-deep); }
.hx-form input[type="text"], .hx-form input[type="email"], .hx-form input[type="tel"], .hx-form select, .hx-form textarea {
	width: 100%; border: 1px solid #D9D3C8; border-radius: 2px; padding: .85rem .95rem; font: inherit; font-size: .98rem; color: var(--hx-charcoal); background: #fff;
	transition: border-color .2s;
}
.hx-form textarea { min-height: 9rem; resize: vertical; }
.hx-form :is(input, select, textarea):focus { border-color: var(--hx-charcoal); outline: 2px solid rgba(201, 170, 123, .45); outline-offset: 0; }
.hx-form :is(input, select, textarea)[aria-invalid="true"] { border-color: #B3261E; }
.hx-form__consent { display: flex; gap: .7rem; align-items: flex-start; font-size: .88rem; }
.hx-form__consent input { margin-top: .3rem; width: 1.05rem; height: 1.05rem; accent-color: var(--hx-charcoal); }
.hx-form__consent label { font-weight: 400; color: var(--hx-slate); font-size: .88rem; }
.hx-form__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.hx-form__submit { grid-column: 1 / -1; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.hx-form__submit button { background: var(--hx-charcoal); color: #fff; border: 1px solid var(--hx-charcoal); padding: 1rem 2rem; font: inherit; font-weight: 600; font-size: .92rem; cursor: pointer; border-radius: 2px; }
.hx-form__submit button:hover { background: var(--hx-champagne); border-color: var(--hx-champagne); color: var(--hx-charcoal); }
.hx-form__small { font-size: .8rem; color: #5F6369; }
.hx-form__msg { grid-column: 1 / -1; padding: 1rem 1.2rem; border-left: 3px solid; font-size: .94rem; }
.hx-form__msg--ok { background: #F1F7F1; border-color: #2E7D32; color: #1B4D1F; }
.hx-form__msg--err { background: #FCF1F0; border-color: #B3261E; color: #7A1A14; }
.hx-form__error { color: #B3261E; font-size: .8rem; }
@media (max-width: 640px) { .hx-form { grid-template-columns: 1fr; } }

.hx-contact-card { background: #fff; border: 1px solid var(--hx-line); padding: clamp(1.5rem, 3vw, 2.75rem) !important; border-radius: var(--hx-radius); box-shadow: 0 30px 60px -48px rgba(30, 33, 38, .5); }

/* --------------------------------------------------------------------------
   Responsive & motion
   -------------------------------------------------------------------------- */
@media (max-width: 781px) {
	.hx-hero__visual { aspect-ratio: auto; padding-top: 9rem !important; }
	.hx-hero__visual:has(.wp-block-image) { padding-top: 16rem !important; }
	.hx-system__image img { max-height: 240px; }
	.hx-hero__visual::after { width: 34%; right: 1.5rem; top: 1.5rem; }
	.hx-hero__pillars li { font-size: .72rem; padding: .85rem; }
	.hx-section__head h2 { max-width: none; }
	.hx-footer__cols { flex-wrap: wrap !important; }
	.hx-footer__cols > .wp-block-column { flex-basis: 100% !important; }
}
@media (min-width: 600px) and (max-width: 781px) {
	.hx-footer__cols > .hx-footer__links { flex-basis: calc(33.33% - 2rem) !important; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media print {
	.hx-header, .hx-footer, .hx-cta, .hx-related-insights, .hx-filter { display: none !important; }
}
.hx-system-wrap { margin: 0 !important; scroll-margin-top: 96px; }
[id] { scroll-margin-top: 96px; }