/*
Theme Name: Heacotex
Theme URI: https://heacotex.co.za
Description: Custom child theme for Heacotex c.c. — electric trace heating specialists. Header and footer are PHP-built (not Elementor). Page content is rendered by Elementor Pro for full design flexibility.
Author: Tuffle / Heacotex
Author URI: https://heacotex.co.za
Template: hello-elementor
Version: 1.0.9
Text Domain: heacotex
*/

/* ============================================================
   Heacotex — Design Tokens
   ============================================================ */
:root {
    --color-bg: #0A0A0A;
    --color-bg-pure: #000000;
    --color-surface: #1F2329;
    --color-border: #2A2F36;
    --color-text: #FFFFFF;
    --color-muted: #B6BCC6;
    --color-red: #F00000;
    --color-red-glow: #D01010;
    --color-blue: #0060C0;
    --color-blue-deep: #003F88;

    --font-display: 'Inter', system-ui, -apple-system, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;

    --container-width: 1280px;
    --container-padding: clamp(20px, 4vw, 48px);

    --header-h: 88px;
    --header-h-mobile: 64px;

    --transition-fast: 150ms ease;
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   Parent-theme button reset override
   ------------------------------------------------------------
   hello-elementor's reset.css styles every bare <button> /
   [type=button] / [type=submit] with a pink (#c36) outline and a
   pink hover fill. Re-point that pink to the Heacotex brand red so
   no pink appears anywhere. Same selectors as reset.css; this file
   loads after the parent, so it wins. Component buttons (.hx-btn,
   .button, .heacotex-* etc.) use class selectors with higher
   specificity and are unaffected.
   ============================================================ */
[type=button], [type=submit], button {
    background-color: transparent;
    border-color: var(--color-red);
    color: var(--color-red);
}
[type=button]:focus, [type=button]:hover,
[type=submit]:focus, [type=submit]:hover,
button:focus, button:hover {
    background-color: var(--color-red);
    color: #fff;
}

/* ============================================================
   Reset & Base
   ============================================================ */
html, body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    /* Modern: clip horizontal overflow without breaking sticky/fixed children */
    overflow-x: clip;
}
/* Fallback for browsers that don't support `clip` (older Safari) */
@supports not (overflow-x: clip) {
    html, body { overflow-x: hidden; }
}

/* No body padding — header sits in normal flow at top, slides back in when scrolling past 55vh */

a { color: var(--color-blue); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--color-red); }

img { max-width: 100%; height: auto; display: block; }

/* Hide WooCommerce prices globally (quote-only flow) */
.price, .woocommerce-Price-amount, .product .price { display: none !important; }

/* ============================================================
   HEADER
   ============================================================ */
.heacotex-header {
    position: relative;
    z-index: 1000;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
}

/* Sticky-revealed state: only kicks in once scrolled past 55vh */
.heacotex-header.is-stuck {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(10, 10, 10, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
    animation: heacotex-slide-down 360ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes heacotex-slide-down {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .heacotex-header.is-stuck {
        animation: none;
    }
}

.heacotex-topbar {
    background: var(--color-bg-pure);
    border-bottom: 1px solid var(--color-border);
    font-size: 13px;
    color: var(--color-muted);
}
@media (max-width: 1024px) { .heacotex-topbar { display: none; } }

.heacotex-topbar__inner {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 10px var(--container-padding);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}
.heacotex-topbar a { color: var(--color-muted); }
.heacotex-topbar a:hover { color: var(--color-text); }
.heacotex-topbar__left { display: flex; gap: 24px; }
.heacotex-topbar__left span { display: inline-flex; align-items: center; gap: 8px; }
.heacotex-topbar svg { width: 14px; height: 14px; opacity: 0.7; }

.heacotex-mainbar {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    height: var(--header-h);
    display: flex;
    align-items: center;
    gap: 32px;
}
.heacotex-logo { flex-shrink: 0; }
.heacotex-logo img { max-height: 56px; width: auto; max-width: 100%; }

/* ---- Mobile header: keep logo + Request-a-Quote CTA + burger on one row with
   NO x-overflow. The full-width logo is wide, so let it flex/shrink and step its
   height (and the CTA size) down per breakpoint. CTA + burger never shrink — the
   logo absorbs the squeeze. Placed after the base rules so it wins the cascade. */
@media (max-width: 1024px) {
    .heacotex-mainbar { height: var(--header-h-mobile); gap: 12px; }
    .heacotex-logo { flex: 0 1 auto; min-width: 0; }
    .heacotex-logo img { max-height: 40px; }
    .heacotex-cta { margin-left: auto; padding: 10px 16px; font-size: 12px; white-space: nowrap; flex-shrink: 0; }
    .heacotex-burger { margin-left: 4px; flex-shrink: 0; }
}
@media (max-width: 767.98px) {
    /* Mobile only (phones). 40 / 40 / 20 split: logo | Request-a-Quote | burger.
       768px+ is treated as tablet and uses the auto-width, right-aligned CTA above.
       The logo fills its
       40% slot (readable), the CTA scales down to share the row, burger gets 20%.
       flex-basis:0 + grow ratios 2:2:1 = 40/40/20 of the row, gap-safe. */
    .heacotex-mainbar { gap: 8px; }
    .heacotex-logo { flex: 2 1 0; min-width: 0; }
    .heacotex-logo img { max-height: 44px; max-width: 100%; }
    .heacotex-cta {
        flex: 2 1 0; min-width: 0; margin-left: 0;
        display: block;                 /* was inline-flex — lets the label wrap to the button width */
        padding: 8px 6px; font-size: 11px; letter-spacing: 0.2px; line-height: 1.15;
        white-space: normal; text-align: center;   /* wrap instead of overflowing */
    }
    .heacotex-burger {
        flex: 1 1 0; min-width: 0; margin-left: 0;
        display: flex; align-items: center; justify-content: flex-end;
    }
}
@media (max-width: 480px) {
    .heacotex-logo img { max-height: 40px; }
    .heacotex-cta { font-size: 10px; padding: 8px 4px; }
}

.heacotex-nav {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
}
.heacotex-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}
.heacotex-nav__list a {
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 10px 14px;
    border-radius: 2px;
    position: relative;
    display: inline-block;
    white-space: nowrap;
}
.heacotex-nav__list a::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 6px;
    height: 2px;
    background: var(--color-red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-base);
}
.heacotex-nav__list a:hover,
.heacotex-nav__list .current-menu-item > a {
    color: var(--color-red);
}
.heacotex-nav__list a:hover::after,
.heacotex-nav__list .current-menu-item > a::after {
    transform: scaleX(1);
}
@media (max-width: 1024px) { .heacotex-nav { display: none; } }

.heacotex-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-red);
    color: var(--color-text) !important;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 12px 22px;
    border-radius: 3px;
    border: 1px solid var(--color-red);
    transition: background var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
    flex-shrink: 0;
    text-decoration: none;
}
.heacotex-cta:hover,
.heacotex-cta:focus,
.heacotex-cta:visited,
.heacotex-cta:active {
    color: var(--color-text) !important;
    text-decoration: none;
}
.heacotex-cta:hover {
    background: var(--color-blue);
    border-color: var(--color-blue);
    transform: translateY(-1px);
}

.heacotex-burger {
    display: none;
    background: transparent !important;
    border: 1px solid var(--color-border);
    color: var(--color-text) !important;
    width: 44px;
    height: 44px;
    padding: 0;
    cursor: pointer;
    border-radius: 3px;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
    -webkit-tap-highlight-color: transparent;
    box-shadow: none !important;
}
@media (max-width: 1024px) { .heacotex-burger { display: inline-flex; } }
.heacotex-burger:hover { border-color: var(--color-text); }
.heacotex-burger:active { border-color: var(--color-text); }
.heacotex-burger[aria-expanded="true"] {
    background: var(--color-blue) !important;
    border-color: var(--color-blue);
}
/* Hamburger bars — pure CSS, no SVG dependency */
.heacotex-burger__bars {
    display: inline-flex;
    flex-direction: column;
    gap: 5px;
    width: 22px;
    height: 16px;
    justify-content: center;
}
.heacotex-burger__bars span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--color-text);
    border-radius: 2px;
    transition: transform 250ms ease, opacity 200ms ease, background 200ms ease;
    transform-origin: center;
}
/* Animated X on open state */
.heacotex-burger[aria-expanded="true"] .heacotex-burger__bars span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.heacotex-burger[aria-expanded="true"] .heacotex-burger__bars span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.heacotex-burger[aria-expanded="true"] .heacotex-burger__bars span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.heacotex-mobile-nav {
    display: none;
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
    padding: 16px var(--container-padding);
}
.heacotex-mobile-nav.is-open { display: block; }
.heacotex-mobile-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.heacotex-mobile-nav a {
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 14px 12px;
    border-radius: 3px;
    display: block;
    min-height: 44px;
    line-height: 1.2;
}
.heacotex-mobile-nav a:hover {
    background: var(--color-surface);
    color: var(--color-red);
}

/* ============================================================
   FOOTER
   ============================================================ */
.heacotex-footer {
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
    color: var(--color-muted);
    margin-top: 80px;
}

.heacotex-footer__top {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 80px var(--container-padding) 56px;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 48px;
}
@media (max-width: 1024px) { .heacotex-footer__top { grid-template-columns: 1fr 1fr; padding: 56px var(--container-padding) 40px; gap: 32px; } }
@media (max-width: 600px)  { .heacotex-footer__top { grid-template-columns: 1fr; gap: 32px; } }

.heacotex-footer__col h4 {
    color: var(--color-blue);
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 0 0 20px;
}
.heacotex-footer__col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.heacotex-footer__col a {
    color: var(--color-muted);
    font-size: 14px;
    transition: color var(--transition-fast);
}
.heacotex-footer__col a:hover { color: var(--color-red); }

.heacotex-footer__brand img { max-width: 160px; margin-bottom: 16px; }
.heacotex-footer__tagline {
    color: var(--color-muted);
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 20px;
}
.heacotex-footer__socials {
    display: flex;
    gap: 12px;
}
.heacotex-footer__socials a {
    width: 36px;
    height: 36px;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}
.heacotex-footer__socials a:hover { background: var(--color-red); border-color: var(--color-red); }
.heacotex-footer__socials svg { width: 16px; height: 16px; fill: currentColor; }

.heacotex-footer__contact {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 14px;
    line-height: 1.5;
}
.heacotex-footer__contact strong { color: var(--color-text); display: block; font-weight: 700; }
.heacotex-footer__contact a { color: var(--color-muted); }
.heacotex-footer__contact-cta {
    margin-top: 8px;
    display: inline-block;
    background: var(--color-red);
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 10px 18px;
    border-radius: 3px;
    align-self: flex-start;
}
.heacotex-footer__contact-cta:hover { background: var(--color-blue); color: var(--color-text); }

.heacotex-footer__bottom {
    background: var(--color-bg-pure);
    border-top: 1px solid var(--color-border);
}
.heacotex-footer__bottom-inner {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 20px var(--container-padding);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    font-size: 12px;
    color: var(--color-muted);
}
@media (max-width: 768px) {
    .heacotex-footer__bottom-inner { flex-direction: column; align-items: flex-start; }
}
.heacotex-footer__bottom-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 24px;
}
.heacotex-footer__bottom-menu a {
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 600;
}
.heacotex-footer__bottom-menu a:hover { color: var(--color-text); }

/* ============================================================
   Content area (Elementor pages live here)
   ============================================================ */
.heacotex-main {
    min-height: 60vh;
}

/* ============================================================
   Skip link (a11y)
   ============================================================ */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 8px;
    background: var(--color-red);
    color: var(--color-text);
    padding: 10px 16px;
    font-weight: 700;
    text-transform: uppercase;
    z-index: 10000;
    border-radius: 3px;
}
.skip-link:focus { left: 8px; }

/* ============================================================
   Focus styles (a11y)
   ============================================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--color-red);
    outline-offset: 2px;
}

/* ============================================================
   FRONT PAGE — utility tokens
   ============================================================ */
.hx-container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}
.hx-eyebrow {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--color-red);
    margin-bottom: 16px;
}
.hx-section-head {
    text-align: center;
    margin-bottom: 56px;
}
.hx-section-head h2 {
    font-family: var(--font-display);
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.5px;
    color: var(--color-text);
    margin: 0;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}
.hx-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--color-red);
}
.hx-link svg { width: 14px; height: 14px; transition: transform var(--transition-base); }
.hx-link:hover svg { transform: translateX(4px); }

/* Buttons */
.hx-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 16px 28px;
    border-radius: 3px;
    border: 1px solid transparent;
    transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
    cursor: pointer;
    white-space: nowrap;
}
.hx-btn svg { width: 16px; height: 16px; transition: transform var(--transition-base); }
.hx-btn:hover svg { transform: translateX(4px); }
/* Button colors locked with !important — defensive against any plugin / theme-builder
   CSS that tries to set <a> color globally with high specificity. */
.hx-btn--primary,
.hx-btn--primary:link,
.hx-btn--primary:visited,
.hx-btn--primary:hover,
.hx-btn--primary:focus,
.hx-btn--primary:active {
    color: var(--color-text) !important;
    text-decoration: none;
}
.hx-btn--primary {
    background: var(--color-red);
    border-color: var(--color-red);
}
.hx-btn--primary:hover {
    background: var(--color-blue);
    border-color: var(--color-blue);
    transform: translateY(-2px);
}

.hx-btn--ghost,
.hx-btn--ghost:link,
.hx-btn--ghost:visited,
.hx-btn--ghost:hover,
.hx-btn--ghost:focus,
.hx-btn--ghost:active {
    color: var(--color-text) !important;
    text-decoration: none;
}
.hx-btn--ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.2);
}
.hx-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--color-text);
}

.hx-btn--dark,
.hx-btn--dark:link,
.hx-btn--dark:visited,
.hx-btn--dark:focus,
.hx-btn--dark:active {
    color: var(--color-text) !important;
    text-decoration: none;
}
.hx-btn--dark {
    background: var(--color-bg-pure);
    border-color: var(--color-bg-pure);
}
.hx-btn--dark:hover {
    background: var(--color-text);
    color: var(--color-bg-pure) !important;
    transform: translateY(-2px);
}

/* Reveal animations */
[data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1), transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal].is-revealed {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   HERO
   ============================================================ */
.hx-hero {
    position: relative;
    /* No clipping — globe extends beyond the hero's right edge naturally.
       Horizontal page overflow is handled at html/body level via overflow-x: clip. */
    overflow: visible;
    background: var(--color-bg);
    padding: clamp(80px, 12vw, 160px) 0 clamp(64px, 10vw, 120px);
    min-height: 85vh;
    display: flex;
    align-items: center;
    /* Ensure the hero's background still terminates at its bottom — needed because overflow is visible */
    isolation: isolate;
}
.hx-hero__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.hx-grid-overlay {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
.hx-streak {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-red-glow), transparent);
    transform-origin: left center;
    filter: blur(0.5px);
    opacity: 0.6;
}
.hx-streak--1 { top: 18%; left: -20%; width: 70%; transform: rotate(-12deg); animation: streak 18s linear infinite; }
.hx-streak--2 { top: 48%; left: 10%;  width: 80%; transform: rotate(-15deg); opacity: 0.4; animation: streak 22s linear infinite reverse; }
.hx-streak--3 { top: 78%; left: -10%; width: 60%; transform: rotate(-10deg); opacity: 0.3; animation: streak 16s linear infinite; }
@keyframes streak {
    0%   { transform: rotate(-12deg) translateX(-30%); opacity: 0; }
    20%  { opacity: 0.6; }
    50%  { opacity: 0.6; }
    80%  { opacity: 0.6; }
    100% { transform: rotate(-12deg) translateX(30%); opacity: 0; }
}

/* Hero globe — static cable-wrapped Earth image (assets/static-globe.webp).
   Square PNG-style WebP with transparent corners + a built-in blue ring, so it
   seats directly on the dark hero with no extra framing. Decorative only. */
.hx-globe {
    position: absolute;
    right: clamp(16px, 5vw, 96px);
    top: 50%;
    width: clamp(380px, 47vw, 860px);
    height: auto;
    aspect-ratio: 1 / 1;
    transform: translateY(-50%);
    pointer-events: none;
    user-select: none;
    filter: drop-shadow(0 0 60px rgba(0, 96, 192, 0.22));
}
.hx-hero__bg { overflow: visible; }

/* Tablet (≤1024px): globe centred behind the text, dimmed so copy stays legible */
@media (max-width: 1024px) {
    .hx-globe {
        right: auto;
        left: 50%;
        top: 58%;
        width: min(78vw, 620px);
        transform: translate(-50%, -50%);
        opacity: 0.45;
    }
}

/* Mobile (≤768px) */
@media (max-width: 768px) {
    .hx-globe {
        top: 54%;
        width: min(88vw, 520px);
        opacity: 0.32;
    }
    .hx-hero__inner { text-align: left; }
}

/* Very small phones */
@media (max-width: 480px) {
    .hx-globe {
        top: 60%;
        width: min(96vw, 420px);
        opacity: 0.28;
    }
}
@media (prefers-reduced-motion: reduce) {
    .hx-streak { animation: none; }
}

.hx-hero__inner {
    position: relative;
    z-index: 1;
    max-width: var(--container-width);
    width: 100%;
    margin: 0 auto;
}
.hx-hero .hx-container {
    position: relative;
    z-index: 1;
}
/* On desktop, constrain text to ~60% so globe has room to breathe */
.hx-hero__title,
.hx-hero__sub,
.hx-hero__ctas,
.hx-hero__inner > .hx-eyebrow {
    max-width: 640px;
}
@media (max-width: 1024px) {
    .hx-hero__title, .hx-hero__sub, .hx-hero__ctas, .hx-hero__inner > .hx-eyebrow { max-width: 100%; }
}
/* Homepage hero brand mark — bigger than the header logo, sits above the eyebrow/title */
.hx-hero__logo {
    width: clamp(240px, 34vw, 440px);
    height: auto;
    margin: 0 0 26px;
}
@media (max-width: 768px) {
    .hx-hero__logo { width: clamp(200px, 60vw, 320px); margin-bottom: 18px; }
}

.hx-hero__title {
    font-family: var(--font-display);
    /* Trimmed slightly (was clamp(40px,7vw,84px)) to make room for the hero logo */
    font-size: clamp(38px, 6.2vw, 74px);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -1.5px;
    color: var(--color-text);
    margin: 0 0 28px;
}
.hx-hero__title em {
    font-style: italic;
    font-weight: 800;
    background: linear-gradient(120deg, var(--color-text) 0%, var(--color-blue) 50%, var(--color-text) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    /* Prevent italic right-overhang from clipping on background-clip:text */
    padding-right: 0.18em;
    display: inline-block;
    line-height: inherit;
}
.hx-hero__sub {
    font-size: clamp(16px, 1.4vw, 19px);
    line-height: 1.6;
    color: var(--color-muted);
    margin: 0 0 36px;
    max-width: 580px;
}
.hx-hero__ctas {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.hx-hero__scrollhint {
    position: absolute;
    left: 50%;
    bottom: 32px;
    transform: translateX(-50%);
    color: var(--color-muted);
    opacity: 0.6;
    transition: opacity var(--transition-base), transform var(--transition-base);
    animation: scroll-hint 2s ease-in-out infinite;
}
.hx-hero__scrollhint:hover { opacity: 1; color: var(--color-red); }
.hx-hero__scrollhint svg { width: 24px; height: 24px; }
@keyframes scroll-hint {
    0%, 100% { transform: translate(-50%, 0); }
    50%      { transform: translate(-50%, 8px); }
}

/* ============================================================
   STATS
   ============================================================ */
.hx-stats {
    background: var(--color-bg-pure);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding: 64px 0;
}
.hx-stats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}
@media (max-width: 768px) { .hx-stats__grid { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; } }
.hx-stat { text-align: center; }
.hx-stat__num {
    font-family: var(--font-display);
    font-size: clamp(40px, 5vw, 64px);
    font-weight: 800;
    line-height: 1;
    color: var(--color-red);
    letter-spacing: -2px;
    margin-bottom: 8px;
}
.hx-stat__suffix { color: var(--color-red); }
.hx-stat__label {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--color-muted);
}

/* ============================================================
   SERVICES
   ============================================================ */
.hx-services {
    padding: clamp(80px, 10vw, 120px) 0;
    background: var(--color-bg);
}
.hx-services__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
@media (max-width: 1024px) { .hx-services__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .hx-services__grid { grid-template-columns: 1fr; } }

.hx-service {
    display: block;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    padding: 32px 28px;
    border-radius: 6px;
    color: var(--color-text);
    transition: border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
    position: relative;
    overflow: hidden;
}
.hx-service::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 60%, rgba(240, 0, 0, 0.08));
    opacity: 0;
    transition: opacity var(--transition-base);
    pointer-events: none;
}
.hx-service:hover {
    border-color: var(--color-red);
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(240, 0, 0, 0.12);
    color: var(--color-text);
}
.hx-service:hover::after { opacity: 1; }
.hx-service__num {
    display: block;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: var(--color-red);
    margin-bottom: 16px;
}
.hx-service__title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--color-text);
    margin: 0 0 12px;
}
.hx-service__desc {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--color-muted);
    margin: 0 0 20px;
}
.hx-service__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--color-red);
}
.hx-service__more svg { width: 14px; height: 14px; transition: transform var(--transition-base); }
.hx-service:hover .hx-service__more svg { transform: translateX(4px); }

/* ============================================================
   CATEGORIES
   ============================================================ */
.hx-categories {
    padding: clamp(80px, 10vw, 120px) 0;
    background: var(--color-bg-pure);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}
.hx-categories__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
@media (max-width: 1024px) { .hx-categories__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .hx-categories__grid { grid-template-columns: 1fr; } }

.hx-category {
    display: block;
    background:
        radial-gradient(circle at top right, rgba(240, 0, 0, 0.05) 0%, transparent 60%),
        var(--color-surface);
    border: 1px solid var(--color-border);
    padding: 36px 28px;
    border-radius: 6px;
    color: var(--color-text);
    transition: border-color var(--transition-base), background var(--transition-base), transform var(--transition-base);
    position: relative;
    aspect-ratio: 4 / 5;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
@media (max-width: 600px) { .hx-category { aspect-ratio: auto; min-height: 200px; } }
.hx-category:hover {
    border-color: var(--color-red);
    transform: translateY(-4px);
    color: var(--color-text);
}
.hx-category__title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 10px;
    color: var(--color-text);
}
.hx-category__desc {
    font-size: 14px;
    line-height: 1.55;
    color: var(--color-muted);
    margin: 0 0 16px;
}
.hx-category__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--color-red);
}
.hx-category__cta svg { width: 14px; height: 14px; transition: transform var(--transition-base); }
.hx-category:hover .hx-category__cta svg { transform: translateX(4px); }

/* Category card with an image — image takes the top half, copy stacks below */
.hx-category--has-image { padding: 0; overflow: hidden; }
.hx-category__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--color-bg);
}
.hx-category__media img {
    width: 100%; height: 100%; display: block;
    object-fit: cover;
    transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.hx-category--has-image:hover .hx-category__media img { transform: scale(1.06); }
.hx-category__media::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(10,10,10,0) 50%, rgba(10,10,10,0.55) 100%);
    pointer-events: none;
}
.hx-category--has-image .hx-category__body { padding: 24px 28px 28px; }
.hx-category--has-image { aspect-ratio: auto; }

/* ============================================================
   WHY HEACOTEX
   ============================================================ */
.hx-why {
    padding: clamp(80px, 10vw, 120px) 0;
    background: var(--color-bg);
}
.hx-why__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}
@media (max-width: 1024px) { .hx-why__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .hx-why__grid { grid-template-columns: 1fr; } }
.hx-pillar {
    border-top: 2px solid var(--color-red);
    padding-top: 20px;
}
.hx-pillar__title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.25;
    color: var(--color-text);
    margin: 0 0 12px;
}
.hx-pillar__desc {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--color-muted);
    margin: 0;
}

/* ============================================================
   PROCESS
   ============================================================ */
.hx-process {
    padding: clamp(80px, 10vw, 120px) 0;
    background: var(--color-bg-pure);
    border-top: 1px solid var(--color-border);
    position: relative;
}
.hx-process__steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    position: relative;
}
@media (max-width: 1024px) { .hx-process__steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .hx-process__steps { grid-template-columns: 1fr; gap: 24px; } }
.hx-process__steps::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 5%;
    right: 5%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-red), var(--color-red), transparent);
    opacity: 0.4;
}
@media (max-width: 1024px) { .hx-process__steps::before { display: none; } }
.hx-process__step {
    position: relative;
}
.hx-process__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--color-red);
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.5px;
    border-radius: 50%;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
    box-shadow: 0 0 0 6px var(--color-bg-pure);
}
.hx-process__title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 800;
    color: var(--color-text);
    margin: 0 0 8px;
}
.hx-process__desc {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--color-muted);
    margin: 0;
}

/* ============================================================
   INDUSTRIES
   ============================================================ */
.hx-industries {
    padding: clamp(64px, 8vw, 100px) 0;
    background: var(--color-bg);
    text-align: center;
}
.hx-industries__head h2 {
    font-family: var(--font-display);
    font-size: clamp(22px, 3.5vw, 38px);
    font-weight: 800;
    line-height: 1.3;
    color: var(--color-text);
    margin: 0 0 28px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}
.hx-industries__head .hx-dot {
    color: var(--color-red);
    font-weight: 800;
}
.hx-industries__more {
    color: var(--color-muted);
    font-style: italic;
    font-weight: 500;
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.hx-about { background: var(--color-bg); }

/* ----- Hero ----- */
.hx-about-hero {
    position: relative;
    padding: clamp(80px, 11vw, 140px) 0 clamp(64px, 9vw, 110px);
    overflow: hidden;
    background:
        radial-gradient(circle at 80% 30%, rgba(0, 96, 192, 0.10), transparent 60%),
        var(--color-bg);
}
.hx-about-hero__bg { position: absolute; inset: 0; pointer-events: none; }
.hx-about-hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 64px;
    align-items: center;
}
@media (max-width: 1024px) { .hx-about-hero__inner { grid-template-columns: 1fr; gap: 40px; } }

.hx-about-hero__title {
    font-family: var(--font-display);
    font-size: clamp(42px, 6vw, 72px);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -1.5px;
    color: var(--color-text);
    margin: 16px 0 24px;
}
.hx-about-hero__title em {
    font-style: italic;
    background: linear-gradient(120deg, var(--color-text), var(--color-blue) 60%, var(--color-text));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    padding-right: 0.18em;
    display: inline-block;
}
.hx-about-hero__sub {
    color: var(--color-muted);
    font-size: clamp(16px, 1.3vw, 18px);
    line-height: 1.65;
    max-width: 540px;
    margin: 0;
}

.hx-about-hero__card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 28px 32px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
}
.hx-about-hero__card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--color-red), transparent 50%, var(--color-blue));
    opacity: 0.25;
    z-index: -1;
}
.hx-about-hero__card-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--color-border);
}
.hx-about-hero__card-row:last-child { border-bottom: 0; padding-bottom: 0; }
.hx-about-hero__card-label {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--color-muted);
}
.hx-about-hero__card-value {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text);
}

/* Decorative SVG */
.hx-deco { position: absolute; pointer-events: none; }
.hx-deco--hex-1 { top: -40px;  right: -60px;  width: 260px; animation: hx-spin 80s linear infinite; }
.hx-deco--hex-2 { bottom: -80px; left: -100px; width: 320px; animation: hx-spin 120s linear infinite reverse; }
@keyframes hx-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

.hx-streak--a, .hx-streak--b {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-red), transparent);
    opacity: 0.4;
}
.hx-about-hero__bg .hx-streak--a { top: 30%; left: -10%; width: 60%; transform: rotate(-8deg); }
.hx-about-hero__bg .hx-streak--b { top: 70%; right: -10%; width: 50%; transform: rotate(-6deg); }

/* ----- Timeline ----- */
.hx-timeline {
    padding: clamp(80px, 10vw, 120px) 0;
    background: var(--color-bg-pure);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}
.hx-timeline__list {
    list-style: none;
    margin: 56px 0 0;
    padding: 0;
    position: relative;
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
}
.hx-timeline__list::before {
    content: '';
    position: absolute;
    left: 110px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(180deg, var(--color-red), var(--color-border));
}
@media (max-width: 700px) { .hx-timeline__list::before { left: 24px; } }

.hx-timeline__item {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 48px;
    padding: 28px 0;
    position: relative;
}
@media (max-width: 700px) { .hx-timeline__item { grid-template-columns: 60px 1fr; gap: 20px; } }

.hx-timeline__year {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 800;
    color: var(--color-red);
    letter-spacing: -0.5px;
    position: relative;
}
.hx-timeline__year::after {
    content: '';
    position: absolute;
    right: -25px;
    top: 8px;
    width: 12px;
    height: 12px;
    background: var(--color-red);
    border-radius: 50%;
    box-shadow: 0 0 0 4px var(--color-bg-pure);
}
@media (max-width: 700px) { .hx-timeline__year { font-size: 18px; } .hx-timeline__year::after { right: 8px; } }

.hx-timeline__content h3 {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 800;
    color: var(--color-text);
    margin: 0 0 8px;
}
.hx-timeline__content p {
    margin: 0;
    color: var(--color-muted);
    font-size: 15px;
    line-height: 1.65;
}

/* ----- Stat band (animated counters) ----- */
.hx-stat-band {
    padding: 80px 0;
    background:
        linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg) 50%, var(--color-bg) 100%);
    border-bottom: 1px solid var(--color-border);
    position: relative;
}
.hx-stat-band::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
}
.hx-stat-band__grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}
@media (max-width: 768px) { .hx-stat-band__grid { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; } }

.hx-stat-band__item { text-align: center; }
.hx-stat-band__num {
    font-family: var(--font-display);
    font-size: clamp(56px, 7vw, 88px);
    font-weight: 800;
    line-height: 1;
    color: var(--color-red);
    letter-spacing: -2.5px;
    margin-bottom: 10px;
}
.hx-stat-band__suffix { color: var(--color-red); }
.hx-stat-band__label {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--color-muted);
}

/* ----- Team ----- */
.hx-team {
    padding: clamp(80px, 10vw, 120px) 0;
    background: var(--color-bg);
}
.hx-team__grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 80px;
    align-items: center;
}
@media (max-width: 900px) { .hx-team__grid { grid-template-columns: 1fr; gap: 48px; } }

.hx-team__intro h2 {
    font-family: var(--font-display);
    font-size: clamp(28px, 3.6vw, 40px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.5px;
    color: var(--color-text);
    margin: 16px 0 20px;
}
.hx-team__intro p {
    color: var(--color-muted);
    font-size: 16px;
    line-height: 1.7;
    margin: 0 0 24px;
    max-width: 480px;
}

.hx-link-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--color-red);
}
.hx-link-cta svg { width: 16px; height: 16px; transition: transform 200ms; }
.hx-link-cta:hover svg { transform: translateX(4px); }

.hx-team__cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
@media (max-width: 480px) { .hx-team__cards { grid-template-columns: 1fr; } }

.hx-team__card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 24px;
    text-align: center;
    transition: border-color 250ms, transform 250ms;
}
.hx-team__card:hover {
    border-color: var(--color-red);
    transform: translateY(-3px);
}
.hx-team__photo {
    width: 80px;
    margin: 0 auto 16px;
}
.hx-team__meta h3 {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 800;
    color: var(--color-text);
    margin: 0 0 4px;
}
.hx-team__meta p {
    margin: 0;
    color: var(--color-muted);
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

/* ----- Values ----- */
.hx-values {
    padding: clamp(80px, 10vw, 120px) 0;
    background: var(--color-bg-pure);
    border-top: 1px solid var(--color-border);
}
.hx-values__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin-top: 56px;
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 768px) { .hx-values__grid { grid-template-columns: 1fr; gap: 32px; } }

.hx-value {
    padding-left: 24px;
    border-left: 2px solid var(--color-red);
    position: relative;
}
.hx-value__index {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: var(--color-red);
    margin-bottom: 12px;
}
.hx-value__title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 800;
    color: var(--color-text);
    margin: 0 0 12px;
    line-height: 1.2;
}
.hx-value__desc {
    color: var(--color-muted);
    font-size: 15px;
    line-height: 1.7;
    margin: 0;
}

/* ============================================================
   SERVICES PAGE
   ============================================================ */
.hx-svc-hero {
    position: relative; overflow: hidden;
    padding: clamp(80px, 11vw, 140px) 0 clamp(48px, 6vw, 72px);
    background: radial-gradient(circle at 80% 20%, rgba(240,0,0,0.08), transparent 50%), var(--color-bg);
}
.hx-svc-hero__bg { position: absolute; inset: 0; pointer-events: none; }
.hx-svc-hero__inner { position: relative; display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: center; }
@media (max-width: 1024px) { .hx-svc-hero__inner { grid-template-columns: 1fr; gap: 40px; } }
.hx-svc-hero__title {
    font-family: var(--font-display);
    font-size: clamp(42px, 6vw, 72px); font-weight: 800; line-height: 1.04;
    letter-spacing: -1.5px; color: var(--color-text); margin: 16px 0 24px;
}
.hx-svc-hero__title em {
    font-style: italic;
    background: linear-gradient(120deg, var(--color-text), var(--color-blue) 60%, var(--color-text));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    padding-right: 0.18em; display: inline-block;
}
.hx-svc-hero__sub { color: var(--color-muted); font-size: clamp(16px, 1.3vw, 18px); line-height: 1.65; margin: 0; max-width: 540px; }

.hx-svc-jump { display: flex; flex-direction: column; gap: 12px; }
.hx-svc-jump__link {
    display: flex; align-items: center; gap: 16px;
    padding: 14px 18px; background: var(--color-surface);
    border: 1px solid var(--color-border); border-radius: 4px;
    color: var(--color-text); transition: border-color 200ms, transform 200ms;
}
.hx-svc-jump__link:hover { border-color: var(--color-red); transform: translateX(4px); color: var(--color-text); }
.hx-svc-jump__num { font-family: var(--font-display); font-weight: 800; color: var(--color-red); font-size: 13px; letter-spacing: 1.2px; }
.hx-svc-jump__name { font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.5px; text-transform: uppercase; }

.hx-svc-block { padding: clamp(72px, 9vw, 120px) 0; background: var(--color-bg); }
.hx-svc-block:nth-child(even) { background: var(--color-bg-pure); }
.hx-svc-block__inner { display: grid; grid-template-columns: 1fr 1.6fr; gap: 64px; align-items: center; }
.hx-svc-block.is-alt .hx-svc-block__inner { grid-template-columns: 1.6fr 1fr; }
.hx-svc-block.is-alt .hx-svc-block__visual { order: 2; }
@media (max-width: 900px) { .hx-svc-block__inner, .hx-svc-block.is-alt .hx-svc-block__inner { grid-template-columns: 1fr; gap: 40px; } .hx-svc-block.is-alt .hx-svc-block__visual { order: -1; } }

.hx-svc-block__visual { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px; position: relative; }
.hx-svc-block__num {
    font-family: var(--font-display); font-size: clamp(80px, 12vw, 160px);
    font-weight: 800; line-height: 1; color: var(--color-red); opacity: 0.12;
    position: absolute; left: 0; right: 0; text-align: center; top: 50%; transform: translateY(-50%);
    z-index: 0; letter-spacing: -4px; pointer-events: none;
}
.hx-svc-block__icon { width: clamp(180px, 30vw, 280px); height: auto; position: relative; z-index: 1; }

.hx-svc-block__title {
    font-family: var(--font-display);
    font-size: clamp(32px, 4vw, 44px); font-weight: 800; line-height: 1.1;
    letter-spacing: -0.5px; color: var(--color-text); margin: 12px 0 16px;
}
.hx-svc-block__desc { color: var(--color-muted); font-size: 17px; line-height: 1.7; margin: 0 0 24px; }
.hx-svc-block__list { list-style: none; padding: 0; margin: 0 0 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
@media (max-width: 600px) { .hx-svc-block__list { grid-template-columns: 1fr; } }
.hx-svc-block__list li { color: var(--color-text); font-size: 14.5px; padding-left: 22px; position: relative; }
.hx-svc-block__list li::before { content: ''; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; background: var(--color-red); border-radius: 50%; }

/* ============================================================
   INDUSTRIES PAGE
   ============================================================ */
.hx-ind-hero {
    position: relative; overflow: hidden;
    padding: clamp(80px, 11vw, 140px) 0 clamp(64px, 8vw, 96px);
    background: var(--color-bg); text-align: left;
}
.hx-ind-hero__bg { position: absolute; inset: 0; pointer-events: none; }
.hx-ind-hero__bg .hx-streak {
    height: 1px; background: linear-gradient(90deg, transparent, var(--color-red), transparent); opacity: 0.4;
}
.hx-ind-hero__bg .hx-streak--a { top: 25%; left: -10%; width: 70%; transform: rotate(-8deg); }
.hx-ind-hero__bg .hx-streak--b { top: 55%; right: -10%; width: 60%; transform: rotate(-6deg); opacity: 0.3; }
.hx-ind-hero__bg .hx-streak--c { top: 78%; left: 20%; width: 50%; transform: rotate(-10deg); opacity: 0.25; }
.hx-ind-hero__inner { position: relative; max-width: 880px; }
.hx-ind-hero__title {
    font-family: var(--font-display);
    font-size: clamp(42px, 6vw, 72px); font-weight: 800; line-height: 1.04;
    letter-spacing: -1.5px; color: var(--color-text); margin: 16px 0 24px;
}
.hx-ind-hero__title em {
    font-style: italic;
    background: linear-gradient(120deg, var(--color-text), var(--color-blue) 60%, var(--color-text));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    padding-right: 0.18em; display: inline-block;
}
.hx-ind-hero__sub { color: var(--color-muted); font-size: clamp(16px, 1.3vw, 18px); line-height: 1.65; margin: 0; max-width: 640px; }

.hx-ind-grid { padding: clamp(64px, 8vw, 96px) 0; background: var(--color-bg-pure); border-top: 1px solid var(--color-border); }
.hx-ind-grid__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
@media (max-width: 900px) { .hx-ind-grid__inner { grid-template-columns: 1fr; gap: 24px; } }

.hx-ind-card {
    display: grid; grid-template-columns: 80px 1fr; gap: 28px;
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: 8px; padding: 32px;
    transition: border-color 250ms, transform 250ms;
}
@media (max-width: 500px) { .hx-ind-card { grid-template-columns: 1fr; gap: 20px; } }
.hx-ind-card:hover { border-color: var(--color-red); transform: translateY(-4px); }
.hx-ind-card__icon { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; background: var(--color-bg-pure); border-radius: 6px; flex-shrink: 0; }
.hx-ind-card__icon svg { width: 100%; height: 100%; }
.hx-ind-card__title {
    font-family: var(--font-display); font-size: 26px; font-weight: 800; line-height: 1.15;
    color: var(--color-text); margin: 8px 0 12px; letter-spacing: -0.3px;
}
.hx-ind-card__desc { color: var(--color-muted); font-size: 14.5px; line-height: 1.65; margin: 0 0 20px; }
.hx-ind-card__apps { border-top: 1px solid var(--color-border); padding-top: 16px; }
.hx-ind-card__apps-label {
    display: block; font-family: var(--font-display); font-size: 11px; font-weight: 700;
    letter-spacing: 1.5px; text-transform: uppercase; color: var(--color-red); margin-bottom: 10px;
}
.hx-ind-card__apps ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.hx-ind-card__apps li { color: var(--color-text); font-size: 13.5px; padding-left: 16px; position: relative; }
.hx-ind-card__apps li::before { content: ''; position: absolute; left: 0; top: 7px; width: 5px; height: 5px; background: var(--color-red); border-radius: 50%; }

.hx-ind-note { margin-top: 48px; padding: 24px; background: var(--color-surface); border-left: 3px solid var(--color-red); border-radius: 4px; }
.hx-ind-note p { margin: 0; color: var(--color-muted); font-size: 15px; font-style: italic; line-height: 1.6; }
.hx-ind-note a { color: var(--color-red); }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.hx-contact-hero {
    position: relative; overflow: hidden;
    padding: clamp(80px, 11vw, 140px) 0 clamp(48px, 6vw, 72px);
    background: var(--color-bg); text-align: center;
}
.hx-contact-hero__inner { position: relative; max-width: 760px; margin: 0 auto; }
.hx-contact-hero__title {
    font-family: var(--font-display);
    font-size: clamp(42px, 6vw, 72px); font-weight: 800; line-height: 1.04;
    letter-spacing: -1.5px; color: var(--color-text); margin: 16px 0 24px;
}
.hx-contact-hero__title em {
    font-style: italic;
    background: linear-gradient(120deg, var(--color-text), var(--color-blue) 60%, var(--color-text));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    padding-right: 0.18em; display: inline-block;
}
.hx-contact-hero__sub { color: var(--color-muted); font-size: clamp(16px, 1.3vw, 18px); line-height: 1.65; margin: 0; }

.hx-contact-split { padding: clamp(64px, 8vw, 96px) 0; background: var(--color-bg-pure); border-top: 1px solid var(--color-border); }
.hx-contact-split__inner { display: grid; grid-template-columns: 380px 1fr; gap: 56px; align-items: start; }
@media (max-width: 900px) { .hx-contact-split__inner { grid-template-columns: 1fr; gap: 40px; } }

.hx-contact-card { position: sticky; top: 120px; }
@media (max-width: 900px) { .hx-contact-card { position: static; } }
.hx-contact-card__inner {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: 8px; padding: 32px; position: relative;
}
.hx-contact-card__inner::before {
    content: ''; position: absolute; inset: -1px; border-radius: 8px;
    background: linear-gradient(135deg, var(--color-red), transparent 50%, var(--color-blue));
    opacity: 0.25; z-index: -1;
}
.hx-contact-card__name {
    font-family: var(--font-display); font-size: 26px; font-weight: 800;
    color: var(--color-text); margin: 8px 0 4px; letter-spacing: -0.3px;
}
.hx-contact-card__since { font-size: 12px; color: var(--color-muted); letter-spacing: 1px; margin: 0 0 24px; }
.hx-contact-card__list { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 18px; }
.hx-contact-card__list li { display: flex; gap: 14px; align-items: flex-start; }
.hx-contact-card__list svg { width: 18px; height: 18px; color: var(--color-red); flex-shrink: 0; margin-top: 2px; }
.hx-contact-card__label {
    display: block; font-family: var(--font-display); font-size: 10px; font-weight: 700;
    letter-spacing: 1.5px; text-transform: uppercase; color: var(--color-muted); margin-bottom: 2px;
}
.hx-contact-card__list a { color: var(--color-text); font-size: 15px; font-weight: 600; }
.hx-contact-card__list a:hover { color: var(--color-red); }
.hx-contact-card__multi { color: var(--color-text); font-size: 14px; line-height: 1.55; }
.hx-contact-card__btn { width: 100%; justify-content: center; }

.hx-contact-methods h2 {
    font-family: var(--font-display); font-size: clamp(28px, 3.5vw, 36px);
    font-weight: 800; line-height: 1.15; letter-spacing: -0.3px;
    color: var(--color-text); margin: 0 0 28px;
}
.hx-contact-methods__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 600px) { .hx-contact-methods__grid { grid-template-columns: 1fr; } }
.hx-contact-method {
    display: block; padding: 28px;
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 8px;
    color: var(--color-text); transition: border-color 250ms, transform 250ms;
}
.hx-contact-method:hover { border-color: var(--color-red); transform: translateY(-3px); color: var(--color-text); }
.hx-contact-method__num {
    font-family: var(--font-display); font-size: 14px; font-weight: 800;
    color: var(--color-red); letter-spacing: 1.5px; margin-bottom: 14px;
}
.hx-contact-method h3 { font-family: var(--font-display); font-size: 20px; font-weight: 800; color: var(--color-text); margin: 0 0 8px; }
.hx-contact-method p { color: var(--color-muted); font-size: 14px; line-height: 1.55; margin: 0 0 16px; }

/* ============================================================
   GALLERY PAGE
   ============================================================ */
.hx-gal-hero {
    position: relative; overflow: hidden;
    padding: clamp(80px, 11vw, 140px) 0 clamp(48px, 6vw, 72px);
    background: var(--color-bg); text-align: center;
}
.hx-gal-hero__bg { position: absolute; inset: 0; pointer-events: none; }
.hx-gal-hero__inner { position: relative; max-width: 760px; margin: 0 auto; }
.hx-gal-hero__title {
    font-family: var(--font-display);
    font-size: clamp(42px, 6vw, 72px); font-weight: 800; line-height: 1.04;
    letter-spacing: -1.5px; color: var(--color-text); margin: 16px 0 24px;
}
.hx-gal-hero__title em {
    font-style: italic;
    background: linear-gradient(120deg, var(--color-text), var(--color-blue) 60%, var(--color-text));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    padding-right: 0.18em; display: inline-block;
}
.hx-gal-hero__sub { color: var(--color-muted); font-size: clamp(16px, 1.3vw, 18px); line-height: 1.65; margin: 0; }

.hx-gal-grid { padding: clamp(56px, 8vw, 96px) 0; background: var(--color-bg-pure); border-top: 1px solid var(--color-border); }
.hx-gal-grid__inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 280px;
    gap: 20px;
}
@media (max-width: 1024px) { .hx-gal-grid__inner { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .hx-gal-grid__inner { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px)  { .hx-gal-grid__inner { grid-template-columns: 1fr; grid-auto-rows: 280px; } }

.hx-gal-card {
    position: relative; overflow: hidden;
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 8px;
    display: flex; flex-direction: column;
    transition: border-color 250ms, transform 250ms;
}
.hx-gal-card.is-tall { grid-row: span 2; }
@media (max-width: 500px) { .hx-gal-card.is-tall { grid-row: auto; } }
.hx-gal-card:hover { border-color: var(--color-red); transform: translateY(-3px); }

.hx-gal-card__media { position: relative; flex: 1 1 auto; min-height: 140px; overflow: hidden; }
.hx-gal-card__svg { width: 100%; height: 100%; display: block; }
.hx-gal-card__img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.hx-gal-card.has-image:hover .hx-gal-card__img { transform: scale(1.05); }
.hx-gal-card.has-image .hx-gal-card__media::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(10,10,10,0) 50%, rgba(10,10,10,0.55) 100%);
    pointer-events: none;
}
.hx-gal-card__tag {
    position: absolute; top: 12px; left: 12px;
    background: rgba(0,0,0,0.7); color: var(--color-red);
    font-family: var(--font-display); font-size: 10px; font-weight: 700;
    letter-spacing: 1.2px; text-transform: uppercase;
    padding: 5px 10px; border-radius: 2px;
}
.hx-gal-card__body { padding: 20px; flex: 0 0 auto; }
.hx-gal-card__body h3 { font-family: var(--font-display); font-size: 16px; font-weight: 800; color: var(--color-text); margin: 0 0 6px; line-height: 1.3; }
.hx-gal-card__body p { color: var(--color-muted); font-size: 13px; line-height: 1.55; margin: 0 0 10px; }
.hx-gal-card__status {
    font-family: var(--font-display); font-size: 10px; font-weight: 700;
    letter-spacing: 1.2px; text-transform: uppercase; color: var(--color-red);
}

/* ============================================================
   REQUEST A QUOTE PAGE
   ============================================================ */
.hx-rfq-hero {
    position: relative; overflow: hidden;
    padding: clamp(80px, 11vw, 140px) 0 clamp(56px, 7vw, 80px);
    background: radial-gradient(circle at 80% 30%, rgba(0,96,192,0.10), transparent 50%), var(--color-bg);
}
.hx-rfq-hero__bg { position: absolute; inset: 0; pointer-events: none; }
.hx-rfq-hero__inner { position: relative; max-width: 760px; text-align: left; }
.hx-rfq-hero__title {
    font-family: var(--font-display); font-size: clamp(40px, 5.5vw, 64px);
    font-weight: 800; line-height: 1.05; letter-spacing: -1px;
    color: var(--color-text); margin: 16px 0 20px;
}
.hx-rfq-hero__title em {
    font-style: italic;
    background: linear-gradient(120deg, var(--color-text), var(--color-blue) 60%, var(--color-text));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    padding-right: 0.18em; display: inline-block;
}
.hx-rfq-hero__sub { color: var(--color-muted); font-size: 17px; line-height: 1.65; margin: 0 0 32px; max-width: 580px; }

.hx-rfq-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 32px; }
@media (max-width: 768px) { .hx-rfq-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .hx-rfq-steps { grid-template-columns: 1fr; } }
.hx-rfq-step {
    padding: 16px 18px; background: var(--color-surface);
    border: 1px solid var(--color-border); border-radius: 4px;
    display: flex; flex-direction: column; gap: 4px;
}
.hx-rfq-step__n { font-family: var(--font-display); font-size: 12px; font-weight: 800; letter-spacing: 1.5px; color: var(--color-red); }
.hx-rfq-step__label { font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--color-text); line-height: 1.3; }

.hx-rfq-body { padding: clamp(56px, 7vw, 96px) 0; background: var(--color-bg-pure); border-top: 1px solid var(--color-border); }
.hx-rfq-body .hx-container { display: grid; grid-template-columns: 1.6fr 1fr; gap: 48px; align-items: start; }
@media (max-width: 900px) { .hx-rfq-body .hx-container { grid-template-columns: 1fr; gap: 32px; } }

.hx-rfq-frame {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: 8px; padding: 32px;
}
.hx-rfq-aside { display: flex; flex-direction: column; gap: 20px; }
.hx-rfq-aside__card {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: 8px; padding: 28px; position: relative;
}
.hx-rfq-aside__card::before {
    content: ''; position: absolute; inset: -1px; border-radius: 8px;
    background: linear-gradient(135deg, var(--color-red), transparent 50%, var(--color-blue));
    opacity: 0.25; z-index: -1;
}
.hx-rfq-aside__card h3 {
    font-family: var(--font-display); font-size: 22px; font-weight: 800;
    color: var(--color-text); margin: 8px 0 12px;
}
.hx-rfq-aside__card p { color: var(--color-muted); font-size: 14px; line-height: 1.6; margin: 0 0 16px; }
.hx-rfq-aside__card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.hx-rfq-aside__card li { font-size: 14px; color: var(--color-text); }
.hx-rfq-aside__card li strong { color: var(--color-muted); font-weight: 600; }
.hx-rfq-aside__card a { color: var(--color-text); }
.hx-rfq-aside__card a:hover { color: var(--color-red); }
.hx-rfq-aside__note {
    padding: 18px 20px; background: var(--color-bg-pure); border-left: 3px solid var(--color-red);
    border-radius: 4px; font-size: 13px; line-height: 1.6; color: var(--color-muted);
}
.hx-rfq-aside__note strong { color: var(--color-text); }

/* ============================================================
   EMPTY-STATE on the Request a Quote page
   ============================================================ */
.hx-rfq-empty {
    text-align: center;
    padding: 40px 24px 48px;
}
.hx-rfq-empty__icon {
    width: 64px; height: 64px;
    margin: 0 auto 20px;
    color: var(--color-red);
    opacity: 0.85;
}
.hx-rfq-empty__icon svg { width: 100%; height: 100%; }
.hx-rfq-empty h2 {
    font-family: var(--font-display);
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 800;
    margin: 0 0 12px;
    color: var(--color-text);
    letter-spacing: -0.3px;
}
.hx-rfq-empty > p {
    color: var(--color-muted);
    font-size: 15px;
    line-height: 1.6;
    max-width: 540px;
    margin: 0 auto 36px;
}
.hx-rfq-empty__paths {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 720px;
    margin: 0 auto;
}
@media (max-width: 720px) { .hx-rfq-empty__paths { grid-template-columns: 1fr; } }

.hx-rfq-empty__path {
    display: flex; flex-direction: column;
    gap: 8px;
    padding: 28px 24px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-bg-pure);
    text-align: left;
    text-decoration: none;
    color: var(--color-text);
    transition: border-color 200ms, transform 200ms, background 200ms;
}
.hx-rfq-empty__path:hover {
    border-color: var(--color-red);
    transform: translateY(-3px);
    color: var(--color-text);
}
.hx-rfq-empty__path--primary {
    background: var(--color-surface);
    border-color: var(--color-red);
}
.hx-rfq-empty__path-eyebrow {
    font-family: var(--font-display);
    font-size: 11px; font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--color-red);
    margin-bottom: 4px;
}
.hx-rfq-empty__path-title {
    font-family: var(--font-display);
    font-size: 19px; font-weight: 800;
    color: var(--color-text);
    line-height: 1.25;
}
.hx-rfq-empty__path-desc {
    font-size: 13.5px;
    color: var(--color-muted);
    line-height: 1.55;
    margin-bottom: 8px;
}
.hx-rfq-empty__path-cta {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: auto;
    font-family: var(--font-display);
    font-size: 12px; font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--color-red);
}
.hx-rfq-empty__path-cta svg {
    width: 14px; height: 14px;
    transition: transform 200ms;
}
.hx-rfq-empty__path:hover .hx-rfq-empty__path-cta svg { transform: translateX(4px); }

/* Enquiry block shown below the empty-state */
.hx-enquire-block {
    margin-top: clamp(56px, 7vw, 80px);
    padding-top: clamp(40px, 5vw, 56px);
    border-top: 1px solid var(--color-border);
}
.hx-enquire-block__head {
    text-align: center;
    margin-bottom: 32px;
}
.hx-enquire-block__head h2 {
    font-family: var(--font-display);
    font-size: clamp(22px, 2.8vw, 28px);
    font-weight: 800;
    margin: 8px 0 8px;
    color: var(--color-text);
}
.hx-enquire-block__head p {
    color: var(--color-muted); font-size: 14.5px; line-height: 1.6;
    max-width: 520px; margin: 0 auto;
}

/* ============================================================
   GENERAL ENQUIRY SECTION (Contact page) + shared form styling
   ============================================================ */
.hx-enquire {
    padding: clamp(56px, 7vw, 96px) 0;
    background: var(--color-bg);
}
.hx-enquire__head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto clamp(32px, 4vw, 48px);
}
.hx-enquire__head h2 {
    font-family: var(--font-display);
    font-size: clamp(28px, 3.4vw, 40px);
    font-weight: 800;
    margin: 8px 0 12px;
    color: var(--color-text);
    letter-spacing: -0.3px;
}
.hx-enquire__head p {
    color: var(--color-muted);
    font-size: 16px; line-height: 1.65;
    margin: 0;
}
.hx-enquire__form-wrap {
    max-width: 820px;
    margin: 0 auto;
    padding: clamp(28px, 4vw, 44px);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

/* Form fields */
.hx-enquiry-form__notice {
    padding: 14px 18px;
    border-radius: 4px;
    margin-bottom: 24px;
    font-size: 14.5px;
    line-height: 1.5;
}
.hx-enquiry-form__notice--success { background: rgba(43, 182, 115, 0.1); border-left: 3px solid #2BB673; color: var(--color-text); }
.hx-enquiry-form__notice--error   { background: rgba(240, 0, 0, 0.08);   border-left: 3px solid var(--color-red); color: var(--color-text); }
.hx-enquiry-form__notice a { color: var(--color-red); }

.hx-enquiry-form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 20px;
}
@media (max-width: 640px) { .hx-enquiry-form__grid { grid-template-columns: 1fr; } }
.hx-enquiry-form__field { display: flex; flex-direction: column; gap: 6px; }
.hx-enquiry-form__field--wide { grid-column: 1 / -1; }
.hx-enquiry-form__label {
    font-family: var(--font-display);
    font-size: 12px; font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--color-muted);
}
.hx-enquiry-form__label span[aria-hidden] { color: var(--color-red); }
.hx-enquiry-form input[type="text"],
.hx-enquiry-form input[type="email"],
.hx-enquiry-form input[type="tel"],
.hx-enquiry-form textarea {
    width: 100%;
    padding: 12px 14px;
    background: var(--color-bg-pure);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.5;
    transition: border-color 150ms, background 150ms;
    box-sizing: border-box;
}
.hx-enquiry-form textarea { resize: vertical; min-height: 140px; }
.hx-enquiry-form input:focus,
.hx-enquiry-form textarea:focus {
    outline: none;
    border-color: var(--color-red);
    background: var(--color-bg);
}
.hx-enquiry-form__actions {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 28px;
    flex-wrap: wrap;
}
.hx-enquiry-form__hint {
    font-size: 13px;
    color: var(--color-muted);
}

/* ---- YITH RAQ form styling overrides ---- */
.hx-rfq-frame .ywraq-name,
.hx-rfq-frame .product_list_widget li,
.hx-rfq-frame table,
.hx-rfq-frame .shop_table,
.hx-rfq-frame table.shop_table_responsive { width: 100%; color: var(--color-text); }
.hx-rfq-frame table { border-collapse: collapse; margin-bottom: 24px; }
.hx-rfq-frame table th {
    text-align: left; padding: 12px 14px;
    font-family: var(--font-display); font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1.2px; color: var(--color-muted);
    border-bottom: 1px solid var(--color-border);
}
.hx-rfq-frame table td {
    padding: 16px 14px;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text); font-size: 14.5px; vertical-align: middle;
}
.hx-rfq-frame table img { max-width: 60px; border-radius: 4px; }
.hx-rfq-frame .product-thumbnail a { display: inline-block; }
.hx-rfq-frame .product-name a { color: var(--color-text); font-weight: 600; }
.hx-rfq-frame .product-name a:hover { color: var(--color-red); }
.hx-rfq-frame input[type="text"],
.hx-rfq-frame input[type="email"],
.hx-rfq-frame input[type="tel"],
.hx-rfq-frame input[type="number"],
.hx-rfq-frame select,
.hx-rfq-frame textarea {
    background: var(--color-bg-pure); border: 1px solid var(--color-border);
    color: var(--color-text); padding: 12px 14px; border-radius: 4px;
    font-family: var(--font-body); font-size: 15px; width: 100%; box-sizing: border-box;
    transition: border-color 200ms;
}
.hx-rfq-frame input:focus,
.hx-rfq-frame select:focus,
.hx-rfq-frame textarea:focus { outline: none; border-color: var(--color-red); }
.hx-rfq-frame label { display: block; font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--color-muted); margin: 16px 0 8px; }
.hx-rfq-frame button,
.hx-rfq-frame input[type="submit"],
.hx-rfq-frame .button,
.hx-rfq-frame a.button {
    background: var(--color-red) !important; color: var(--color-text) !important;
    border: 1px solid var(--color-red) !important;
    font-family: var(--font-display) !important; font-size: 13px !important; font-weight: 700 !important;
    letter-spacing: 1.2px !important; text-transform: uppercase !important;
    padding: 14px 22px !important; border-radius: 3px !important;
    cursor: pointer; transition: background 200ms, border-color 200ms; display: inline-flex; align-items: center; gap: 8px;
}
.hx-rfq-frame button:hover,
.hx-rfq-frame input[type="submit"]:hover,
.hx-rfq-frame .button:hover { background: var(--color-blue) !important; border-color: var(--color-blue) !important; }

.hx-rfq-frame .remove,
.hx-rfq-frame a.remove {
    color: var(--color-red) !important; background: transparent !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 50%; width: 28px; height: 28px;
    font-size: 16px; line-height: 1; padding: 0 !important;
    display: inline-flex !important; align-items: center; justify-content: center;
}
.hx-rfq-frame .remove:hover { background: var(--color-red) !important; color: var(--color-text) !important; border-color: var(--color-red) !important; }

/* ============================================================
   WOOCOMMERCE — branded wrapper + product cards
   ============================================================ */
.hx-wc-page { background: var(--color-bg); }

.hx-wc-hero {
    position: relative; overflow: hidden;
    padding: clamp(80px, 10vw, 130px) 0 clamp(40px, 5vw, 64px);
    background: var(--color-bg);
}
.hx-wc-hero__bg { position: absolute; inset: 0; pointer-events: none; }
.hx-wc-hero__inner { position: relative; max-width: 920px; }
.hx-wc-crumbs { font-size: 12px; color: var(--color-muted); letter-spacing: 0.5px; margin-bottom: 16px; }
.hx-wc-crumbs a { color: var(--color-muted); }
.hx-wc-crumbs a:hover { color: var(--color-red); }
.hx-wc-crumbs__sep { color: var(--color-border); margin: 0 6px; }
.hx-wc-hero__title {
    font-family: var(--font-display);
    font-size: clamp(34px, 5vw, 56px); font-weight: 800; line-height: 1.05;
    letter-spacing: -1px; color: var(--color-text); margin: 8px 0 16px;
}
.hx-wc-hero__sub { color: var(--color-muted); font-size: clamp(15px, 1.2vw, 17px); line-height: 1.65; max-width: 680px; margin: 0 0 24px; }
.hx-wc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.hx-wc-chip {
    padding: 8px 16px; background: var(--color-surface);
    border: 1px solid var(--color-border); border-radius: 100px;
    font-family: var(--font-display); font-size: 12px; font-weight: 700;
    letter-spacing: 1px; text-transform: uppercase;
    color: var(--color-text); transition: background 200ms, border-color 200ms, color 200ms;
}
.hx-wc-chip:hover { border-color: var(--color-red); color: var(--color-red); }
.hx-wc-chip.is-active { background: var(--color-red); border-color: var(--color-red); color: var(--color-text); }

.hx-wc-content { padding: 0 0 clamp(64px, 8vw, 96px); background: var(--color-bg); }

/* Single product: no hero — give the content top padding so it doesn't kiss the header,
   and render breadcrumbs above the gallery/summary row. */
.hx-wc-page--single .hx-wc-content { padding-top: clamp(32px, 5vw, 56px); }
.hx-wc-crumbs--single {
    font-size: 12px; color: var(--color-muted); letter-spacing: 0.5px;
    margin: 0 0 24px;
    padding: 0 0 16px;
    border-bottom: 1px solid var(--color-border);
    text-transform: uppercase;
}
.hx-wc-crumbs--single a { color: var(--color-muted); text-decoration: none; }
.hx-wc-crumbs--single a:hover { color: var(--color-red); }

/* --- Product archive grid (flexbox — beats WC's columns-N classes with !important) --- */
.woocommerce-notices-wrapper { margin-bottom: 16px; }
.woocommerce ul.products,
.woocommerce-page ul.products,
.woocommerce ul.products.columns-1,
.woocommerce ul.products.columns-2,
.woocommerce ul.products.columns-3,
.woocommerce ul.products.columns-4,
.woocommerce ul.products.columns-5,
.woocommerce ul.products.columns-6,
.related.products ul.products,
.upsells.products ul.products {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 24px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    width: 100% !important;
    box-sizing: border-box;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce ul.products.columns-1 li.product,
.woocommerce ul.products.columns-2 li.product,
.woocommerce ul.products.columns-3 li.product,
.woocommerce ul.products.columns-4 li.product,
.woocommerce ul.products.columns-5 li.product,
.woocommerce ul.products.columns-6 li.product,
.related.products ul.products li.product,
.upsells.products ul.products li.product {
    flex: 0 0 calc((100% - 48px) / 3) !important;
    max-width: calc((100% - 48px) / 3) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    width: auto !important; float: none !important; margin: 0 !important; padding: 0 !important;
    clear: none !important;
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 8px;
    overflow: hidden; transition: border-color 250ms, transform 250ms;
    display: flex; flex-direction: column;
}
.woocommerce ul.products li.product:hover { border-color: var(--color-red); transform: translateY(-3px); }

/* Hide anything WC might inject into the products UL as a non-product li */
.woocommerce ul.products > *:not(li.product) { display: none !important; }

@media (max-width: 1024px) {
    .woocommerce ul.products li.product,
    .woocommerce-page ul.products li.product {
        flex: 0 1 calc((100% - 24px) / 2) !important;
        max-width: calc((100% - 24px) / 2);
    }
}
@media (max-width: 767.98px) {
    /* Mobile (phones): one product per row. 768px+ stays 2-up (tablet) via the
       max-width:1024px rule above. This flex system is the real grid control —
       the ul is display:flex here, so column count = the li flex-basis below. */
    .woocommerce ul.products li.product,
    .woocommerce-page ul.products li.product {
        flex: 0 1 100% !important;
        max-width: 100% !important;
    }
}
.woocommerce ul.products li.product a { color: var(--color-text); }
.woocommerce ul.products li.product img {
    width: 100% !important; height: auto; aspect-ratio: 4 / 3;
    object-fit: contain; /* cut-out product images: show full product, not cropped */
    background: var(--color-bg-pure);
    margin: 0 !important; border-radius: 0;
    padding: 12px;
    box-sizing: border-box;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2.woocommerce-loop-product__title {
    font-family: var(--font-display) !important;
    font-size: 16px !important; font-weight: 800 !important;
    color: var(--color-text) !important; padding: 18px 20px 6px !important; margin: 0 !important; line-height: 1.3 !important;
}
.woocommerce ul.products li.product .price { display: none !important; }
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product .ywraq-browse-link,
.woocommerce ul.products li.product .add-request-quote-button {
    margin: 0 20px 20px !important;
    background: var(--color-red) !important; color: var(--color-text) !important;
    font-family: var(--font-display) !important; font-size: 12px !important; font-weight: 700 !important;
    letter-spacing: 1.2px !important; text-transform: uppercase !important;
    padding: 12px 18px !important; border-radius: 3px !important;
    text-align: center; border: 1px solid var(--color-red) !important;
    transition: background 200ms, border-color 200ms;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .add-request-quote-button:hover { background: var(--color-blue) !important; border-color: var(--color-blue) !important; }

/* --- Pagination --- */
.woocommerce nav.woocommerce-pagination ul { border: none !important; display: flex; gap: 8px; justify-content: center; margin: 40px 0 0; }
.woocommerce nav.woocommerce-pagination ul li { border: none !important; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    background: var(--color-surface) !important; color: var(--color-text) !important;
    border: 1px solid var(--color-border) !important; padding: 10px 14px !important;
    font-family: var(--font-display) !important; font-weight: 700;
    border-radius: 3px;
}
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--color-red) !important; border-color: var(--color-red) !important; }

/* --- Single product --- */
.single-product div.product {
    display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-bottom: 64px;
}
@media (max-width: 900px) { .single-product div.product { grid-template-columns: 1fr; gap: 32px; } }
.single-product .product .images,
.single-product .product .woocommerce-product-gallery {
    width: 100% !important; float: none !important;
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 8px;
    padding: 20px; box-sizing: border-box;
}
/* Product gallery — cut-out images: contain inside their frame, never crop. */
.single-product .product .woocommerce-product-gallery__image img,
.single-product .product .woocommerce-product-gallery__image a img,
.single-product .product .woocommerce-product-gallery img.wp-post-image {
    width: 100% !important;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain !important;
    background: var(--color-bg-pure);
    border-radius: 4px;
}
/* Thumb strip below the main image */
.single-product .product .flex-control-thumbs li img,
.single-product .product ol.flex-control-thumbs li img {
    width: 100% !important;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain !important;
    background: var(--color-bg-pure);
    border-radius: 3px;
    padding: 4px;
    box-sizing: border-box;
    opacity: 0.7;
    transition: opacity 150ms ease;
}
.single-product .product .flex-control-thumbs li img:hover,
.single-product .product .flex-control-thumbs li img.flex-active {
    opacity: 1;
}
.single-product .product .summary,
.single-product .product .entry-summary {
    width: 100% !important; float: none !important; margin: 0 !important;
}
.single-product .product .product_title,
.single-product .product h1.product_title {
    font-family: var(--font-display) !important;
    font-size: clamp(28px, 3.6vw, 40px) !important; font-weight: 800 !important;
    color: var(--color-text) !important; margin: 0 0 16px !important; line-height: 1.15 !important;
    letter-spacing: -0.3px !important;
}
.single-product .product .price { display: none !important; }
.single-product .product .woocommerce-product-details__short-description {
    color: var(--color-muted); font-size: 16px; line-height: 1.7; margin-bottom: 24px;
}
.single-product .product .product_meta { font-size: 13px; color: var(--color-muted); padding-top: 16px; border-top: 1px solid var(--color-border); margin-top: 24px; }
.single-product .product .product_meta a { color: var(--color-red); }

/* === SINGLE PRODUCT — Quote-only flow === */

/* Hide WooCommerce + YITH's own buttons on single product (we render our own) */
.single-product .product .stock,
.single-product .product form.cart .quantity,
.single-product .product form.cart .single_add_to_cart_button,
.single-product .product button.single_add_to_cart_button,
.single-product .product input.single_add_to_cart_button,
.single-product .product .yith-ywraq-add-to-quote,
.single-product .product .add-request-quote-button,
.single-product .product .yith-ywraq-add-button,
.single-product .product .yith-ywraq-browse-link,
.single-product .product .ywraq-browse-link,
.single-product .product .yith-ywraq-button-frame { display: none !important; }

/* Our custom quote form */
.single-product .product .heacotex-rfq-form {
    margin: 0 0 28px !important;
    padding: 20px;
    background: var(--color-bg-pure);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px 20px;
    align-items: flex-end;
    position: relative;
}

.heacotex-quantity-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 0 0 auto;
}
.heacotex-quantity-label {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--color-red);
    line-height: 1;
}
.hx-qty-input {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    padding: 14px 16px;
    border-radius: 4px;
    width: 120px;
    text-align: center;
    box-sizing: border-box;
    transition: border-color 200ms;
    -moz-appearance: textfield;
}
.hx-qty-input::-webkit-inner-spin-button,
.hx-qty-input::-webkit-outer-spin-button {
    opacity: 1;
    height: auto;
}
.hx-qty-input:focus {
    outline: none;
    border-color: var(--color-red);
}

.heacotex-add-quote-btn,
.heacotex-add-quote-btn:link,
.heacotex-add-quote-btn:visited {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    background: var(--color-red) !important;
    color: var(--color-text) !important;
    border: 1px solid var(--color-red) !important;
    font-family: var(--font-display) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    padding: 14px 26px !important;
    border-radius: 4px !important;
    cursor: pointer;
    min-height: 50px;
    box-sizing: border-box;
    transition: background 200ms, border-color 200ms, transform 200ms;
    text-decoration: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    appearance: none;
}
.heacotex-add-quote-btn:hover {
    background: var(--color-blue) !important;
    border-color: var(--color-blue) !important;
    color: var(--color-text) !important;
    transform: translateY(-1px);
}
.heacotex-add-quote-btn:focus,
.heacotex-add-quote-btn:focus-visible {
    background: var(--color-red) !important;
    border-color: var(--color-red) !important;
    color: var(--color-text) !important;
    outline: 2px solid var(--color-text);
    outline-offset: 2px;
}
.heacotex-add-quote-btn:active {
    background: var(--color-red) !important;
    border-color: var(--color-red) !important;
    color: var(--color-text) !important;
    transform: translateY(0);
}
.heacotex-add-quote-btn svg { width: 16px; height: 16px; transition: transform 200ms; }
.heacotex-add-quote-btn:hover svg { transform: translateX(4px); }

.hx-rfq-toast {
    flex: 1 0 100%;
    margin-top: 8px;
    padding: 10px 14px;
    background: rgba(0, 96, 192, 0.15);
    border: 1px solid var(--color-blue);
    border-radius: 4px;
    font-size: 14px;
    color: var(--color-text);
}
.hx-rfq-toast a { color: var(--color-red); font-weight: 700; }

@media (max-width: 600px) {
    .single-product .product .heacotex-rfq-form { flex-direction: column; align-items: stretch; }
    .hx-qty-input { width: 100%; }
    .heacotex-add-quote-btn { width: 100%; justify-content: center; }
}

/* Tabs — span BOTH columns of the .product CSS grid so the description uses
   the full gallery+summary width below the row. */
.single-product div.product > .woocommerce-tabs,
.single-product div.product > .upsells.products {
    grid-column: 1 / -1;
}
.single-product .woocommerce-tabs {
    clear: both;
    width: 100%;
    margin-top: clamp(56px, 7vw, 88px);
    padding-top: clamp(40px, 5vw, 56px);
    border-top: 1px solid var(--color-border);
}
.single-product .woocommerce-tabs ul.tabs {
    list-style: none; padding: 0 !important; margin: 0 0 24px !important;
    border-bottom: 1px solid var(--color-border) !important;
    display: flex; flex-wrap: wrap; gap: 8px;
}
.single-product .woocommerce-tabs ul.tabs li {
    background: transparent !important; border: none !important; border-radius: 0 !important;
    padding: 0 !important; margin: 0 !important;
}
.single-product .woocommerce-tabs ul.tabs li a {
    display: block; padding: 14px 18px !important;
    font-family: var(--font-display); font-size: 13px; font-weight: 700;
    letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--color-muted) !important; border-bottom: 2px solid transparent;
    transition: color 200ms, border-color 200ms;
}
.single-product .woocommerce-tabs ul.tabs li.active a,
.single-product .woocommerce-tabs ul.tabs li a:hover { color: var(--color-text) !important; border-bottom-color: var(--color-red); }
.single-product .woocommerce-tabs .panel { color: var(--color-text); padding: 16px 0; }
.single-product .woocommerce-tabs h2 { font-family: var(--font-display); color: var(--color-text); }

/* Related products */
.related.products,
.upsells.products {
    border-top: 1px solid var(--color-border); padding-top: 56px; margin-top: 24px;
}
.related.products > h2,
.upsells.products > h2 {
    font-family: var(--font-display);
    font-size: clamp(24px, 3vw, 32px); font-weight: 800;
    color: var(--color-text); margin: 0 0 32px;
    letter-spacing: -0.3px;
}

/* Related products rendered INSIDE the right summary column on single product pages.
   Smaller heading, tighter spacing, 2 product cards side-by-side. */
.single-product .product .summary .related.products,
.single-product .product .entry-summary .related.products {
    margin-top: 32px;
    padding-top: 28px;
    border-top: 1px solid var(--color-border);
    width: 100%;
    clear: both;
}
.single-product .product .summary .related.products > h2,
.single-product .product .entry-summary .related.products > h2 {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--color-muted);
    margin: 0 0 20px;
}
.single-product .product .summary .related.products ul.products li.product .woocommerce-loop-product__title,
.single-product .product .entry-summary .related.products ul.products li.product .woocommerce-loop-product__title {
    font-size: 14px !important;
    line-height: 1.35 !important;
    padding: 10px 0 0 !important;
}
.single-product .product .summary .related.products ul.products li.product .button,
.single-product .product .entry-summary .related.products ul.products li.product .button { display: none !important; }

/* WooCommerce notices — flex layout with leading dot, no clipped icon */
.woocommerce-notices-wrapper { margin: 0 0 24px; }
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    position: relative;
    display: flex !important;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    background: var(--color-surface) !important;
    color: var(--color-text) !important;
    border: 1px solid var(--color-border) !important;
    border-left: 3px solid var(--color-red) !important;
    padding: 14px 18px !important;
    border-radius: 4px;
    font-size: 14.5px;
    line-height: 1.5;
    list-style: none !important;
    margin: 0 0 16px !important;
}
.woocommerce-message { border-left-color: #2BB673 !important; }
.woocommerce-error   { border-left-color: var(--color-red) !important; }
.woocommerce-info    { border-left-color: var(--color-blue) !important; }
/* Hide WC's absolutely-positioned ::before icon (was unaligned with our layout) */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none !important; content: none !important; }
/* Leading status dot — drawn by the ::after pseudo below */
.woocommerce-message::after {
    content: ''; position: static; width: 8px; height: 8px; border-radius: 50%;
    background: #2BB673; flex: 0 0 auto; order: -1;
}
.woocommerce-error::after  { background: var(--color-red) !important; }
.woocommerce-info::after   { background: var(--color-blue) !important; }
/* The "View cart"/"View quote" button YITH appends inside the message */
.woocommerce-message .button,
.woocommerce-message a.button,
.woocommerce-message a {
    display: inline-flex; align-items: center; gap: 6px;
    margin-left: auto !important;
    padding: 8px 14px;
    background: var(--color-red);
    color: #fff !important;
    border-radius: 4px;
    font-weight: 600; font-size: 13px;
    text-decoration: none;
    transition: background 0.15s ease;
}
.woocommerce-message .button:hover,
.woocommerce-message a:hover { background: var(--color-blue); color: #fff !important; }
.woocommerce-info a, .woocommerce-error a { color: var(--color-red); }

/* ============================================================
   CTA STRIP
   ============================================================ */
.hx-cta-strip {
    background: var(--color-red);
    position: relative;
    overflow: hidden;
}
.hx-cta-strip::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(115deg, transparent 40%, rgba(0, 0, 0, 0.15) 70%, transparent 100%),
        linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.06) 50%, transparent 100%);
    pointer-events: none;
}
.hx-cta-strip__inner {
    padding: clamp(56px, 8vw, 100px) 0;
    text-align: center;
    position: relative;
    z-index: 1;
}
.hx-cta-strip h2 {
    font-family: var(--font-display);
    font-size: clamp(28px, 4.5vw, 48px);
    font-weight: 800;
    line-height: 1.1;
    color: var(--color-text);
    margin: 0 0 16px;
    letter-spacing: -0.5px;
}
.hx-cta-strip p {
    font-size: clamp(15px, 1.4vw, 18px);
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 32px;
}

/* ============================================================
   PRODUCT FAQ tab — accordion
   ============================================================ */
.hx-product-faq { margin-top: 8px; }
.hx-product-faq__item {
    border: 1px solid var(--color-border);
    border-radius: 5px;
    margin-bottom: 10px;
    background: var(--color-bg-pure);
    overflow: hidden;
}
.hx-product-faq__q {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 15px; font-weight: 700;
    color: var(--color-text);
    list-style: none;
    transition: color 150ms ease;
}
.hx-product-faq__q::-webkit-details-marker { display: none; }
.hx-product-faq__q::after {
    content: '+';
    flex: 0 0 auto;
    font-size: 22px; font-weight: 400;
    line-height: 1;
    color: var(--color-red);
    transition: transform 200ms ease;
}
.hx-product-faq__item[open] .hx-product-faq__q::after { transform: rotate(45deg); }
.hx-product-faq__q:hover { color: var(--color-red); }
.hx-product-faq__a {
    padding: 0 18px 16px;
    color: var(--color-muted);
    font-size: 14.5px;
    line-height: 1.65;
}
.hx-product-faq__a p { margin: 0 0 10px; }
.hx-product-faq__a p:last-child { margin-bottom: 0; }

/* ============================================================
   404 — page not found
   ============================================================ */
.hx-404-hero {
    position: relative; overflow: hidden;
    padding: clamp(90px, 13vw, 170px) 0 clamp(80px, 11vw, 140px);
    background: var(--color-bg);
    text-align: center;
}
.hx-404-hero__bg { position: absolute; inset: 0; pointer-events: none; }
.hx-404-hero__inner { position: relative; max-width: 720px; margin: 0 auto; }
.hx-404__code {
    font-family: var(--font-display);
    font-size: clamp(96px, 20vw, 220px);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -4px;
    margin: 0 0 4px;
    background: linear-gradient(160deg, rgba(255,255,255,0.14), rgba(240,0,0,0.28) 55%, rgba(0,96,192,0.18));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    user-select: none;
}
.hx-404__title {
    font-family: var(--font-display);
    font-size: clamp(28px, 4vw, 46px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -1px;
    color: var(--color-text);
    margin: 12px 0 16px;
}
.hx-404__sub {
    color: var(--color-muted);
    font-size: clamp(15px, 1.3vw, 17px);
    line-height: 1.65;
    max-width: 540px;
    margin: 0 auto 32px;
}
.hx-404__search {
    display: flex;
    max-width: 460px;
    margin: 0 auto 40px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    overflow: hidden;
    background: var(--color-bg-pure);
}
.hx-404__search input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 14px 16px;
    background: transparent;
    border: none;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 15px;
}
.hx-404__search input:focus { outline: none; }
.hx-404__search input::placeholder { color: var(--color-muted); }
.hx-404__search button {
    flex: 0 0 auto;
    width: 54px;
    border: none;
    background: var(--color-red);
    color: #fff;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 150ms ease;
}
.hx-404__search button:hover { background: var(--color-blue); }
.hx-404__search button svg { width: 18px; height: 18px; }
.hx-404__links {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
@media (max-width: 640px) { .hx-404__links { grid-template-columns: 1fr 1fr; } }
.hx-404__links a {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 16px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    text-decoration: none;
    text-align: left;
    transition: border-color 200ms, transform 200ms;
}
.hx-404__links a:hover {
    border-color: var(--color-red);
    transform: translateY(-3px);
}
.hx-404__link-title {
    font-family: var(--font-display);
    font-size: 15px; font-weight: 700;
    color: var(--color-text);
}
.hx-404__link-desc {
    font-size: 12.5px;
    color: var(--color-muted);
    line-height: 1.4;
}