/* ============================================================================
   Techno Orbits Canada — Site styles
   ========================================================================= */

/* ---- Reset & base ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; font-size: 100%; }
/* Scale the whole rem-based type hierarchy up on large monitors (24"→32").
   ≤24" standard; ~27" ≈ +16%; 32"/4K ≈ +20% — for readability + screen use. */
@media (min-width: 2000px) { html { font-size: 108%; } }
@media (min-width: 2560px) { html { font-size: 116%; } }
@media (min-width: 3200px) { html { font-size: 120%; } }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: 1.65;
    color: var(--text-secondary);
    background-color: var(--bg-page);
    background-image:
        radial-gradient(1100px 600px at 85% -5%, rgba(36, 60, 145, 0.05), transparent 60%),
        radial-gradient(1000px 700px at 100% 100%, rgba(237, 28, 36, 0.03), transparent 55%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

h1, h2, h3, h4 { font-family: var(--font-display); color: var(--text-primary); line-height: 1.1; margin: 0; font-weight: 700; }
p { margin: 0 0 1rem; }
a { color: var(--primary-cyan); text-decoration: none; transition: color var(--t-fast) var(--ease); }
img { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }

/* Visible keyboard focus (WCAG 2.4.7) */
:focus-visible { outline: 2px solid var(--primary-cyan); outline-offset: 2px; border-radius: 4px; }
:focus:not(:focus-visible) { outline: none; }

.visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Layout ------------------------------------------------------------- */
/* ~80% content width (≈10% gutter each side), capped at --container (1700). */
.container { width: 80%; max-width: var(--container); margin-inline: auto; }
@media (max-width: 1200px) { .container { width: 86%; } }
@media (max-width: 900px)  { .container { width: 90%; } }
@media (max-width: 600px)  { .container { width: auto; margin-inline: 16px; } }
.section { padding-block: clamp(1.75rem, 3.5vw, 3.25rem); }
/* Standard, tighter gap between the sticky nav and the first (hero) section — same on every page. */
main > .section:first-child { padding-top: clamp(1rem, 2vw, 1.5rem); }
.section--tight { padding-block: clamp(1.25rem, 2.5vw, 2.25rem); }
/* Optional alternating soft-grey band (spec) */
.section--alt, .bg-soft { background: var(--to-bg-soft); }
main { display: block; }
.skip-link {
    position: absolute; left: -999px; top: 0; z-index: 200;
    background: var(--color-primary); color: #fff; padding: .6rem 1rem; border-radius: 0 0 var(--radius-sm) 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ---- Glass primitives --------------------------------------------------- */
.glass {
    background: var(--surface-glass);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(var(--blur));
    -webkit-backdrop-filter: blur(var(--blur));
    box-shadow: var(--shadow-panel);
}
.panel {
    background:
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0) 40%),
        var(--surface-glass);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-panel);
    /* Same early-cap issue as the fs-* tokens (see tokens.css) — 3.5vw against the
       80vw container hit its 3rem ceiling at ~1371px, right inside the common
       13-22" laptop/monitor range. Lower multiplier keeps it scaling smoothly out
       to ~1875px instead. */
    padding: clamp(1.5rem, 2.6vw, 3rem);
}

/* ---- Typography helpers ------------------------------------------------- */
.eyebrow {
    display: inline-flex; align-items: center; gap: .6rem;
    font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .22em;
    text-transform: uppercase; color: var(--to-blue); margin-bottom: 1rem;
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; border-radius: 2px; }
.eyebrow--coral { color: var(--to-red); }
.section-title { font-size: var(--fs-section); margin-bottom: .5rem; }
.lead { color: var(--text-secondary); max-width: 60ch; }
/* Home product section falls back to this notice when the Products page isn't Published. */
.products-status { padding: clamp(2rem, 5vw, 3.5rem); }
.products-status__title { font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 800; letter-spacing: -.01em; margin: .5rem 0 .75rem; color: var(--to-navy); }
.products-status__desc { max-width: 52ch; margin: 0 auto 1.5rem; }
.text-cyan { color: var(--to-blue); }
.text-coral, .text-red { color: var(--to-red); }
.grad-underline { width: 90px; height: 3px; background: var(--to-gradient-primary); border-radius: 3px; margin: 1.25rem 0; }

/* ---- Buttons ------------------------------------------------------------ */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
    padding: .85rem 1.6rem; border-radius: var(--radius-pill); font-weight: 600; font-size: .98rem;
    border: 1px solid transparent; transition: transform var(--t-fast) var(--ease), box-shadow var(--t-med) var(--ease), background var(--t-med) var(--ease);
    min-height: 48px; white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn .ico { width: 18px; height: 18px; }

/* Primary CTA — purple→red gradient pill with a white circular arrow puck. */
.btn-primary, .btn-cyan {
    justify-content: space-between; gap: 1.1rem; min-height: 56px; padding: 6px 8px 6px 24px;
    color: #fff; background: var(--to-gradient-primary); background-size: 160% 100%; background-position: 0% 0%;
    box-shadow: var(--to-shadow-button); border: 0;
    transition: transform var(--t-fast) var(--ease), box-shadow var(--t-med) var(--ease), background-position var(--t-med) var(--ease);
}
.btn-primary:hover, .btn-cyan:hover {
    color: #fff; transform: translateY(-2px); background-position: 100% 0%;
    box-shadow: 0 14px 34px rgba(237, 28, 36, 0.22);
}
.btn-primary .ico, .btn-cyan .ico {
    width: 44px; height: 44px; flex: 0 0 auto; display: grid; place-items: center;
    color: #111827; background: #fff; border-radius: 50%; padding: 11px;
}
.btn-cyan { min-height: 46px; padding: 4px 6px 4px 20px; gap: .9rem; }
.btn-cyan .ico { width: 36px; height: 36px; padding: 9px; }

/* Premium hover for EVERY primary button, site-wide: the base already lifts +
   shifts the gradient; add the arrow nudge, puck scale, press, and light sweep. */
.btn-primary, .btn-cyan { position: relative; overflow: hidden; }
.btn-primary .ico, .btn-cyan .ico { transition: transform var(--t-med) var(--ease), background var(--t-fast) var(--ease); }
.btn-primary:hover .ico, .btn-cyan:hover .ico { transform: translateX(4px) scale(1.05); }
.btn-primary:active, .btn-cyan:active { transform: scale(.98); }
.btn-primary::before, .btn-cyan::before {
    content: ""; position: absolute; top: 0; bottom: 0; width: 45%; left: -55%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
    transform: skewX(-18deg); pointer-events: none; opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
    .btn-primary:hover::before, .btn-cyan:hover::before { animation: btnSweep .8s ease; }
}
@media (prefers-reduced-motion: reduce) {
    .btn-primary:hover .ico, .btn-cyan:hover .ico { transform: none; }
}

/* Secondary — clean outlined navy button. */
.btn-glass, .btn-secondary {
    background: var(--to-bg); color: var(--to-blue);
    border: 1px solid #D8DEE8; backdrop-filter: none;
}
.btn-glass:hover, .btn-secondary:hover { background: var(--to-blue); color: #fff; border-color: var(--to-blue); }
.btn-sm { padding: .6rem 1.1rem; min-height: 40px; font-size: .9rem; }
.btn-block { width: 100%; }

/* ---- Top bar ------------------------------------------------------------ */
/* Slightly tighter vertical padding so the larger logo doesn't grow header height. */
.topbar { padding-block: .85rem .6rem; }
.topbar__inner {
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
}
.brand { display: inline-flex; align-items: center; gap: 1.1rem; padding-block: .15rem; }
/* Header — full designed horizontal lockup (icon + wordmark), high-res PNG, aspect ratio preserved.
   Fluid height that scales smoothly with the viewport: ~44px on phones → ~72px on large screens. */
.brand__lockup {
    height: clamp(60px, calc(27px + 4.4vw), 99px);
    width: auto; object-fit: contain; display: block; max-width: 100%;
    image-rendering: auto; /* smooth, high-quality scaling — sharper than optimize-contrast for this lockup */
}
/* Header — bold hexagon crest (vector SVG, crisp at any size), aspect ratio preserved. */
.brand__crest {
    height: clamp(79px, calc(33px + 5.8vw), 127px);
    width: auto; object-fit: contain; display: block;
    filter: drop-shadow(0 5px 14px rgba(23,42,104,.18));
}
/* Footer — reversed mark on navy + wordmark text (matched ~20% larger). */
.brand__leaf {
    height: clamp(52px, 4.6vw, 66px); width: auto; object-fit: contain;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,.25));
}
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name { font-family: var(--font-display); font-weight: 800; letter-spacing: .12em; color: var(--text-primary); font-size: clamp(1.4rem, 1.8vw, 1.9rem); }
.brand__sub { font-size: clamp(.7rem, .9vw, .86rem); letter-spacing: .44em; color: var(--color-primary); font-weight: 700; margin-top: 5px; }
.topbar__contact { display: flex; align-items: center; gap: 1.75rem; color: var(--text-secondary); font-size: .9rem; }
.topbar__contact a { color: var(--text-secondary); display: inline-flex; align-items: center; gap: .5rem; }
.topbar__contact a:hover { color: var(--primary-cyan); }
.topbar__contact .ico { width: 16px; height: 16px; color: var(--primary-cyan); }
/* Search, Contact-Us button and EN/FR switch share one 46px height so the row aligns cleanly. */
.topbar__actions { display: flex; align-items: center; gap: .6rem; }
.topbar__actions .btn-cyan { min-height: 0; height: 46px; padding: 3px 6px 3px 18px; gap: .6rem; }
.topbar__actions .btn-cyan .ico { width: 40px; height: 40px; padding: 10px; }
.lang-select {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: var(--radius-sm);
    background: var(--surface-glass-light); border: 1px solid var(--border-glass); color: var(--text-primary);
    transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.lang-select:hover { color: var(--color-primary); border-color: var(--border-glass-strong); }
.lang-select .ico { width: 19px; height: 19px; }

.lang-switch {
    display: inline-flex; align-items: center; gap: .35rem; height: 46px; padding: 0 .95rem; border-radius: var(--radius-sm);
    background: var(--surface-glass-light); border: 1px solid var(--border-glass); font-size: .9rem;
}
.lang-switch__sep { color: var(--text-muted); }
.lang-opt { color: var(--text-muted); font-weight: 600; text-decoration: none; padding: .15rem .3rem; border-radius: 4px; }
.lang-opt:hover { color: var(--text-primary); }
.lang-opt.is-active { color: var(--primary-cyan); }

/* ---- Nav pill ----------------------------------------------------------- */
.nav-wrap { position: sticky; top: .8rem; z-index: 100; padding-top: 1rem; }
.nav {
    display: flex; align-items: center; justify-content: space-between; gap: .6rem;
    padding: .4rem .55rem; border-radius: var(--radius-pill);
    background: var(--to-gradient-footer); border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
    box-shadow: var(--shadow-panel); transition: padding var(--t-med) var(--ease);
}
.nav.is-scrolled { padding-block: .3rem; }
/* Logo chip (white so the colour lockup stays visible on the gradient) */
/* Nav brand chip holds the separated lockup: admin-managed icon image + crisp HTML text. */
.nav__brand { flex: 0 0 auto; display: inline-flex; align-items: center; background: #fff; border-radius: var(--radius-pill); padding: .3rem .9rem; box-shadow: 0 2px 8px rgba(12,20,50,.14); }
.brand-lockup { display: inline-flex; align-items: center; text-decoration: none; }
.brand-lockup__icon { width: auto; max-width: 100%; object-fit: contain; display: block; }   /* height set inline (admin) */
.brand-lockup__text { display: inline-flex; flex-direction: column; line-height: 1; }
.brand-lockup__primary { font-family: var(--font-display, inherit); font-weight: 300; font-size: clamp(.78rem, .9vw, .95rem); white-space: nowrap; }
.brand-lockup__secondary { font-weight: 800; font-size: clamp(.44rem, .52vw, .55rem); margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(23, 39, 102, .35); display: block; text-align: justify; text-align-last: justify; }
@media (max-width: 480px) { .nav__brand { padding: .26rem .7rem; } }
/* Panel holds the menu + the actions; becomes the mobile drawer */
.nav__panel { flex: 1 1 auto; display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-width: 0; }
.nav__list { display: flex; align-items: center; gap: .5rem; flex-wrap: nowrap; justify-content: flex-end; flex: 1 1 auto; padding-inline-end: .75rem; }
/* Right-side actions: search, contact, language */
.nav__actions { flex: 0 0 auto; display: flex; align-items: center; gap: .5rem; }
.nav__search { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #fff; border: 1px solid rgba(255,255,255,.30); transition: background var(--t-fast) var(--ease); }
.nav__search:hover { background: rgba(255,255,255,.16); }
.nav__search .ico { width: 18px; height: 18px; }
.nav__search-label { display: none; }
.nav__contact { display: inline-flex; align-items: center; gap: .4rem; background: #fff; color: var(--to-navy); font-weight: 700; border-radius: var(--radius-pill); padding: .34rem .34rem .34rem .9rem; font-size: .92rem; white-space: nowrap; transition: transform var(--t-fast) var(--ease), box-shadow var(--t-med) var(--ease); }
.nav__contact .ico { width: 30px; height: 30px; padding: 7px; border-radius: 50%; background: var(--to-gradient-primary); color: #fff; }
.nav__contact:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(12,20,50,.22); }
/* Globe language switcher — a globe button that opens an EN/FR dropdown */
.nav__lang { position: relative; display: inline-flex; }
.nav__lang-toggle { display: inline-flex; align-items: center; gap: .35rem; padding: .38rem .55rem; border-radius: var(--radius-pill); background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.24); color: #fff; font-weight: 700; font-size: .82rem; line-height: 1; cursor: pointer; transition: background var(--t-fast) var(--ease); }
.nav__lang-toggle:hover { background: rgba(255,255,255,.22); }
.nav__lang-ic { width: 16px; height: 16px; }
.nav__lang-caret { width: 12px; height: 12px; opacity: .8; transition: transform var(--t-fast) var(--ease); }
.nav__lang.is-open .nav__lang-caret { transform: rotate(180deg); }
.nav__lang-menu {
    position: absolute; top: calc(100% + .5rem); right: 0; min-width: 152px; padding: .35rem;
    background: var(--to-gradient-footer-dark); border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius-md);
    box-shadow: var(--shadow-panel); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
    display: flex; flex-direction: column; gap: 2px; z-index: 130;
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.nav__lang.is-open .nav__lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__lang-menu .lang-opt { display: block; padding: .45rem .7rem; border-radius: 8px; color: rgba(255,255,255,.9); font-weight: 700; font-size: .85rem; text-decoration: none; white-space: nowrap; }
.nav__lang-menu .lang-opt:hover { background: rgba(255,255,255,.14); color: #fff; }
.nav__lang-menu .lang-opt.is-active { background: #fff; color: var(--to-navy); }
.nav__link {
    position: relative; display: inline-flex; align-items: center; gap: .3rem;
    padding: .5rem .72rem; border-radius: var(--radius-pill); color: #fff;
    font-weight: 600; font-size: 1rem; white-space: nowrap; transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.nav__link:hover { color: #fff; background: rgba(255,255,255,.16); }
.nav__link.is-active { color: #fff; font-weight: 700; background: rgba(255,255,255,.20); box-shadow: inset 0 0 0 1px rgba(255,255,255,.30); }
.nav__link.is-active::after {
    content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: -.85rem;
    width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px rgba(255,255,255,.5);
}
.nav__link .caret { width: 12px; height: 12px; opacity: .7; }
.nav__toggle { display: none; }
/* CMS nav: badge (e.g. NEW) + optional CTA-style item. */
.nav__badge {
    display: inline-flex; align-items: center; margin-left: .4rem; padding: .05rem .4rem;
    border-radius: var(--radius-pill); font-size: .6rem; font-weight: 800; letter-spacing: .06em;
    background: var(--to-red); color: #fff; text-transform: uppercase; line-height: 1.4;
}
.nav__link--cta { background: rgba(255,255,255,.22); font-weight: 700; box-shadow: inset 0 0 0 1px rgba(255,255,255,.30); }
/* Per-device visibility (admin-controlled). Desktop >1024, tablet 601–1024, mobile ≤600. */
@media (min-width: 1025px) { .nav-hide-desktop { display: none !important; } }
@media (min-width: 601px) and (max-width: 1024px) { .nav-hide-tablet { display: none !important; } }
@media (max-width: 600px) { .nav-hide-mobile { display: none !important; } }

/* Resources dropdown */
.nav__has-menu { position: relative; }
.nav__menu {
    position: absolute; top: calc(100% + .6rem); left: 50%; transform: translateX(-50%) translateY(8px);
    min-width: 220px; padding: .5rem; z-index: 120;
    background: var(--to-gradient-footer-dark); border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius-md);
    box-shadow: var(--shadow-panel); backdrop-filter: blur(var(--blur));
    opacity: 0; visibility: hidden; transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
/* Transparent hover-bridge across the gap between the link and the menu, so moving the mouse
   down into the dropdown never crosses an un-hovered gap (kept the dropdown from being selectable).
   Applies to every nav dropdown via the shared .nav__menu class. */
.nav__menu::before {
    content: ""; position: absolute; left: 0; right: 0; top: -0.7rem; height: 0.7rem;
}
.nav__has-menu:hover .nav__menu, .nav__has-menu:focus-within .nav__menu {
    opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.nav__menu a { display: block; padding: .55rem .8rem; border-radius: var(--radius-sm); color: rgba(255,255,255,.92); font-size: 1.04rem; font-weight: 600; }
.nav__menu a:hover { background: rgba(255,255,255,.14); color: #fff; }

/* ---- Per-page hero decorative background watermark ---------------------- */
/* A managed hero image (admin /admin/hero, one per page) painted as a subtle
   low-opacity layer BEHIND the hero content. The .hero-bg-layer element is inset
   to the host panel and renders the image; opacity is applied to the LAYER only
   (never the host container or its content). Host content is lifted above it with
   z-index (position:relative, no offset → no movement, no layout shift). Any hero
   container becomes a host by adding the .hero-bg-host class + the HeroBg component
   as its first child. */
.hero-bg-host {
    position: relative; isolation: isolate;
    /* Fixed, predefined & responsive hero height. The background is a cover-fit
       absolute layer (below), so the uploaded image can never grow/shrink the
       container — the hero stays this size on every page and at every resolution.
       Content is vertically centred; min-height only ever grows to fit content. */
    min-height: clamp(340px, 32vw, 480px);
    display: flex; flex-direction: column; justify-content: center;
}
.hero-bg-host > .hero-bg-layer {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    border-radius: inherit;
    background-image: var(--hero-bg-desktop);
    background-size: cover;
    background-position: var(--hero-bg-pos, center);
    background-repeat: no-repeat;
    opacity: var(--hero-bg-opacity, .08);
}
/* Optional light (white) contrast wash over the watermark, still behind content. */
.hero-bg-host > .hero-bg-layer::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    background: rgba(255, 255, 255, var(--hero-bg-overlay, 0));
}
/* Lift every existing hero child above the layer — no layout change (relative, no offset). */
.hero-bg-host > *:not(.hero-bg-layer) { position: relative; z-index: 1; }
/* Responsive art-direction of the watermark (smaller files on smaller screens). */
@media (max-width: 1024px) { .hero-bg-host > .hero-bg-layer { background-image: var(--hero-bg-tablet); } }
@media (max-width: 640px)  { .hero-bg-host > .hero-bg-layer { background-image: var(--hero-bg-mobile); } }

/* ============================================================================
   Home hero — premium, subtle medical-tech motion (scoped to .hero-anim).
   All decorative layers are absolute + pointer-events:none and never change the
   hero's size. Everything degrades to a clean static state under reduced-motion.
   ========================================================================= */
.hero-fx { overflow: hidden; border-radius: inherit; pointer-events: none; }
/* Override .hero-bg-host > *:not(.hero-bg-layer){position:relative} (equal specificity, later wins)
   so the fx layer is an absolute full-bleed box behind the content, not a collapsed 0-height box. */
.hero-anim > .hero-fx { position: absolute; inset: 0; z-index: 0; }
/* Logo navy + red hero theme: ice-blue base, navy "Empowering" */
.hero-anim.hero { background: linear-gradient(135deg, var(--to-ice) 0%, #ffffff 58%); }
.hero-anim .hero__title .l1 { color: var(--to-navy); }

/* Right-side medical network */
.hero-net { position: absolute; top: 0; right: 0; width: min(52%, 560px); height: 100%; opacity: .6; }
.hero-net .net-line { stroke: var(--to-med-blue); stroke-width: 1.1; stroke-dasharray: 260; stroke-dashoffset: 0; opacity: .42; }
.hero-net .net-node { fill: var(--to-med-blue); opacity: .55; }
.hero-net .net-node--red { fill: var(--to-red); opacity: .6; }
.hero-net .net-dot { fill: #fff; opacity: 0; filter: drop-shadow(0 0 4px rgba(255,255,255,.8)); offset-path: path('M330 70 L300 210 L260 260 L320 330'); }
@media (max-width: 992px) { .hero-net { width: 72%; opacity: .4; } }

/* Ambient floating particles */
.hero-particle {
    position: absolute; bottom: -24px; border-radius: 50%; opacity: 0;
    background: radial-gradient(circle at 32% 30%, rgba(52,120,212,.55), rgba(115,214,255,0) 70%);
    filter: blur(1px);
}

@keyframes heroRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes netDraw { from { stroke-dashoffset: 260; } to { stroke-dashoffset: 0; } }
@keyframes nodePulse { 0%, 100% { opacity: .25; } 50% { opacity: .8; } }
@keyframes dotTravel { 0% { offset-distance: 0%; opacity: 0; } 8% { opacity: .9; } 92% { opacity: .9; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes floatUp {
    0% { opacity: 0; transform: translateY(0) translateX(0); }
    12% { opacity: var(--o, .5); }
    88% { opacity: var(--o, .5); }
    100% { opacity: 0; transform: translateY(calc(-1 * var(--rise, 240px))) translateX(var(--drift, 12px)); }
}
@keyframes healSweep { from { transform: translateX(-115%) skewX(-18deg); } to { transform: translateX(240%) skewX(-18deg); } }

@media (prefers-reduced-motion: no-preference) {
    /* Staggered content entrance (runs on load — no JS dependency) */
    .hero-anim .eyebrow          { animation: heroRise .6s var(--ease) .10s both; }
    .hero-anim .hero__title .l1  { animation: heroRise .6s var(--ease) .25s both; }
    .hero-anim .hero__title .l2  { animation: heroRise .6s var(--ease) .40s both; }
    .hero-anim .hero__title .l3  { animation: heroRise .6s var(--ease) .55s both; }
    .hero-anim .hero__desc       { animation: heroRise .6s var(--ease) .75s both; }
    .hero-anim .hero__cta        { animation: heroRise .6s var(--ease) .90s both; }
    .hero-anim .stats            { animation: heroRise .7s var(--ease) 1.05s both; }

    /* Network: draw lines in, pulse a few nodes, send a light along a path */
    .hero-anim .net-line { animation: netDraw 1.4s var(--ease) both; }
    .hero-anim .net-line:nth-of-type(2) { animation-delay: .12s; }
    .hero-anim .net-line:nth-of-type(3) { animation-delay: .24s; }
    .hero-anim .net-line:nth-of-type(4) { animation-delay: .36s; }
    .hero-anim .net-line:nth-of-type(5) { animation-delay: .48s; }
    .hero-anim .net-line:nth-of-type(6) { animation-delay: .60s; }
    .hero-anim .net-line:nth-of-type(7) { animation-delay: .72s; }
    .hero-anim .net-line:nth-of-type(8) { animation-delay: .84s; }
    .hero-anim .net-node--pulse { animation: nodePulse 3.4s ease-in-out infinite; }
    .hero-anim .net-node--pulse:nth-of-type(even) { animation-delay: 1.2s; }
    .hero-anim .net-dot { animation: dotTravel 4s ease-in-out 1.6s infinite; }

    /* Ambient particles */
    .hero-anim .hero-particle { animation: floatUp var(--dur, 14s) linear infinite; }

    /* One-time highlight sweep over the red "Healthcare." word */
    .hero-anim .hero__title .l2 { position: relative; overflow: hidden; }
    .hero-anim .hero__title .l2::after {
        content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%;
        background: linear-gradient(100deg, transparent, rgba(255,255,255,.65), transparent);
        transform: translateX(-115%) skewX(-18deg); pointer-events: none;
        animation: healLoop 7s var(--ease) 1.15s infinite;
    }
}
@keyframes healLoop {
    0% { transform: translateX(-115%) skewX(-18deg); }
    16% { transform: translateX(240%) skewX(-18deg); }
    100% { transform: translateX(240%) skewX(-18deg); }
}

/* CTA + stat micro-interactions (hover only) */
.hero-anim .btn-primary .ico { transition: transform .25s var(--ease); }
.hero-anim .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(75,43,131,.34), 0 6px 20px rgba(237,28,36,.22); }
.hero-anim .btn-primary:hover .ico { transform: translateX(5px) rotate(24deg); }
.hero-anim .btn-primary:active { transform: scale(.98); }
.hero-anim .btn-glass:hover { transform: translateY(-2px); border-color: var(--to-blue); }
.hero-anim .stat { transition: transform .25s var(--ease), background .25s var(--ease); border-radius: 12px; }
.hero-anim .stat:hover { transform: translateY(-3px); background: rgba(255,255,255,.55); }
@media (prefers-reduced-motion: reduce) {
    .hero-anim .btn-primary:hover, .hero-anim .btn-glass:hover, .hero-anim .stat:hover { transform: none; }
}

/* ---- Hero layer 2: ambient gradient, scanner, data cards, live bits ------ */
.hero-ambient {
    position: absolute; inset: -20%; z-index: 0; pointer-events: none; opacity: .55; filter: blur(10px);
    background:
        radial-gradient(38% 48% at 20% 30%, rgba(36,60,145,.16), transparent 70%),
        radial-gradient(50% 60% at 78% 68%, rgba(237,28,36,.08), transparent 70%),
        radial-gradient(44% 54% at 72% 22%, rgba(15,178,168,.10), transparent 70%),
        radial-gradient(46% 56% at 30% 82%, rgba(75,43,131,.12), transparent 70%);
}
.hero-scan {
    position: absolute; top: 0; bottom: 0; left: 0; width: 38%; z-index: 0; pointer-events: none; opacity: 0;
    background: linear-gradient(100deg, transparent, rgba(120,180,255,.16) 45%, rgba(255,255,255,.30) 50%, rgba(120,180,255,.16) 55%, transparent);
    mix-blend-mode: screen; transform: translateX(160%) skewX(-8deg);
}
.hero-net .net-dot--2 { offset-path: path('M250 130 L300 210 L370 280'); }
.hero-net .net-dot--3 { offset-path: path('M360 160 L300 210 L260 260 L320 330'); }

/* Floating glass data cards (right side; behind the left-column content) */
.hero-cards { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-card {
    position: absolute; display: flex; align-items: center; gap: .6rem;
    padding: .55rem .8rem; border-radius: 14px; max-width: 232px; overflow: hidden;
    background: rgba(255,255,255,.62); border: 1px solid rgba(255,255,255,.75);
    box-shadow: 0 12px 30px rgba(23,42,104,.12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.hero-card__ic { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px; background: var(--to-gradient-blue); color: #fff; }
.hero-card__ic .ico { width: 18px; height: 18px; }
.hero-card__t { display: block; font-size: .82rem; font-weight: 800; color: var(--to-navy); line-height: 1.15; }
.hero-card__s { display: block; font-size: .7rem; color: var(--text-secondary); }
.hero-card--a { top: 9%; right: 5%; }
.hero-card--b { top: 39%; right: 22%; }
.hero-card--c { top: 58%; right: 6%; }
.hero-card__scan { position: absolute; top: 0; bottom: 0; width: 42%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent); transform: translateX(-140%); pointer-events: none; }
@media (max-width: 1100px) { .hero-card--b { display: none; } }
@media (max-width: 900px) { .hero-cards { display: none; } }

/* Blinking caret after "Healthcare." */
.hero-caret { display: inline-block; width: .06em; height: .82em; margin-left: .08em; background: var(--to-red); vertical-align: -.02em; opacity: 0; }
/* Live status dot on the 24/7 stat */
.stat__live { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: #16a34a; margin-left: .35rem; vertical-align: .16em; box-shadow: 0 0 0 0 rgba(22,163,74,.45); }

@keyframes ambientShift { from { transform: translate3d(-2%, -1%, 0) scale(1.02); } to { transform: translate3d(2%, 2%, 0) scale(1.06); } }
@keyframes heroScan {
    0% { opacity: 0; transform: translateX(160%) skewX(-8deg); }
    8% { opacity: .9; } 46% { opacity: .9; }
    56%, 100% { opacity: 0; transform: translateX(-70%) skewX(-8deg); }
}
@keyframes cardFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes cardScan { 0% { transform: translateX(-140%); } 26% { transform: translateX(260%); } 100% { transform: translateX(260%); } }
@keyframes caretBlink { 0%, 49% { opacity: .85; } 50%, 100% { opacity: 0; } }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(22,163,74,.45); } 70% { box-shadow: 0 0 0 8px rgba(22,163,74,0); } 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); } }
@keyframes btnSweep { 0% { left: -55%; opacity: .8; } 100% { left: 130%; opacity: 0; } }

@media (prefers-reduced-motion: no-preference) {
    .hero-anim .hero-ambient { animation: ambientShift 22s ease-in-out infinite alternate; }
    .hero-anim .hero-scan { animation: heroScan 10s ease-in-out 2.5s infinite; }
    .hero-anim .net-dot--2 { animation: dotTravel 4.6s ease-in-out 2.4s infinite; }
    .hero-anim .net-dot--3 { animation: dotTravel 5.2s ease-in-out 3.2s infinite; }
    .hero-anim .hero-card { animation: cardFloat 7s ease-in-out infinite; }
    .hero-anim .hero-card--b { animation-delay: 1.4s; }
    .hero-anim .hero-card--c { animation-delay: 2.8s; }
    .hero-anim .hero-card__scan { animation: cardScan 6.5s ease-in-out 1s infinite; }
    .hero-anim .hero-card--b .hero-card__scan { animation-delay: 3s; }
    .hero-anim .hero-card--c .hero-card__scan { animation-delay: 5s; }
    .hero-anim .hero-caret { animation: caretBlink 1.1s steps(1) 2.2s infinite; }
    .hero-anim .stat__live { animation: livePulse 2s ease-out infinite; }
    /* Parallax layers ease back smoothly when the cursor leaves (JS sets transforms) */
    .hero-anim .hero-net, .hero-anim .hero-cards { transition: transform .25s ease-out; }
    /* Light sweep through the primary CTA on hover */
    .hero-anim .btn-primary { position: relative; overflow: hidden; }
    .hero-anim .btn-primary::before {
        content: ""; position: absolute; top: 0; bottom: 0; width: 45%; left: -55%;
        background: linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent);
        transform: skewX(-18deg); pointer-events: none; opacity: 0;
    }
    .hero-anim .btn-primary:hover::before { animation: btnSweep .8s ease; }
}

/* ============================================================================
   Contact hero — premium medical-tech motion (scoped to .chero).
   Decorative layers are absolute + pointer-events:none and never change layout.
   Everything degrades to a clean static state under reduced-motion.
   ========================================================================= */
/* FX layer sits full-bleed BEHIND content (overrides .hero-bg-host>*:not(.hero-bg-layer)). */
.chero > .chero-fx { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }

/* Soft corner "waves" (diffused brand blobs) */
.chero-wave { position: absolute; border-radius: 50%; filter: blur(46px); will-change: transform; }
.chero-wave--blue { top: -20%; left: -12%; width: 46%; height: 72%; background: radial-gradient(circle, rgba(52,120,212,.30), transparent 68%); opacity: .55; }
.chero-wave--red { bottom: -24%; right: -14%; width: 50%; height: 76%; background: radial-gradient(circle, rgba(237,28,36,.16), transparent 68%); opacity: .5; }

/* Right-side medical network */
.chero-net { position: absolute; top: 0; right: 0; width: min(58%, 620px); height: 100%; opacity: .5; }
.chero-net .cnet-line { stroke: var(--to-med-blue, #3478D4); stroke-width: 1.1; stroke-dasharray: 300; opacity: .4; }
.chero-net .cnet-node { fill: var(--to-med-blue, #3478D4); opacity: .5; }
.chero-net .cnet-node--red { fill: var(--to-red); opacity: .6; }
.chero-net .cnet-dot { fill: #fff; opacity: 0; filter: drop-shadow(0 0 4px rgba(120,180,255,.9)); offset-path: path('M60 60 L150 120 L200 270'); }

/* Hexagon outlines + maple leaf + floating medical icons (holographic feel) */
.chero-hex { position: absolute; opacity: .5; }
.chero-hex path { stroke: rgba(52,120,212,.30); stroke-width: 2; fill: none; vector-effect: non-scaling-stroke; }
.chero-hex--1 { width: 120px; height: 120px; top: 12%; left: 7%; }
.chero-hex--2 { width: 72px; height: 72px; bottom: 16%; right: 34%; opacity: .38; }
.chero-leaf { position: absolute; width: 32px; height: 32px; top: 20%; right: 13%; fill: rgba(237,28,36,.16); opacity: .85; }
.chero-icons { position: absolute; inset: 0; }
.chero-ic {
    position: absolute; display: grid; place-items: center; width: 34px; height: 34px;
    border-radius: 10px; color: var(--to-navy, #172766);
    background: rgba(255,255,255,.5); border: 1px solid rgba(52,120,212,.22);
    box-shadow: 0 8px 20px rgba(23,42,104,.08);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: .5;
}
.chero-ic .ico { width: 18px; height: 18px; }
.chero-ic--1 { top: 14%; left: 6%; }
.chero-ic--2 { top: 62%; left: 11%; }
.chero-ic--3 { bottom: 12%; left: 38%; }
.chero-ic--4 { top: 22%; right: 8%; }
.chero-ic--5 { top: 52%; right: 27%; }
.chero-ic--6 { bottom: 20%; right: 10%; }

/* Ambient particles */
.chero-particles { position: absolute; inset: 0; }
.chero-particle {
    position: absolute; bottom: -20px; border-radius: 50%; opacity: 0;
    background: radial-gradient(circle at 32% 30%, rgba(52,120,212,.5), rgba(115,214,255,0) 70%);
    filter: blur(1px);
}

/* Parallax layers ease back when the cursor leaves (JS sets --px/--py per hero) */
.chero [data-cx] { transition: transform .35s ease-out; will-change: transform; }

/* Quick Contact card: glassmorphism + interactive depth */
.chero .contact-quick-card {
    position: relative; overflow: hidden; transform-style: preserve-3d;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22), var(--shadow-panel);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.chero .contact-quick-card::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .85;
    background: linear-gradient(120deg, rgba(52,120,212,0) 30%, rgba(120,180,255,.12) 50%, rgba(237,28,36,0) 70%);
    background-size: 220% 100%; background-position: 0% 0;
}
.chero-glass__sheen {
    position: absolute; width: 60%; aspect-ratio: 1; left: var(--gx, 30%); top: var(--gy, 18%);
    transform: translate(-50%, -50%); border-radius: 50%; opacity: 0; pointer-events: none; z-index: 0;
    background: radial-gradient(circle, rgba(255,255,255,.20), transparent 60%);
    transition: opacity .3s ease;
}
.chero .contact-quick-card:hover .chero-glass__sheen { opacity: 1; }
.chero .contact-quick-card .section-title,
.chero .contact-quick-card .quick-contact { position: relative; z-index: 1; }

/* Futuristic quick-contact icon containers + light sweep + icon micro-moves */
.chero .contact-quick-card .icon-tile { position: relative; overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.chero .contact-quick-card .icon-tile .ico { transition: transform .25s var(--ease); }
.chero .contact-quick-card .icon-tile::before {
    content: ""; position: absolute; top: 0; bottom: 0; width: 42%; left: -60%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
    transform: skewX(-18deg); opacity: 0; pointer-events: none;
}

@keyframes cheroRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes cheroReveal { from { opacity: 0; transform: translateY(22px); clip-path: inset(100% 0 0 0); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }
@keyframes cheroCardIn { from { opacity: 0; transform: translateX(25px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes cheroLineGrow { from { width: 0; } to { width: 28px; } }
@keyframes cfloat { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(2deg); } }
@keyframes cfloatAlt { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(5px) rotate(-2deg); } }
@keyframes cbreathe { 0%, 100% { opacity: .38; } 50% { opacity: .68; } }
@keyframes cnetDraw { from { stroke-dashoffset: 300; } to { stroke-dashoffset: 0; } }
@keyframes cnetPulse { 0%, 100% { opacity: .25; } 50% { opacity: .8; } }
@keyframes cdotTravel { 0% { offset-distance: 0%; opacity: 0; } 10% { opacity: .9; } 90% { opacity: .9; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes cGlassShift { 0% { background-position: 0% 0; } 100% { background-position: 220% 0; } }
@keyframes cIconSweep { 0% { left: -60%; opacity: .8; } 100% { left: 120%; opacity: 0; } }
@keyframes cPhoneRing { 0%, 100% { transform: rotate(0) scale(1); } 30% { transform: rotate(-10deg) scale(1.1); } 60% { transform: rotate(8deg) scale(1.05); } }
@keyframes cPinBounce { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-4px); } }

@media (prefers-reduced-motion: no-preference) {
    /* --- Staggered entrance sequence (Background→label→heading→desc→panel→items) --- */
    .chero .eyebrow            { animation: cheroRise .6s var(--ease) .15s both; }
    .chero .eyebrow::before    { animation: cheroLineGrow .5s var(--ease) .15s both; }
    .chero .hero__title .l1    { animation: cheroReveal .7s var(--ease) .32s both; }
    .chero .hero__title .l3    { animation: cheroReveal .7s var(--ease) .46s both; }
    .chero .hero__desc         { animation: cheroRise .6s var(--ease) .64s both; }
    .chero .contact-quick-card { animation: cheroCardIn .8s var(--ease) .72s both; }
    .chero .quick-contact__row { animation: cheroRise .55s var(--ease) both; }
    .chero .quick-contact__row:nth-child(1) { animation-delay: .95s; }
    .chero .quick-contact__row:nth-child(2) { animation-delay: 1.05s; }
    .chero .quick-contact__row:nth-child(3) { animation-delay: 1.15s; }
    .chero .quick-contact__row:nth-child(4) { animation-delay: 1.25s; }
    /* Feature row + CTA come after the panel (override the global earlier delays) */
    .chero .support-feature:nth-child(1) { animation-delay: 1.30s; }
    .chero .support-feature:nth-child(2) { animation-delay: 1.42s; }
    .chero .support-feature:nth-child(3) { animation-delay: 1.54s; }
    .chero .contact-hero-cta .btn:nth-child(1) { animation-delay: 1.70s; }
    .chero .contact-hero-cta .btn:nth-child(2) { animation-delay: 1.82s; }

    /* --- Ambient decorative motion (very slow) --- */
    .chero-wave--blue { animation: cfloat 20s ease-in-out infinite; }
    .chero-wave--red { animation: cfloatAlt 24s ease-in-out infinite; }
    .chero-net .cnet-line { animation: cnetDraw 1.6s var(--ease) both; }
    .chero-net .cnet-line:nth-of-type(2) { animation-delay: .14s; }
    .chero-net .cnet-line:nth-of-type(3) { animation-delay: .28s; }
    .chero-net .cnet-line:nth-of-type(4) { animation-delay: .42s; }
    .chero-net .cnet-line:nth-of-type(5) { animation-delay: .56s; }
    .chero-net .cnet-line:nth-of-type(6) { animation-delay: .70s; }
    .chero-net .cnet-node--pulse { animation: cnetPulse 3.6s ease-in-out infinite; }
    .chero-net .cnet-node--pulse:nth-of-type(even) { animation-delay: 1.3s; }
    .chero-net .cnet-dot { animation: cdotTravel 5s ease-in-out 1.8s infinite; }
    .chero-hex--1 { animation: cfloat 18s ease-in-out infinite, cbreathe 9s ease-in-out infinite; }
    .chero-hex--2 { animation: cfloatAlt 22s ease-in-out infinite, cbreathe 11s ease-in-out 2s infinite; }
    .chero-leaf { animation: cfloat 16s ease-in-out infinite; }
    .chero-ic { animation: cfloat 15s ease-in-out infinite, cbreathe 10s ease-in-out infinite; }
    .chero-ic--2 { animation: cfloatAlt 17s ease-in-out infinite, cbreathe 12s ease-in-out 1.5s infinite; }
    .chero-ic--4 { animation: cfloatAlt 19s ease-in-out infinite, cbreathe 9s ease-in-out 3s infinite; }
    .chero-ic--6 { animation: cfloat 21s ease-in-out infinite, cbreathe 13s ease-in-out 2.5s infinite; }
    .chero-particle { animation: floatUp var(--dur, 16s) linear infinite; }
    .chero .contact-quick-card::after { animation: cGlassShift 14s ease-in-out infinite alternate; }

    /* Icon micro-interactions (hover) */
    .chero .quick-contact__row:hover .icon-tile::before { animation: cIconSweep .7s ease; }
    .chero .quick-contact__row:nth-child(1):hover .ico { animation: cPhoneRing .5s var(--ease); }
    .chero .quick-contact__row:nth-child(2):hover .icon-tile { box-shadow: 0 0 12px rgba(120,180,255,.45); }
    .chero .quick-contact__row:nth-child(3):hover .icon-tile { animation: cPinBounce .5s var(--ease); }
    .chero .quick-contact__row:nth-child(4):hover .icon-tile { box-shadow: 0 0 0 4px rgba(120,180,255,.18); }
}

@media (prefers-reduced-motion: reduce) {
    /* Kill all decorative + entrance motion; content stays fully visible/static. */
    .chero .chero-fx { display: none; }
    .chero .eyebrow, .chero .eyebrow::before, .chero .hero__title .l1, .chero .hero__title .l3,
    .chero .hero__desc, .chero .contact-quick-card, .chero .quick-contact__row { animation: none; }
}

/* Tablet: calmer decorative movement */
@media (max-width: 1024px) {
    .chero-net { opacity: .38; }
    .chero-ic--5, .chero-hex--2 { display: none; }
}
/* Mobile: drop heavy background FX, keep entrance + micro-interactions */
@media (max-width: 640px) {
    .chero .chero-net, .chero .chero-icons, .chero .chero-hex, .chero .chero-leaf, .chero .chero-particles { display: none; }
    .chero-wave { filter: blur(38px); opacity: .4; }
}

/* ============================================================================
   About hero — premium medical-tech motion (scoped to .about-hero).
   The right-side composition is a single background image; scene-level motion +
   an overlay FX layer add life without redrawing the artwork. Reduced-motion safe.
   ========================================================================= */
.about-hero > .ahero-fx { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }

/* Background image: soft fade-in + very slow ambient drift (world-map parallax feel) */
.about-hero > .hero-bg-layer { will-change: opacity, transform; }

/* Soft corner brand waves */
.ahero-wave { position: absolute; border-radius: 50%; filter: blur(48px); will-change: transform; }
.ahero-wave--blue { top: -18%; left: -12%; width: 42%; height: 66%; background: radial-gradient(circle, rgba(52,120,212,.26), transparent 68%); opacity: .5; }
.ahero-wave--red { bottom: -22%; right: -12%; width: 46%; height: 70%; background: radial-gradient(circle, rgba(237,28,36,.16), transparent 68%); opacity: .5; }

/* Breathing glow halo behind the hexagon region (right-centre) */
.ahero-halo {
    position: absolute; top: 46%; right: 7%; width: min(42%, 440px); aspect-ratio: 1;
    transform: translateY(-50%); border-radius: 50%; opacity: .5;
    background: radial-gradient(circle, rgba(120,180,255,.20), rgba(237,28,36,.05) 55%, transparent 72%);
}

/* Elliptical digital orbit + travelling light around the hexagon region */
.ahero-orbit { position: absolute; top: 46%; right: 5%; width: min(46%, 460px); aspect-ratio: 1; transform: translateY(-50%) scaleY(.62); }
.ahero-orbit::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(120,180,255,.18); }
.ahero-orbit__spin { position: absolute; inset: 0; }
.ahero-orbit__dot { position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #eaf4ff; box-shadow: 0 0 10px 2px rgba(120,180,255,.85); }

/* Medical network over the right region */
.ahero-net { position: absolute; top: 6%; right: 2%; width: min(42%, 430px); height: 82%; opacity: .5; }
.ahero-net .anet-line { stroke: var(--to-med-blue, #3478D4); stroke-width: 1.1; stroke-dasharray: 300; opacity: .38; }
.ahero-net .anet-node { fill: var(--to-med-blue, #3478D4); opacity: .5; }
.ahero-net .anet-node--red { fill: var(--to-red); opacity: .6; }
.ahero-net .anet-dot { fill: #fff; opacity: 0; filter: drop-shadow(0 0 4px rgba(120,180,255,.9)); offset-path: path('M40 60 L130 110 L80 210 L190 270'); }

/* Periodic premium glass light-sweep across the right region */
.ahero-sweep {
    position: absolute; top: -20%; right: 0; width: 55%; height: 140%;
    background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.22) 50%, transparent 58%);
    transform: translateX(60%) rotate(2deg); opacity: 0; pointer-events: none; mix-blend-mode: screen;
}

/* Ambient particles (right side) */
.ahero-particles { position: absolute; inset: 0; }
.ahero-particle {
    position: absolute; bottom: -18px; border-radius: 50%; opacity: 0;
    background: radial-gradient(circle at 32% 30%, rgba(52,120,212,.5), rgba(115,214,255,0) 70%);
    filter: blur(1px);
}

/* Parallax layers ease back when the cursor leaves (JS sets transforms) */
.about-hero [data-cx] { transition: transform .35s ease-out; will-change: transform; }

/* Feature icon tiles: glass surface + hover micro-interactions */
.about-hero .feature-row .icon-tile { position: relative; overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.about-hero .feature-row .icon-tile .ico { transition: transform .25s var(--ease); position: relative; z-index: 1; }
.about-hero .feature-row .icon-tile::before {
    content: ""; position: absolute; top: 0; bottom: 0; width: 42%; left: -60%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
    transform: skewX(-18deg); opacity: 0; pointer-events: none; z-index: 2;
}
.about-hero .feature:hover .icon-tile { transform: translateY(-2px) scale(1.04); box-shadow: 0 12px 26px rgba(23,42,104,.22); }

@keyframes aFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes aDrift { from { transform: translate3d(-3px, 0, 0); } to { transform: translate3d(3px, 1px, 0); } }
@keyframes aOrbit { to { transform: rotate(360deg); } }
@keyframes aHalo { 0%, 100% { opacity: .4; transform: translateY(-50%) scale(1); } 50% { opacity: .62; transform: translateY(-50%) scale(1.04); } }
@keyframes aSweep { 0% { opacity: 0; transform: translateX(60%) rotate(2deg); } 8% { opacity: .9; } 26% { opacity: .9; } 42%, 100% { opacity: 0; transform: translateX(-70%) rotate(2deg); } }
@keyframes aIconSweep { 0% { left: -60%; opacity: .8; } 100% { left: 120%; opacity: 0; } }
@keyframes aGlobeSpin { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(14deg); } }

@media (prefers-reduced-motion: no-preference) {
    /* Background image: fade in, then a slow ambient drift */
    .about-hero > .hero-bg-layer { animation: aFade 1s var(--ease) both, aDrift 20s ease-in-out 1.1s infinite alternate; }

    /* Staggered content entrance */
    .about-hero .breadcrumb        { animation: cheroRise .6s var(--ease) .2s both; }
    .about-hero .hero__title .l1   { animation: cheroReveal .7s var(--ease) .34s both; }
    .about-hero .hero__title .l2   { animation: cheroReveal .7s var(--ease) .48s both; }
    .about-hero .grad-underline    { animation: cheroLineGrow2 .6s var(--ease) .68s both; }
    .about-hero .lead              { animation: cheroRise .6s var(--ease) both; }
    .about-hero .lead:nth-of-type(1) { animation-delay: .8s; }
    .about-hero .lead:nth-of-type(2) { animation-delay: .92s; }
    .about-hero .feature           { animation: cheroRise .6s var(--ease) both; }
    .about-hero .feature:nth-child(1) { animation-delay: 1.05s; }
    .about-hero .feature:nth-child(2) { animation-delay: 1.17s; }
    .about-hero .feature:nth-child(3) { animation-delay: 1.29s; }
    .about-hero .feature:nth-child(4) { animation-delay: 1.41s; }

    /* Overlay ambient motion */
    .ahero-wave--blue { animation: cfloat 20s ease-in-out infinite; }
    .ahero-wave--red { animation: cfloatAlt 24s ease-in-out infinite; }
    .about-hero .ahero-halo { animation: aHalo 6.5s ease-in-out infinite; }
    .about-hero .ahero-orbit__spin { animation: aOrbit 11s linear infinite; }
    .ahero-net .anet-line { animation: cnetDraw 1.6s var(--ease) both; }
    .ahero-net .anet-line:nth-of-type(2) { animation-delay: .14s; }
    .ahero-net .anet-line:nth-of-type(3) { animation-delay: .28s; }
    .ahero-net .anet-line:nth-of-type(4) { animation-delay: .42s; }
    .ahero-net .anet-line:nth-of-type(5) { animation-delay: .56s; }
    .ahero-net .anet-node--pulse { animation: cnetPulse 3.6s ease-in-out infinite; }
    .ahero-net .anet-node--pulse:nth-of-type(even) { animation-delay: 1.5s; }
    .ahero-net .anet-node--pulse:nth-of-type(3n) { animation-delay: 2.7s; }
    .ahero-net .anet-dot { animation: cdotTravel 5.5s ease-in-out 2s infinite; }
    .ahero-particle { animation: floatUp var(--dur, 16s) linear infinite; }
    .about-hero .ahero-sweep { animation: aSweep 10s ease-in-out 3s infinite; }

    /* Feature hover light-sweep + per-item micro accents */
    .about-hero .feature:hover .icon-tile::before { animation: aIconSweep .7s ease; }
    .about-hero .feature:nth-child(1):hover .icon-tile { box-shadow: 0 12px 26px rgba(23,42,104,.22), 0 0 0 4px rgba(52,120,212,.16); }
    .about-hero .feature:nth-child(2):hover .icon-tile .ico { animation: aGlobeSpin .7s var(--ease); }
    .about-hero .feature:nth-child(3):hover .icon-tile { box-shadow: 0 12px 26px rgba(23,42,104,.22), 0 0 0 5px rgba(52,120,212,.12); }
    .about-hero .feature:nth-child(4):hover .icon-tile { box-shadow: 0 12px 26px rgba(23,42,104,.22), 0 0 14px rgba(237,28,36,.4); }
}
@keyframes cheroLineGrow2 { from { width: 0; } to { width: 90px; } }

@media (prefers-reduced-motion: reduce) {
    .about-hero .ahero-fx { display: none; }
    .about-hero > .hero-bg-layer,
    .about-hero .breadcrumb, .about-hero .hero__title .l1, .about-hero .hero__title .l2,
    .about-hero .grad-underline, .about-hero .lead, .about-hero .feature { animation: none; }
}

/* Tablet: calmer decorative motion */
@media (max-width: 1024px) {
    .about-hero .ahero-net { opacity: .34; }
    .about-hero .ahero-particle:nth-child(n+7) { display: none; }
}
/* Mobile: drop heavy background FX, keep entrance + micro-interactions */
@media (max-width: 640px) {
    .about-hero .ahero-net, .about-hero .ahero-orbit, .about-hero .ahero-particles, .about-hero .ahero-sweep { display: none; }
    .about-hero .ahero-wave, .about-hero .ahero-halo { opacity: .35; }
}

/* ---- Products hero trust indicators ------------------------------------ */
.trust-row { list-style: none; margin: 1.75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: clamp(1rem, 2.4vw, 2rem); }
.trust-item { display: flex; align-items: center; gap: .65rem; }
.trust-item__ic { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--to-blue, #243C91); background: rgba(52,120,212,.10); border: 1px solid rgba(52,120,212,.20); box-shadow: inset 0 0 12px rgba(36,60,145,.06); }
.trust-item__ic .ico { width: 20px; height: 20px; }
.trust-item__ic--red { color: var(--to-red, #E60024); background: rgba(237,28,36,.09); border-color: rgba(237,28,36,.20); box-shadow: inset 0 0 12px rgba(237,28,36,.06); }
.trust-item__t { display: block; font-weight: 700; color: var(--to-navy, #172766); font-size: .92rem; line-height: 1.15; }
.trust-item__s { display: block; color: var(--to-text-soft, #5A6C81); font-size: .8rem; line-height: 1.2; }

/* ---- Products horizontal category navigation --------------------------- */
.cat-nav {
    display: flex; align-items: stretch; gap: 0; margin-bottom: 1.5rem;
    background: var(--surface-glass-strong, #fff); border: 1px solid var(--to-border, #DDE3EC);
    border-radius: var(--radius-lg, 18px); box-shadow: var(--shadow-soft); padding: .4rem;
    overflow-x: auto; scrollbar-width: thin;
}
.cat-nav__item {
    flex: 1 0 auto; min-width: 96px; display: flex; flex-direction: column; align-items: center; gap: .45rem;
    padding: .85rem .9rem; text-decoration: none; text-align: center; position: relative;
    border-radius: 12px; transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.cat-nav__item + .cat-nav__item::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px; background: var(--to-border, #DDE3EC); }
.cat-nav__ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; color: var(--to-blue, #243C91); background: rgba(52,120,212,.09); transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.cat-nav__ic .ico { width: 22px; height: 22px; }
.cat-nav__item:nth-child(even) .cat-nav__ic { color: var(--to-red, #E60024); background: rgba(237,28,36,.08); }
.cat-nav__label { font-weight: 700; font-size: .82rem; color: var(--to-navy, #172766); white-space: nowrap; }
.cat-nav__item:hover { background: var(--to-bg-blue-soft, #EEF3F7); }
.cat-nav__item:hover .cat-nav__ic { transform: translateY(-2px); }
.cat-nav__item.is-active { background: var(--to-bg-blue-light, #E7EFF7); }
.cat-nav__item.is-active .cat-nav__label { color: var(--to-red, #E60024); }
.cat-nav__item.is-active::after { content: ""; position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%); width: 40%; height: 3px; border-radius: 3px; background: var(--to-gradient-blue); }
@media (prefers-reduced-motion: reduce) { .cat-nav__item:hover .cat-nav__ic { transform: none; } }
@media (max-width: 640px) {
    .cat-nav { border-radius: 14px; scroll-snap-type: x proximity; }
    .cat-nav__item { min-width: 84px; scroll-snap-align: start; }
}

/* ============================================================================
   Products hero — premium medical-showroom motion (scoped to .fx-hero).
   Overlay FX + showcase treatment layered onto the existing hero; the composite
   background image stays an image. Reduced-motion / responsive aware.
   ========================================================================= */
.fx-hero > .phero-fx { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.fx-hero > .hero-bg-layer { will-change: opacity; }

.phero-wave { position: absolute; border-radius: 50%; filter: blur(48px); will-change: transform; }
.phero-wave--blue { top: -18%; left: -12%; width: 42%; height: 66%; background: radial-gradient(circle, rgba(52,120,212,.24), transparent 68%); opacity: .5; }
.phero-wave--red { bottom: -22%; right: -12%; width: 46%; height: 70%; background: radial-gradient(circle, rgba(237,28,36,.15), transparent 68%); opacity: .5; }
.phero-halo { position: absolute; top: 48%; right: 8%; width: min(40%, 420px); aspect-ratio: 1; transform: translateY(-50%); border-radius: 50%; opacity: .5; background: radial-gradient(circle, rgba(120,180,255,.20), rgba(237,28,36,.05) 55%, transparent 72%); }
.phero-orbit { position: absolute; top: 48%; right: 6%; width: min(44%, 440px); aspect-ratio: 1; transform: translateY(-50%) scaleY(.6); }
.phero-orbit::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(120,180,255,.16); }
.phero-orbit__spin { position: absolute; inset: 0; }
.phero-orbit__dot { position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #eaf4ff; box-shadow: 0 0 10px 2px rgba(120,180,255,.85); }
.phero-net { position: absolute; top: 6%; right: 3%; width: min(40%, 420px); height: 82%; opacity: .5; }
.phero-net .pnet-line { stroke: var(--to-med-blue, #3478D4); stroke-width: 1.1; stroke-dasharray: 300; opacity: .36; }
.phero-net .pnet-node { fill: var(--to-med-blue, #3478D4); opacity: .5; }
.phero-net .pnet-node--red { fill: var(--to-red); opacity: .6; }
.phero-net .pnet-dot { fill: #fff; opacity: 0; filter: drop-shadow(0 0 4px rgba(120,180,255,.9)); offset-path: path('M40 60 L130 110 L80 210 L190 270'); }
.phero-particles { position: absolute; inset: 0; }
.phero-particle { position: absolute; bottom: -18px; border-radius: 50%; opacity: 0; background: radial-gradient(circle at 32% 30%, rgba(52,120,212,.5), rgba(115,214,255,0) 70%); filter: blur(1px); }
.fx-hero [data-cx] { transition: transform .35s ease-out; will-change: transform; }

/* Showcase container: glass + focus corners + one-time medical scan + float */
.fx-hero .hero__image { position: relative; overflow: hidden; }
/* Released after the entrance animation so JS cursor-tilt (inline transform) can take effect. */
.fx-hero .hero__image.is-ready { animation: none; }
.fx-hero .hsfx { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hsfx-corner { position: absolute; width: 22px; height: 22px; border: 2px solid var(--to-blue, #243C91); opacity: 0; }
.hsfx-corner--tl { top: 12px; left: 12px; border-right: 0; border-bottom: 0; border-top-left-radius: 4px; }
.hsfx-corner--tr { top: 12px; right: 12px; border-left: 0; border-bottom: 0; border-top-right-radius: 4px; }
.hsfx-corner--br { bottom: 12px; right: 12px; border-left: 0; border-top: 0; border-bottom-right-radius: 4px; }
.hsfx-corner--bl { bottom: 12px; left: 12px; border-right: 0; border-top: 0; border-bottom-left-radius: 4px; }
.hsfx-center { position: absolute; top: 50%; left: 50%; width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 50%; border: 1.5px solid rgba(52,120,212,.55); opacity: 0; }
.hsfx-scan { position: absolute; left: 5%; right: 5%; top: 0; height: 22%; opacity: 0; background: linear-gradient(180deg, transparent, rgba(120,180,255,.26) 44%, rgba(255,255,255,.5) 50%, rgba(120,180,255,.26) 56%, transparent); }

@keyframes pFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pShowcaseIn { from { opacity: 0; transform: translateY(20px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes pScan { 0% { top: -22%; opacity: 0; } 12% { opacity: .9; } 88% { opacity: .9; } 100% { top: 100%; opacity: 0; } }
@keyframes pCornerIn { from { opacity: 0; } to { opacity: .7; } }
@keyframes pCenterPulse { 0% { opacity: 0; transform: scale(.6); } 40% { opacity: .8; } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes pSweep { 0% { opacity: 0; transform: translateX(-60%) translateY(-30%) rotate(18deg); } 10% { opacity: .8; } 30% { opacity: .8; } 46%, 100% { opacity: 0; transform: translateX(120%) translateY(30%) rotate(18deg); } }
@keyframes pReveal { from { opacity: 0; transform: translateY(20px); clip-path: inset(100% 0 0 0); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }
@keyframes pLine { from { width: 0; } to { width: 90px; } }
@keyframes pSheenText { 0% { transform: translateX(-115%) skewX(-18deg); } 60% { transform: translateX(230%) skewX(-18deg); } 100% { transform: translateX(230%) skewX(-18deg); } }

@media (prefers-reduced-motion: no-preference) {
    /* Entrance sequence: breadcrumb -> eyebrow -> headline -> divider -> desc -> CTA -> features.
       (The background layer is NOT opacity-animated — it fades in with the panel's reveal — so it
       keeps its configured opacity instead of being forced to 1.) */
    .fx-hero .breadcrumb    { animation: cheroRise .55s var(--ease) .2s both; }
    .fx-hero .eyebrow       { animation: cheroRise .55s var(--ease) .34s both; }
    .fx-hero .eyebrow::before { animation: cheroLineGrow .5s var(--ease) .34s both; }
    .fx-hero .hero__title .l1 { animation: pReveal .7s var(--ease) .5s both; }
    .fx-hero .hero__title .l2, .fx-hero .hero__title .l3 { animation: pReveal .7s var(--ease) .64s both; position: relative; overflow: hidden; }
    .fx-hero .hero__title .l2::after, .fx-hero .hero__title .l3::after {
        content: ""; position: absolute; inset: 0; pointer-events: none;
        background: linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent);
        transform: translateX(-115%) skewX(-18deg); animation: pSheenText 2.6s var(--ease) 1.5s 1;
    }
    .fx-hero .grad-underline { animation: pLine .6s var(--ease) .86s both; }
    .fx-hero .lead, .fx-hero .detail-hero .prose { animation: cheroRise .6s var(--ease) 1s both; }
    .fx-hero .hero__cta .btn { animation: cheroRise .55s var(--ease) both; }
    .fx-hero .hero__cta .btn:nth-child(1) { animation-delay: 1.15s; }
    .fx-hero .hero__cta .btn:nth-child(2) { animation-delay: 1.27s; }
    .fx-hero .trust-item    { animation: cheroRise .55s var(--ease) both; }
    .fx-hero .trust-item:nth-child(1) { animation-delay: 1.4s; }
    .fx-hero .trust-item:nth-child(2) { animation-delay: 1.5s; }
    .fx-hero .trust-item:nth-child(3) { animation-delay: 1.6s; }
    .fx-hero .trust-item:nth-child(4) { animation-delay: 1.7s; }

    /* Showcase */
    .fx-hero .hero__image { animation: pShowcaseIn .9s var(--ease) .8s both; }
    .fx-hero .hero__media { animation: cfloat 7s ease-in-out 2.2s infinite; }
    .fx-hero .hsfx-corner--tl { animation: pCornerIn .4s var(--ease) 1.3s both; }
    .fx-hero .hsfx-corner--tr { animation: pCornerIn .4s var(--ease) 1.42s both; }
    .fx-hero .hsfx-corner--br { animation: pCornerIn .4s var(--ease) 1.54s both; }
    .fx-hero .hsfx-corner--bl { animation: pCornerIn .4s var(--ease) 1.66s both; }
    .fx-hero .hsfx-center { animation: pCenterPulse 1.1s var(--ease) 1.85s 1; }
    .fx-hero .hsfx-scan { animation: pScan 1.6s var(--ease) 1.7s 1; }
    .fx-hero .hero__image::after {
        content: ""; position: absolute; top: -30%; left: 0; width: 45%; height: 160%; z-index: 3; pointer-events: none;
        background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent); mix-blend-mode: screen;
        animation: pSweep 10s ease-in-out 4s infinite;
    }

    /* Overlay ambient motion */
    .phero-wave--blue { animation: cfloat 20s ease-in-out infinite; }
    .phero-wave--red { animation: cfloatAlt 24s ease-in-out infinite; }
    .fx-hero .phero-halo { animation: aHalo 6.5s ease-in-out infinite; }
    .fx-hero .phero-orbit__spin { animation: aOrbit 11s linear infinite; }
    .phero-net .pnet-line { animation: cnetDraw 1.6s var(--ease) both; }
    .phero-net .pnet-line:nth-of-type(2) { animation-delay: .14s; }
    .phero-net .pnet-line:nth-of-type(3) { animation-delay: .28s; }
    .phero-net .pnet-line:nth-of-type(4) { animation-delay: .42s; }
    .phero-net .pnet-line:nth-of-type(5) { animation-delay: .56s; }
    .phero-net .pnet-node--pulse { animation: cnetPulse 3.6s ease-in-out infinite; }
    .phero-net .pnet-node--pulse:nth-of-type(even) { animation-delay: 1.5s; }
    .phero-net .pnet-dot { animation: cdotTravel 5.5s ease-in-out 2s infinite; }
    .phero-particle { animation: floatUp var(--dur, 16s) linear infinite; }

    /* Feature (trust) hover micro-interactions */
    .fx-hero .trust-item__ic { transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
    .fx-hero .trust-item:hover .trust-item__ic { transform: translateY(-2px) scale(1.04); box-shadow: 0 8px 18px rgba(23,42,104,.18); }
    .fx-hero .trust-item:nth-child(1):hover .trust-item__ic { box-shadow: 0 8px 18px rgba(23,42,104,.18), 0 0 0 4px rgba(52,120,212,.16); }
    .fx-hero .trust-item:nth-child(4):hover .trust-item__ic { box-shadow: 0 8px 18px rgba(23,42,104,.18), 0 0 12px rgba(237,28,36,.35); }
    /* Primary CTA arrow nudge (base .btn-primary hover already lifts + shifts gradient) */
    .fx-hero .hero__cta .btn-primary .ico { transition: transform .25s var(--ease); }
    .fx-hero .hero__cta .btn-primary:hover .ico { transform: translateX(4px) scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
    .fx-hero .phero-fx { display: none; }
    .fx-hero .hsfx { display: none; }
    .fx-hero > .hero-bg-layer, .fx-hero .breadcrumb, .fx-hero .eyebrow, .fx-hero .eyebrow::before,
    .fx-hero .hero__title .l1, .fx-hero .hero__title .l2, .fx-hero .hero__title .l3, .fx-hero .grad-underline, .fx-hero .lead,
    .fx-hero .hero__cta .btn, .fx-hero .trust-item, .fx-hero .hero__image, .fx-hero .hero__media { animation: none; }
    .fx-hero .hero__image::after, .fx-hero .hero__title .l2::after, .fx-hero .hero__title .l3::after { display: none; }
}

@media (max-width: 1024px) { .fx-hero .phero-net { opacity: .34; } .fx-hero .phero-particle:nth-child(n+7) { display: none; } }
@media (max-width: 640px) {
    .fx-hero .phero-net, .fx-hero .phero-orbit, .fx-hero .phero-particles { display: none; }
    .fx-hero .phero-wave, .fx-hero .phero-halo { opacity: .35; }
    .fx-hero .hero__image::after { display: none; }
}

/* ---- Product detail hero: reuse the .fx-hero animation on the .detail-hero layout */
/* Plain panel (no hero-bg-host) — make the FX overlay sit behind, content above. */
.fx-hero:not(.hero-bg-host) { position: relative; }
.fx-hero:not(.hero-bg-host) > *:not(.phero-fx) { position: relative; z-index: 1; }
/* The showcase = .detail-media (float) + .media-scene (entrance); corners/scan/center
   already animate via the shared .fx-hero .hsfx-* rules. */
.fx-hero .detail-media .media-scene.is-ready { animation: none; }
@media (prefers-reduced-motion: no-preference) {
    .fx-hero .detail-media { animation: cfloat 7s ease-in-out 2.2s infinite; }
    .fx-hero .detail-media .media-scene { animation: pShowcaseIn .9s var(--ease) .7s both; }
}
@media (prefers-reduced-motion: reduce) {
    .fx-hero .detail-media, .fx-hero .detail-media .media-scene { animation: none; }
}

/* ---- Under Construction (per-page) ------------------------------------- */
.under-construction {
    position: relative; isolation: isolate; overflow: hidden;
    margin-top: 1.75rem; border-radius: var(--radius-lg);
    min-height: clamp(460px, 68vh, 760px); display: grid; place-items: center;
    padding: clamp(2rem, 5vw, 4.5rem);
    border: 1px solid var(--border-glass); box-shadow: var(--shadow-panel);
    background:
        radial-gradient(circle at 15% 20%, rgba(75, 43, 131, .08), transparent 35%),
        radial-gradient(circle at 85% 70%, rgba(237, 28, 36, .07), transparent 35%),
        var(--to-bg-soft, #F7F8FA);
}
/* Large, subtle brand watermark behind everything (never affects readability). */
.under-construction__watermark {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: clamp(320px, 45vw, 850px); height: auto; object-fit: contain;
    opacity: .035; z-index: 0; pointer-events: none; user-select: none;
}
.under-construction__panel {
    position: relative; z-index: 1; max-width: 62ch; text-align: center;
    padding: clamp(1.75rem, 4vw, 3rem);
    background: var(--surface-glass-strong); border: 1px solid var(--border-glass);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
    backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
    animation: uc-rise .6s var(--ease) both;
}
.under-construction__panel .eyebrow { display: block; margin-bottom: .9rem; }
.under-construction__title { font-size: var(--fs-hero); font-weight: 800; letter-spacing: -.02em; line-height: 1.08; color: var(--to-text); }
.under-construction__desc { margin: 1.1rem auto 0; max-width: 52ch; color: var(--text-secondary); }
.under-construction__eta {
    display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.25rem;
    padding: .4rem .9rem; border-radius: var(--radius-pill); font-size: .82rem; font-weight: 700;
    color: var(--to-blue); background: var(--to-bg-blue-soft, #EEF3F7); border: 1px solid var(--border-glass);
}
.under-construction__eta .uc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--to-red); box-shadow: 0 0 10px rgba(237, 28, 36, .5); }
.under-construction__cta { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; margin-top: 1.9rem; }
@keyframes uc-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .under-construction__panel { animation: none; } }

/* ---- Hero --------------------------------------------------------------- */
/* No extra top margin — every hero uses the same standard nav→hero gap (the
   first section's padding), so Home/Solutions/Contact match Products/About. */
.hero { margin-top: 0; }
.hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
/* Let hero grid items shrink to their track — stops wide content (eyebrow, headline)
   from forcing a column wider than the panel and overflowing on narrow screens. */
.hero__grid > *, .detail-hero > * { min-width: 0; }
/* Full-width text-only hero (no right-side visual) — used on the Home page. */
.hero__grid--solo { grid-template-columns: 1fr; }
.hero__grid--solo .hero__desc { max-width: 60ch; }
.hero__title { font-size: var(--fs-hero); font-weight: 800; letter-spacing: -.02em; margin-bottom: 1.5rem; }
.hero__title .l1 { color: var(--to-text); display: block; }
.hero__title .l2 { color: var(--to-red); display: block; }
.hero__title .l3 { color: var(--to-navy); display: block; }
.hero__desc { max-width: 46ch; margin-bottom: 2rem; }
.hero__cta { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2.25rem; }
.hero__media { position: relative; }
.hero__image {
    border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-glass);
    box-shadow: var(--shadow-panel); aspect-ratio: 4 / 3; width: 100%;
}
.hero__image .media-fill { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Admin-managed gallery grid rendered at the foot of a page's content. */
.page-gallery { padding-top: 0; }
.page-gallery__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: clamp(.75rem, 1.6vw, 1.25rem); }
.page-gallery__item { margin: 0; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-glass); box-shadow: var(--shadow-card); background: var(--to-bg-soft); aspect-ratio: 4 / 3; position: relative; }
.page-gallery__item .media-fill { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-gallery__item figcaption { position: absolute; inset-inline: 0; bottom: 0; padding: .5rem .7rem; font-size: .8rem; color: #fff; background: linear-gradient(transparent, rgba(23, 42, 104, .72)); }

/* Floating benefit panel on hero images — matches the Home nav bar's glass theme:
   the exact same purple→red gradient, white-alpha border, blur and panel shadow. */
.float-panel {
    position: absolute; top: 50%; right: -1rem; transform: translateY(-50%);
    width: min(54%, 310px); padding: 1rem 1.05rem; border-radius: var(--radius-lg);
    background: var(--to-gradient-footer); border: 1px solid rgba(255, 255, 255, .18);
    backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
    box-shadow: var(--shadow-panel); display: flex; flex-direction: column; gap: .7rem;
    transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-med) var(--ease);
}
/* Hover/active echo the nav's premium glass feel (brighter edge + lift in the shadow). */
.float-panel:hover { border-color: rgba(255, 255, 255, .34); box-shadow: 0 26px 60px rgba(23, 42, 104, .22); }
/* Admin-only preview banner shown on non-Published pages (explains what visitors actually see). */
.admin-page-banner { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; padding: .6rem clamp(1rem, 4vw, 2.5rem); background: linear-gradient(90deg, #7A3E00, #B45309); color: #fff; font-size: .88rem; box-shadow: 0 2px 10px rgba(0, 0, 0, .18); }
.admin-page-banner strong { font-weight: 800; }
.admin-page-banner__dot { width: .6rem; height: .6rem; border-radius: 50%; background: #FCD34D; box-shadow: 0 0 0 4px rgba(252, 211, 77, .25); flex: none; }
.admin-page-banner__cta { margin-left: auto; color: #fff; font-weight: 700; text-decoration: underline; white-space: nowrap; }
.admin-page-banner__cta + .admin-page-banner__cta { margin-left: .25rem; }
.float-item { display: flex; gap: .7rem; align-items: flex-start; }
/* A floating item with an admin-set link — clickable, with a subtle hover affordance. */
.float-item--link { text-decoration: none; border-radius: var(--radius-md); padding: .35rem; margin: -.35rem; transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.float-item--link:hover { background: rgba(255, 255, 255, .12); transform: translateX(2px); }
.float-item__title { color: #fff; font-weight: 700; font-size: .9rem; text-shadow: 0 1px 3px rgba(0, 0, 0, .22); }
.float-item__desc { font-size: .78rem; color: rgba(255, 255, 255, .86); line-height: 1.35; text-shadow: 0 1px 3px rgba(0, 0, 0, .20); }
/* Icon tiles inside the gradient panel → frosted white glass so they stay legible. */
.float-panel .icon-tile,
.float-panel .icon-tile--coral {
    color: #fff; background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .30);
    box-shadow: inset 0 0 14px rgba(255, 255, 255, .12);
    transition: background var(--t-fast) var(--ease);
    width: 38px; height: 38px; flex: 0 0 38px;
}
.float-panel .icon-tile .ico { width: 18px; height: 18px; }
.float-panel .icon-tile:hover { background: rgba(255, 255, 255, .26); }

/* Contact "Quick Contact" card — same nav-bar glass theme, scoped to this one card only. */
.contact-quick-card {
    background: var(--to-gradient-footer); border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: var(--shadow-panel);
    transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-med) var(--ease);
}
.contact-quick-card:hover { border-color: rgba(255, 255, 255, .34); box-shadow: 0 26px 60px rgba(23, 42, 104, .22); }
.contact-quick-card .section-title { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .22); }
.contact-quick-card .quick-contact__label { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .22); }
.contact-quick-card .quick-contact__sub { color: rgba(255, 255, 255, .86); text-shadow: 0 1px 3px rgba(0, 0, 0, .20); }
.contact-quick-card .icon-tile,
.contact-quick-card .icon-tile--coral {
    color: #fff; background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .30);
    box-shadow: inset 0 0 14px rgba(255, 255, 255, .12);
}

/* ---- Contact hero: support feature row + CTA ---------------------------- */
.hero__support-row {
    position: relative; z-index: 1;
    margin-top: clamp(1.5rem, 3vw, 2.25rem);
    padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
    border-top: 1px solid rgba(23, 39, 102, .12);
}
.support-features {
    list-style: none; margin: 0 0 clamp(28px, 3.4vw, 36px); padding: 0;
    display: flex; align-items: center; flex-wrap: wrap;
    gap: clamp(.85rem, 1.6vw, 1.5rem);
}
.support-feature {
    display: flex; align-items: center; gap: .7rem; min-width: 0;
    padding-inline-end: clamp(.85rem, 1.6vw, 1.5rem);
    border-inline-end: 1px solid rgba(23, 39, 102, .16);
}
.support-feature:last-child { border-inline-end: 0; padding-inline-end: 0; }
.support-feature__ic {
    flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
    display: grid; place-items: center; color: var(--to-navy, #172766);
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(52, 120, 212, .30);
    box-shadow: 0 6px 16px rgba(23, 42, 104, .12);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.support-feature__ic .ico { width: 22px; height: 22px; transition: transform .25s var(--ease); }
.support-feature:hover .support-feature__ic {
    transform: translateY(-2px); border-color: rgba(23, 39, 102, .45);
    box-shadow: 0 10px 22px rgba(23, 42, 104, .20), 0 0 0 4px rgba(230, 0, 36, .06);
}
.support-feature:hover .support-feature__ic .ico { transform: scale(1.05); }
.support-feature__body { min-width: 0; }
.support-feature__title {
    display: block; font-weight: 700; color: var(--to-navy, #172766);
    font-size: clamp(.94rem, 1vw, 1.06rem); line-height: 1.2;
}
.support-feature__desc {
    margin: .15rem 0 0; color: var(--to-text-soft, #5A6C81);
    font-size: clamp(.8rem, .9vw, .875rem); line-height: 1.35; max-width: 22ch;
}
.contact-hero-cta { margin-bottom: 2.25rem; }
/* Send Us a Message — red arrow inside the white puck */
.btn-primary--redarrow .ico { color: var(--to-red, #E60024); transition: transform .25s var(--ease); }
.contact-hero-cta .btn-primary:hover .ico { transform: translateX(4px) scale(1.04); }
/* Call Us Now — outlined pill, same height, subtle hover (no full navy fill) */
.btn-call { min-height: 56px; }
.btn-call:hover {
    background: var(--to-bg-blue-light, #E7EFF7); color: var(--to-navy, #172766);
    border-color: var(--to-navy, #172766); box-shadow: 0 8px 20px rgba(23, 42, 104, .14);
}
.btn-call:hover .ico { animation: callPulse .5s var(--ease); }
@keyframes callPulse {
    0%, 100% { transform: rotate(0) scale(1); }
    30% { transform: rotate(-8deg) scale(1.12); }
    60% { transform: rotate(6deg) scale(1.06); }
}
/* Sequential entrance (fade + rise + blur→sharp), reduced-motion safe */
@media (prefers-reduced-motion: no-preference) {
    .support-feature { animation: heroRiseBlur .55s var(--ease) both; }
    .support-feature:nth-child(1) { animation-delay: .30s; }
    .support-feature:nth-child(2) { animation-delay: .40s; }
    .support-feature:nth-child(3) { animation-delay: .50s; }
    .contact-hero-cta .btn { animation: heroRiseBlur .55s var(--ease) both; }
    .contact-hero-cta .btn:nth-child(1) { animation-delay: .65s; }
    .contact-hero-cta .btn:nth-child(2) { animation-delay: .77s; }
}
@keyframes heroRiseBlur {
    from { opacity: 0; transform: translateY(12px); filter: blur(6px); }
    to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}
/* Tablet */
@media (max-width: 1024px) {
    .support-features { gap: clamp(.55rem, 1.2vw, 1rem); }
    .support-feature { padding-inline-end: clamp(.55rem, 1.2vw, 1rem); }
    .support-feature__desc { max-width: 18ch; }
}
/* Mobile: stack features (subtle horizontal rules), full-width CTAs */
@media (max-width: 640px) {
    .support-features { flex-direction: column; align-items: stretch; gap: 0; }
    .support-feature {
        border-inline-end: 0; padding-inline-end: 0;
        padding-block: .7rem; border-bottom: 1px solid rgba(23, 39, 102, .12);
    }
    .support-feature:last-child { border-bottom: 0; }
    .support-feature__desc { max-width: none; }
    .contact-hero-cta { flex-direction: column; align-items: stretch; }
    .contact-hero-cta .btn { width: 100%; }
}

/* ---- Icon tiles --------------------------------------------------------- */
.icon-tile {
    flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px;
    display: grid; place-items: center; color: var(--to-blue);
    background: linear-gradient(160deg, rgba(36,60,145,.12), rgba(75,43,131,.06));
    border: 1px solid rgba(36,60,145,.16); box-shadow: inset 0 0 14px rgba(36,60,145,.08);
}
.icon-tile .ico { width: 22px; height: 22px; }
.icon-tile--coral { color: var(--to-red); background: linear-gradient(160deg, rgba(237,28,36,.14), rgba(242,56,66,.06)); border-color: rgba(237,28,36,.22); box-shadow: inset 0 0 14px rgba(237,28,36,.10); }
.icon-tile--lg { width: 54px; height: 54px; border-radius: 14px; color: #fff; background: var(--to-gradient-blue); border-color: transparent; box-shadow: 0 8px 20px rgba(23, 42, 104, .22); }
.icon-tile--lg.icon-tile--coral { background: var(--to-gradient-primary); box-shadow: 0 8px 20px rgba(237, 28, 36, .20); }
.icon-tile--lg .ico { width: 26px; height: 26px; }
/* Hero feature icons (e.g. About hero) carry the brand theme color */
.hero__grid .feature-row .icon-tile { color: #fff; background: var(--to-gradient-blue); border-color: transparent; box-shadow: 0 8px 20px rgba(23, 42, 104, .22); }
.hero__grid .feature-row .feature:nth-child(even) .icon-tile,
.hero__grid .feature-row .icon-tile--coral { background: var(--to-gradient-primary); box-shadow: 0 8px 20px rgba(237, 28, 36, .20); }

/* ---- Stats -------------------------------------------------------------- */
.stats {
    display: grid; grid-template-columns: repeat(4, 1fr);
    background: var(--surface-glass-light); border: 1px solid var(--border-glass);
    border-radius: var(--radius-lg); overflow: hidden;
}
.stat { display: flex; align-items: center; gap: .8rem; padding: 1.1rem 1.25rem; border-inline-start: 1px solid var(--border-glass); }
.stat:first-child { border-inline-start: none; }
.stat__ic { display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%; color: #fff; box-shadow: 0 6px 16px rgba(23,39,102,.18); }
.stat__ic .ico { width: 22px; height: 22px; }
.stat__ic--red { background: var(--to-red); }
.stat__ic--navy { background: var(--to-navy); }
.stat__body { min-width: 0; }
.stat__value { font-family: var(--font-display); font-size: clamp(1.45rem, 2.3vw, 2rem); font-weight: 800; color: var(--to-navy); line-height: 1.05; }
.stat__value .suf { color: var(--to-red); }
.stat__label { font-size: .82rem; color: var(--text-secondary); }

/* Big stats band (services) */
.statband { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.5rem; }
.statband .stat-cell { display: flex; align-items: center; gap: .9rem; }
.statband .stat-cell .num { font-family: var(--font-display); font-size: clamp(1.4rem,2.3vw,1.9rem); font-weight: 800; color: var(--text-primary); }
.statband .stat-cell .num .suf { color: var(--primary-cyan); }
.statband .stat-cell .lbl { color: var(--text-primary); font-weight: 700; font-size: .95rem; }
.statband .stat-cell .cap { color: var(--text-secondary); font-size: .78rem; }

/* ---- Section head with action ------------------------------------------ */
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 2.25rem; flex-wrap: wrap; }

/* ---- Card grids (auto-fit → reflow across every screen size) ------------ */
.grid { display: grid; gap: 1.25rem; }
.grid--6 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.grid--5 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }

/* Branded card — white glass, soft blue-grey border, navy titles, enterprise shadow. */
.card {
    background: var(--surface-glass); border: 1px solid var(--to-border); border-radius: 22px;
    padding: 1.35rem; box-shadow: var(--to-shadow-soft);
    transition: transform var(--t-med) var(--ease), border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
    display: flex; flex-direction: column; gap: .55rem; height: 100%;
    backdrop-filter: blur(6px);
}
.card:hover { transform: translateY(-4px); border-color: rgba(36,60,145,.35); box-shadow: 0 22px 46px rgba(23,42,104,.16), 0 0 0 1px rgba(36,60,145,.22); }
/* Optional branded variants (available as modifiers) */
.card--feature { background: var(--to-bg-blue-light); border-color: rgba(36,60,145,.14); }
.card--soft { background: var(--to-bg-soft); }
.card--info { background: rgba(255,255,255,.70); border-color: rgba(36,60,145,.22); }
.card__thumb {
    border-radius: var(--radius-md); aspect-ratio: 16 / 10; overflow: hidden; margin-bottom: .5rem;
    background: radial-gradient(120% 120% at 50% 0%, var(--bg-white) 0%, var(--bg-sky) 70%);
    display: grid; place-items: center; border: 1px solid var(--border-glass);
}
.card__thumb .ico { width: 46px; height: 46px; color: rgba(36, 60, 145, .40); }
.card__thumb picture { display: block; width: 100%; height: 100%; }
.card__thumb .media-fill { width: 100%; height: 100%; object-fit: cover; }
.brand-logo picture { display: block; width: 100%; height: 100%; }
.brand-logo img { max-height: 100%; max-width: 100%; object-fit: contain; }
.card__title { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--fs-card-title); color: var(--to-navy); font-weight: 700; }
.card__title .ico { width: 20px; height: 20px; color: var(--to-red); }
.card__desc { color: var(--text-secondary); font-size: .92rem; }
.card__link { margin-top: auto; display: inline-flex; align-items: center; gap: .4rem; color: var(--to-blue); font-weight: 700; font-size: .92rem; }
.card__link .ico { width: 16px; height: 16px; color: var(--to-red); transition: transform var(--t-fast) var(--ease); }
.card:hover .card__link .ico { transform: translateX(4px); }
.card__arrow { color: var(--to-red); }
.card__link--cyan { color: var(--primary-cyan); }

/* ---- Product cards (compact, uniform image + meta) --------------------- */
/* auto-fill (not auto-fit) so a lone card keeps its column width instead of stretching. */
.product-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1.1rem; }
/* The paginated listing grid is a fixed 4-per-row (collapses responsively). :not(.is-list) so list view still stacks. */
.product-grid[data-filter-grid]:not(.is-list) { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1180px) { .product-grid[data-filter-grid]:not(.is-list) { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .product-grid[data-filter-grid]:not(.is-list) { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .product-grid[data-filter-grid]:not(.is-list) { grid-template-columns: 1fr; } }
.product-card { padding: .9rem; gap: .35rem; border-radius: 16px; }
.product-card .card__thumb { aspect-ratio: 4 / 3; margin-bottom: .55rem; display: grid; place-items: center; }
.product-card .card__thumb .ico { width: 40px; height: 40px; }
.card__brand { font-size: .67rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--to-red); }
.product-card .card__title { font-size: .94rem; line-height: 1.3; }
.card__model { font-size: .75rem; color: var(--text-muted); }
.product-card .card__desc {
    font-size: .84rem;
    /* Clamp to keep every card the same height regardless of copy length. */
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card__foot { margin-top: auto; padding-top: .45rem; border-top: 1px solid var(--to-border); }
.card__cat { display: inline-flex; align-items: center; gap: .35rem; font-size: .79rem; font-weight: 700; color: var(--to-blue); }
.card__cat .ico { width: 15px; height: 15px; color: var(--to-red); transition: transform var(--t-fast) var(--ease); }
.card:hover .card__cat .ico { transform: translateX(4px); }
.card__title--link { text-decoration: none; transition: color var(--t-fast) var(--ease); }
.card__title--link:hover { color: var(--to-red); }
/* Product detail meta chips */
.product-meta { display: flex; flex-wrap: wrap; gap: .5rem; }
.product-meta .chip { display: inline-flex; align-items: center; gap: .4rem; }
.product-meta .chip .ico { width: 15px; height: 15px; }
.chip--soft { background: var(--to-bg-soft); color: var(--text-secondary); }
/* Product detail: overview + spec sheet */
.detail-body { display: grid; grid-template-columns: 1.7fr 1fr; gap: 1.5rem; align-items: start; }
.detail-subhead { color: var(--to-navy); font-weight: 800; font-size: 1.05rem; margin: 1.5rem 0 .75rem; }
.feature-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.feature-list li { display: flex; align-items: flex-start; gap: .6rem; color: var(--text-secondary); }
.feature-list .ico { flex: 0 0 auto; width: 20px; height: 20px; color: var(--to-red); margin-top: 2px; }
.spec-card { position: sticky; top: 96px; }
.spec-table { width: 100%; border-collapse: collapse; margin: .25rem 0 1.1rem; }
.spec-table th, .spec-table td { text-align: left; padding: .6rem .25rem; border-bottom: 1px solid var(--to-border); font-size: .9rem; vertical-align: top; }
.spec-table th { color: var(--text-muted); font-weight: 700; white-space: nowrap; width: 42%; }
.spec-table td { color: var(--text-primary); font-weight: 600; }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }
.btn-block { display: flex; width: 100%; justify-content: center; }
@media (max-width: 900px) {
    .detail-body { grid-template-columns: 1fr; }
    .spec-card { position: static; }
}
/* List view: image left, text right (falls back to stacked on mobile via existing rule). */
.product-grid.is-list .product-card .card__thumb { width: 200px; flex: 0 0 200px; aspect-ratio: 4/3; margin-bottom: 0; }
.product-grid.is-list .product-card { gap: .35rem 1.25rem; flex-wrap: wrap; }
.product-grid.is-list .product-card .card__desc { -webkit-line-clamp: 2; line-clamp: 2; }

/* ---- Feature bands ------------------------------------------------------ */
.feature-row { display: grid; gap: 1.75rem 2rem; }
/* About hero feature list: force a fixed 2×2 (its narrow hero column can't fit the
   default 360px auto-fit tracks, so it would otherwise stack 1-per-row).
   Stays 2×2 on mobile too, with tighter spacing/stacked icon so it fits. */
.feature-row.grid--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) {
    .feature-row.grid--2 { gap: 1.25rem 1rem; }
    .feature-row.grid--2 .feature { flex-direction: column; gap: .5rem; }
}
.feature { display: flex; gap: 1rem; align-items: flex-start; }
.feature__title { color: var(--text-primary); font-weight: 700; font-size: 1.02rem; margin-bottom: .25rem; }
.feature__desc { color: var(--text-secondary); font-size: .9rem; }

/* ---- Process stepper ---------------------------------------------------- */
.process { display: flex; align-items: flex-start; gap: 1rem; }
.process__label { flex: 0 0 auto; width: 130px; }
.process__label h3 { font-size: 1.3rem; }
.process__steps { flex: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.pstep { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .6rem; flex: 1; }
.pstep__title { color: var(--text-primary); font-weight: 700; font-size: .95rem; }
.pstep__desc { color: var(--text-secondary); font-size: .78rem; max-width: 18ch; }
.pstep__arrow { align-self: center; color: var(--primary-cyan); margin-top: 1.1rem; }
.pstep__arrow .ico { width: 20px; height: 20px; }

/* ---- Products page layout ---------------------------------------------- */
.products-layout { display: grid; grid-template-columns: 280px 1fr; gap: 1.75rem; align-items: start; }
.sidebar { position: sticky; top: 6rem; display: flex; flex-direction: column; gap: .4rem; }
.sidebar__title { color: var(--text-primary); font-weight: 700; font-size: 1.1rem; margin-bottom: .75rem; }
.side-link {
    display: flex; align-items: center; gap: .7rem; padding: .8rem 1rem; border-radius: var(--radius-md);
    color: var(--text-secondary); font-weight: 600; font-size: .92rem; border: 1px solid transparent;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.side-link .ico { width: 18px; height: 18px; }
.side-link .chev { margin-inline-start: auto; width: 16px; height: 16px; opacity: .6; }
.side-link:hover { background: var(--surface-glass-light); color: var(--text-primary); }
.side-link.is-active { background: var(--to-gradient-blue); color: #fff; }
.side-link.is-active .chev { opacity: .9; }
.download-card { margin-top: 1rem; display: flex; gap: .8rem; align-items: flex-start; padding: 1rem; border-radius: var(--radius-md); background: var(--surface-glass-light); border: 1px solid var(--border-glass); }
.download-card__title { color: var(--text-primary); font-weight: 700; font-size: .92rem; }
.download-card__desc { color: var(--text-secondary); font-size: .78rem; }

.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.toolbar__count { color: var(--text-secondary); font-size: .92rem; }
.search {
    display: inline-flex; align-items: center; gap: .6rem; padding: .7rem 1rem; border-radius: var(--radius-md);
    background: var(--surface-glass-light); border: 1px solid var(--border-glass); min-width: 260px;
}
.search .ico { width: 18px; height: 18px; color: var(--text-muted); }
.search input { background: none; border: none; outline: none; color: var(--text-primary); font-size: .92rem; width: 100%; }
.search input::placeholder { color: var(--text-muted); }
.view-toggle { display: inline-flex; background: var(--surface-glass-light); border: 1px solid var(--border-glass); border-radius: var(--radius-md); padding: 3px; }
.view-toggle button {
    display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .9rem; border: none; background: none;
    color: var(--text-secondary); font-weight: 600; font-size: .85rem; border-radius: calc(var(--radius-md) - 4px);
}
.view-toggle button .ico { width: 16px; height: 16px; }
.view-toggle button.is-active { background: var(--to-gradient-blue); color: #fff; }

/* list view */
.product-grid.is-list { grid-template-columns: 1fr; }
.product-grid.is-list .card { flex-direction: row; align-items: center; }
.product-grid.is-list .card__thumb { width: 200px; flex: 0 0 200px; margin-bottom: 0; aspect-ratio: 16/10; }
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--text-secondary); }
.empty-state .ico { width: 48px; height: 48px; color: var(--text-muted); margin: 0 auto 1rem; }

/* ---- Brands ------------------------------------------------------------- */
.brand-card { align-items: stretch; }
.brand-logo {
    height: 74px; border-radius: var(--radius-md); display: grid; place-items: center; margin-bottom: .35rem;
    background: linear-gradient(180deg, var(--bg-white), var(--bg-sky));
    color: var(--color-navy); font-family: var(--font-display); font-weight: 800; letter-spacing: .02em; font-size: 1.1rem; text-align: center; padding: .5rem; border: 1px solid var(--border);
}
.brand-card .card__desc { font-size: .84rem; }
.select {
    display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1rem; border-radius: var(--radius-md);
    background: var(--surface-glass-light); border: 1px solid var(--border-glass); color: var(--text-primary); font-weight: 600; font-size: .9rem;
}
.select select { background: var(--bg-secondary); color: var(--text-primary); border: none; outline: none; font: inherit; }

/* ---- Breadcrumb --------------------------------------------------------- */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; margin-bottom: 1.25rem; }
/* Keep each crumb intact so the trail wraps as whole items, not mid-word. */
.breadcrumb a, .breadcrumb .current, .breadcrumb .sep { white-space: nowrap; }
.breadcrumb a { color: var(--text-muted); }
.breadcrumb .sep { color: var(--text-muted); }
.breadcrumb .current { color: var(--color-primary); }

/* ---- Contact ------------------------------------------------------------ */
.quick-contact { display: flex; flex-direction: column; gap: 1.35rem; }
.quick-contact__row { display: flex; gap: 1rem; align-items: flex-start; }
.quick-contact__label { color: var(--text-primary); font-weight: 700; }
.quick-contact__sub { color: var(--text-secondary); font-size: .85rem; }
/* Stacked variant (About's Mission/Vision): icon centers with the TITLE only in its own header
   row, not with the whole icon+title+paragraph block — a tall icon flex-start-aligned against a
   short one-line title otherwise hangs noticeably lower than the title (looks misaligned). The
   paragraph sits full-width below. */
.quick-contact__row--stack { flex-direction: column; gap: .6rem; }
.quick-contact__head { display: flex; align-items: center; gap: 1rem; }
.quick-contact__row--stack .quick-contact__sub { margin: 0; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { position: relative; display: flex; align-items: center; gap: .7rem; padding: .35rem .95rem; border-radius: var(--radius-md); background: var(--surface-glass-light); border: 1px solid var(--border-glass); transition: border-color var(--t-fast) var(--ease); }
.field:focus-within { border-color: rgba(36,60,145,.5); box-shadow: 0 0 0 3px rgba(36,60,145,.1); }
.field .ico { width: 18px; height: 18px; color: var(--primary-cyan); flex: 0 0 auto; }
.field--full { grid-column: 1 / -1; }
.field--area { align-items: flex-start; padding-top: .8rem; }
.field label .req { color: var(--to-red); }
.field input, .field textarea { flex: 1; width: 100%; background: none; border: none; outline: none; color: var(--text-primary); font: inherit; padding: .75rem 0; resize: vertical; }
.field textarea { min-height: 150px; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-muted); }
.consent { display: flex; align-items: center; gap: .6rem; font-size: .88rem; color: var(--text-secondary); }
.consent input { width: 18px; height: 18px; accent-color: var(--accent-red); }
.form-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.25rem; flex-wrap: wrap; }
.form-status { font-size: .9rem; font-weight: 600; }
.form-status.ok { color: var(--success); }
.form-status.err { color: var(--error); }
.field-error { color: var(--error); font-size: .78rem; margin-top: .2rem; display: block; }

.map-placeholder {
    border-radius: var(--radius-lg); border: 1px solid var(--border-glass); min-height: 300px; position: relative; overflow: hidden;
    background:
        linear-gradient(rgba(36,60,145,.05) 1px, transparent 1px) 0 0 / 44px 44px,
        linear-gradient(90deg, rgba(36,60,145,.05) 1px, transparent 1px) 0 0 / 44px 44px,
        radial-gradient(120% 120% at 60% 40%, var(--bg-white), var(--bg-sky));
    display: grid; place-items: center;
}
/* Real embedded map (Google Maps iframe) on the Contact page. */
.map-embed { border-radius: var(--radius-lg); border: 1px solid var(--border-glass); overflow: hidden; height: 320px; box-shadow: var(--shadow-card); background: var(--bg-sky); }
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.map-pin { display: flex; flex-direction: column; align-items: center; gap: .4rem; color: var(--text-primary); }
.map-pin .ico { width: 34px; height: 34px; color: var(--to-red); filter: drop-shadow(0 6px 12px rgba(237,28,36,.32)); }
.map-pin .tag { background: var(--surface-glass-strong); border: 1px solid var(--border-glass); border-radius: var(--radius-sm); padding: .5rem .8rem; font-size: .8rem; }

/* ---- Footer — premium glassmorphism, brand purple→red gradient ---------- */
.footer {
    position: relative; margin-top: clamp(3rem, 6vw, 5rem); overflow: hidden;
    /* glass overlay: bright top sheen fading to a slight darken at the bottom, so the
       white text stays legible over the light red end of the brand gradient */
    background:
        linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(0,0,0,.06) 45%, rgba(0,0,0,.20) 100%),
        var(--to-gradient-footer);
    border-top: 1px solid rgba(255,255,255,.15);
    border-radius: 40px 40px 0 0;
    box-shadow: 0 -12px 40px rgba(75,43,131,.18), inset 0 1px rgba(255,255,255,.15);
    -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
}
/* soft lighting / gentle glass reflections */
.footer__sheen {
    position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(620px 320px at 12% -4%, rgba(255,255,255,.16), transparent 62%),
        radial-gradient(520px 280px at 88% 8%, rgba(255,255,255,.08), transparent 60%);
}
.footer__inner { position: relative; z-index: 1; padding-block: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2.5rem); }
.footer__grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 2.5rem 2rem; }

/* brand + logo (soft radial glow behind) */
.footer__brand { position: relative; }
.footer__logo-wrap { position: relative; display: inline-flex; }
.footer .brand { position: relative; z-index: 1; }
.footer .brand__leaf { height: clamp(66px, 5.6vw, 92px); filter: drop-shadow(0 6px 18px rgba(0,0,0,.30)); }
/* Footer — new lockup on a soft white "chip" so the dark logo reads on the dark footer. */
.brand__chip {
    display: inline-flex; align-items: center; justify-content: center;
    padding: .7rem 1.05rem; border-radius: 16px;
    background: #fff; box-shadow: 0 12px 30px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.6);
}
.brand__lockup-footer { height: clamp(46px, 4.4vw, 60px); width: auto; object-fit: contain; display: block; }
/* Legible white text over the coloured gradient. */
.footer, .footer__copyright { text-shadow: 0 1px 2px rgba(0,0,0,.28); }
.footer .brand__name { color: #fff; }
.footer .brand__sub { color: #fff; }
.footer__tag { color: rgba(255,255,255,.92); font-size: 1.06rem; max-width: 34ch; margin: 1.1rem 0 0; }

/* floating glass CTA card */
.footer__cta {
    display: flex; flex-direction: column; gap: .55rem; align-items: flex-start;
    margin: 1.4rem 0; padding: 1.1rem 1.25rem; border-radius: 18px; max-width: 340px;
    background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.20);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: 0 12px 30px rgba(0,0,0,.16), inset 0 1px rgba(255,255,255,.2);
    transition: transform var(--t-med) var(--ease), background var(--t-med) var(--ease);
}
.footer__cta:hover { transform: translateY(-3px); background: rgba(255,255,255,.15); }
.footer__cta-text { color: #fff; font-weight: 700; font-size: 1.13rem; }
.footer__cta-btn { display: inline-flex; align-items: center; gap: .5rem; color: #fff; font-weight: 700; font-size: 1.04rem; }
.footer__cta-btn .ico { width: 16px; height: 16px; transition: transform var(--t-fast) var(--ease); }
.footer__cta:hover .footer__cta-btn .ico { transform: translateX(4px); }

/* columns + thin glass dividers */
.footer__col { border-inline-start: 1px solid rgba(255,255,255,.10); padding-inline-start: 1.75rem; }
.footer__col h4 { color: #fff; font-size: 1.21rem; font-weight: 700; margin-bottom: 1.1rem; letter-spacing: .01em; }
.footer__col a { display: block; color: rgba(255,255,255,.92); font-size: 1.06rem; padding: .32rem 0; transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.footer__col a:hover { color: #fff; transform: translateX(4px); }
.footer__contact li { display: flex; gap: .6rem; align-items: flex-start; color: rgba(255,255,255,.92); font-size: 1.06rem; padding: .32rem 0; }
.footer__contact li a { color: rgba(255,255,255,.92); transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.footer__contact li a:hover { color: #fff; transform: translateX(4px); }
.footer__contact .ico { width: 16px; height: 16px; color: #fff; opacity: .9; margin-top: .2rem; flex: 0 0 auto; }

/* premium circular frosted-glass social icons */
.socials { display: flex; gap: .65rem; margin-top: 1.4rem; }
.social {
    width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); color: #fff;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    transition: transform var(--t-fast) var(--ease), background var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-fast) var(--ease);
}
.social:hover { color: #fff; background: var(--to-gradient-primary); border-color: rgba(255,255,255,.45); transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.25); }
.social .ico { width: 18px; height: 18px; }

/* separate copyright bar — darker brand gradient, centered */
.footer__copyright { position: relative; z-index: 1; background: var(--to-gradient-footer-dark); border-top: 1px solid rgba(255,255,255,.14); }
.footer__copyright-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1.1rem 0; color: rgba(255,255,255,.90); font-size: .98rem; }
.footer__copyright a { color: rgba(255,255,255,.90); transition: color var(--t-fast) var(--ease); }
.footer__copyright a:hover { color: #fff; }
.footer__legal { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.footer__by { color: rgba(255,255,255,.82); }

/* ---- Media scene placeholder ------------------------------------------- */
.media-scene {
    width: 100%; height: 100%; display: grid; place-items: center; position: relative; overflow: hidden;
    background: radial-gradient(130% 130% at 28% 18%, var(--bg-white) 0%, var(--bg-sky) 55%, #DCE9F8 100%);
}
.media-scene::before {
    content: ""; position: absolute; inset: 0; opacity: .6;
    background:
        linear-gradient(rgba(36,60,145,.05) 1px, transparent 1px) 0 0 / 40px 40px,
        linear-gradient(90deg, rgba(36,60,145,.05) 1px, transparent 1px) 0 0 / 40px 40px;
}
.media-scene::after {
    content: ""; position: absolute; width: 220px; height: 220px; right: -40px; bottom: -60px; border-radius: 50%;
    background: radial-gradient(circle, rgba(237,28,36,.20), transparent 70%); filter: blur(10px);
}
.media-scene .ico { width: 42%; height: 42%; color: rgba(36, 60, 145, .28); position: relative; z-index: 1; }
/* A real image fills the whole media frame (crop, never stretch) above the decorative grid. */
/* Showcase image: show the whole asset (logos/wordmarks/products) without cropping;
   the media-scene's gradient shows around it. Small padding keeps it off the edges. */
.media-scene .media-fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6%; z-index: 1; display: block; }

/* ---- Pager -------------------------------------------------------------- */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; }
.pager__summary { color: var(--text-secondary); font-size: .88rem; }
.pager__list { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.pager__btn {
    display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 .7rem;
    border-radius: var(--radius-sm); background: var(--surface-glass-light); border: 1px solid var(--border-glass);
    color: var(--text-secondary); font-weight: 600; font-size: .9rem; transition: all var(--t-fast) var(--ease);
}
.pager__btn:hover { color: var(--text-primary); border-color: var(--border-glass-strong); }
.pager__btn.is-active { background: var(--to-gradient-blue); color: #fff; border-color: transparent; }
.pager__btn.is-disabled { opacity: .4; pointer-events: none; }
.pager__ellipsis { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 40px; color: var(--text-muted); }
@media (max-width: 560px) { .pager { justify-content: center; } }

/* ---- Detail / article / prose ------------------------------------------- */
.prose { color: var(--text-secondary); max-width: 72ch; }
.prose p { margin: 0 0 1.1rem; }
.detail-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.5rem,4vw,3rem); align-items: center; }
.detail-media { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-glass); aspect-ratio: 4/3; box-shadow: var(--shadow-panel); }
.chip-row { display: flex; flex-wrap: wrap; gap: .5rem; }
/* Glassy blue→purple gradient badge (spec) */
.chip { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .9rem; border-radius: var(--radius-pill); background: var(--to-badge-gradient); border: 1px solid rgba(255,255,255,.32); color: #fff; font-size: .85rem; font-weight: 600; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 6px 16px rgba(23,42,104,.14); }
.chip:hover { color: #fff; transform: translateY(-1px); }
.chip .ico { color: #fff; }
.meta-row { display: flex; gap: 1rem; flex-wrap: wrap; color: var(--text-muted); font-size: .85rem; }
.accordion__item { border: 1px solid var(--border-glass); border-radius: var(--radius-md); margin-bottom: .75rem; background: var(--surface-glass); overflow: hidden; }
.accordion__q { width: 100%; text-align: start; padding: 1.1rem 1.25rem; background: none; border: none; cursor: pointer; color: var(--text-primary); font-weight: 700; font-size: 1rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; list-style: none; }
.accordion__q::-webkit-details-marker { display: none; }
.accordion__q .ico { width: 20px; height: 20px; color: var(--primary-cyan); transition: transform var(--t-fast) var(--ease); flex: 0 0 auto; }
.accordion__item[open] .accordion__q .ico { transform: rotate(180deg); }
.accordion__a { padding: 0 1.25rem 1.1rem; color: var(--text-secondary); font-size: .95rem; }
.job-card { display: flex; justify-content: space-between; gap: 1rem; align-items: center; flex-wrap: wrap; }

/* ---- Scroll reveal ------------------------------------------------------ */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* ---- Mobile drawer scaffolding ----------------------------------------- */
.drawer-backdrop { display: none; }

/* ============================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1100px) {
    .footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
    .footer__brand { grid-column: 1 / -1; }
    .footer__col { border-inline-start: none; padding-inline-start: 0; }
    .statband { grid-template-columns: repeat(3, 1fr); }
    /* Below the desktop-nav breakpoint the footer's grid already goes 2-up, but its
       typography/padding stayed at fixed desktop rem values all the way down to the
       existing <=520px mobile tier - so across the whole tablet range (~521-1100px,
       every iPad/Android tablet/Surface width) the SAME text sat in a container ~35-45%
       narrower, reading proportionately much bigger (e.g. column-heading ratio 1.7% of
       container on desktop vs 2.6% on an 834px tablet). Scale it down for this range,
       landing between the desktop values and the <=520px mobile ones. */
    .footer__inner { padding-block: clamp(1.75rem, 4vw, 2.5rem) clamp(1.25rem, 2.5vw, 1.75rem); }
    .brand__lockup-footer { height: clamp(38px, 4vw, 50px); }
    .footer__tag { font-size: .95rem; margin-top: .9rem; }
    .footer__cta { padding: .9rem 1.1rem; margin: 1.1rem 0; max-width: 300px; }
    .footer__cta-text { font-size: 1rem; }
    .footer__cta-btn { font-size: .92rem; }
    .footer__col h4 { font-size: 1.05rem; margin-bottom: .85rem; }
    .footer__col a { font-size: .95rem; padding: .28rem 0; }
}
@media (max-width: 992px) {
    .hero__grid { grid-template-columns: 1fr; }
    .detail-hero { grid-template-columns: 1fr; }
    .hero__media { order: -1; }
    .float-panel { position: static; width: 100%; transform: none; margin-top: 1rem; }
    .products-layout { grid-template-columns: 1fr; }
    .sidebar { position: static; }
    .process { flex-direction: column; }
    .process__steps { flex-wrap: wrap; gap: 1.5rem; }
    .pstep { flex: 0 0 40%; }
    .pstep__arrow { display: none; }
}
/* Nav overflow zone: above the drawer breakpoint (1100px) the full horizontal nav (logo + 7 menu
   links + search/contact/language) needed ~1200px at natural sizing, but the nav pill itself
   only reaches that width around ~1560px viewport — so on every laptop/tablet width in between
   (a huge, common range: 1101-~1550px, covers 1280/1366/1440/1536 screens) the content silently
   overflowed the pill (nav.scrollWidth > clientWidth). Compact the nav's own sizing (not layout)
   in that zone so everything fits without needing a wider drawer breakpoint (which would push
   most laptops into hamburger mode instead of showing the real nav). */
@media (min-width: 1101px) and (max-width: 1560px) {
    .nav__list { gap: .1rem; }
    .nav__link { padding: .4rem .4rem; font-size: .82rem; }
    .nav__actions { gap: .25rem; }
    .nav__contact { padding: .25rem .25rem .25rem .55rem; font-size: .76rem; }
    .nav__contact .ico { width: 24px; height: 24px; padding: 5px; }
    .nav__search { width: 32px; height: 32px; }
    .nav__search .ico { width: 15px; height: 15px; }
    .nav__lang-toggle { padding: .25rem .35rem; font-size: .7rem; }
    .nav__lang-ic { width: 13px; height: 13px; }
    .nav__brand { padding: .2rem .5rem; }
    .brand-lockup__icon { height: 34px !important; }
    .brand-lockup__text { margin-inline-start: 5px !important; }
    .brand-lockup__primary { font-size: .66rem; letter-spacing: .08em; }
    .brand-lockup__secondary { font-size: .42rem; }
}
/* The 1101-1250px sliver is the tightest: even the compact sizing above is a hair short there.
   Squeeze list/action gaps a touch further only in that narrowest slice. */
@media (min-width: 1101px) and (max-width: 1250px) {
    .nav__list { gap: .05rem; }
    .nav__link { padding: .4rem .32rem; font-size: .78rem; }
    .nav__actions { gap: .18rem; }
}
/* Unified nav (logo + menu + search/contact/language) collapses to a drawer ≤1100px. */
@media (max-width: 1100px) {
    .nav__toggle {
        display: inline-flex; align-items: center; justify-content: center; border: none; background: none;
        color: #fff; margin-inline-start: auto; cursor: pointer; padding: .3rem;
    }
    .nav__toggle .ico { width: 26px; height: 26px; }
    /* backdrop-filter/transform on .nav would trap the fixed drawer inside the pill — disable it here. */
    .nav { backdrop-filter: none; -webkit-backdrop-filter: none; }
    .nav__panel {
        position: fixed; inset: 0 0 0 auto; width: min(86vw, 340px); flex-direction: column; align-items: stretch;
        justify-content: flex-start; gap: .3rem; padding: 5rem 1.25rem 1.5rem; overflow-y: auto;
        background: var(--to-gradient-footer); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
        border-inline-start: 1px solid rgba(255,255,255,.18); transform: translateX(100%);
        transition: transform var(--t-med) var(--ease); z-index: 130;
    }
    .nav__panel.is-open { transform: translateX(0); }
    .nav__list { flex-direction: column; align-items: stretch; gap: .2rem; flex: 0 0 auto; padding-inline-start: 0; }
    .nav__link { font-size: 1rem; }
    .nav__link.is-active::after { display: none; }
    .nav__has-menu { position: static; }
    /* Resources' submenu was always expanded in the drawer (no way to collapse it) — make it
       a real accordion: collapsed by default, the caret (toggled via JS) expands it in place. */
    .nav__has-menu .caret { transition: transform var(--t-fast) var(--ease); cursor: pointer; }
    .nav__has-menu.is-expanded .caret { transform: rotate(180deg); }
    /* Collapse/expand via CSS Grid's 0fr->1fr row trick, not max-height. max-height (even
       animating alone) combined with instantly-snapping padding/border repeatedly produced a
       transient layout glitch mid-transition — the link would briefly render far outside its
       container (x as low as -40px or as high as +413px on a 375px-wide screen), clipping its
       own text, reproducible on rapid open+expand. Grid's fr-unit interpolation doesn't share
       that failure mode: the row track smoothly animates 0->content-height with nothing else
       (padding/border/position) ever needing to change mid-transition. */
    .nav__menu {
        position: static; transform: none; opacity: 1; visibility: visible; box-shadow: none;
        /* Was margin-inline-start only, indenting the card 8px from the list's left edge while
           its width stayed unchanged — so it neither lined up with Home/About/etc.'s left edge
           nor reached the list's own right edge (a lopsided ~8px/20px gap). Flush on both sides
           instead, matching every other item in the list. */
        display: grid; grid-template-rows: 0fr; margin-inline: 0; margin-block: 0;
        /* base (desktop) .nav__menu sets padding:.5rem + border:1px — must zero both here too,
           or the outer box itself (not just the inner) keeps that as a floor regardless of the
           grid row's own height. */
        padding: 0; border: none; background: none;
        transition: grid-template-rows var(--t-med) var(--ease), margin-block var(--t-med) var(--ease);
    }
    /* The base desktop rule's `.nav__has-menu:hover .nav__menu, .nav__has-menu:focus-within
       .nav__menu { transform: translateX(-50%) ... }` has higher specificity (0,3,0) than the
       plain `.nav__menu { transform:none }` above (0,1,0) — a media query doesn't add
       specificity, so whenever the drawer item gets hover/focus (e.g. after tapping the caret)
       that desktop rule won, translating the card -50% of its own width (as far as ~143px on a
       287px-wide card) clean off to the left of its container. Re-declare it here to win by
       matching specificity + later source order. */
    .nav__has-menu:hover .nav__menu, .nav__has-menu:focus-within .nav__menu { transform: none; }
    .nav__has-menu.is-expanded .nav__menu { grid-template-rows: 1fr; margin-block: .2rem .3rem; }
    /* Padding/border/background live here, and ONLY under .is-expanded (not transitioned) —
       min-height:0 alone doesn't let the grid row reach a true 0px: padding+border are still
       a hard floor on the box even with min-height:0, so a collapsed-but-padded inner still
       measured 18px tall. Zero here, real values only once expanded, is the only way to get
       a genuine 0px collapsed state. */
    .nav__menu-inner { overflow: hidden; min-height: 0; }
    .nav__has-menu.is-expanded .nav__menu-inner {
        padding: .5rem; background: rgba(255,255,255,.10);
        border: 1px solid rgba(255,255,255,.18); border-radius: 10px;
    }
    .nav__menu::before { content: none; }
    /* Search / Contact / Language: was 3 full-width blocks stacked in a column (the tallest
       real contributor to "the drawer is too long"). Contact stays a prominent full-width CTA;
       Search + Language now share a row via CSS Grid (nav__contact spans both columns), which
       roughly halves this block's height with no markup change. This also fixes a genuine bug:
       .nav__search kept its base display:inline-grid here, and with no grid-template-columns
       set, the icon and label auto-placed into two separate ROWS (implicit single-column grid)
       instead of sitting side-by-side — nearly doubling that one button's height for no reason. */
    .nav__actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .55rem; margin-top: .85rem; padding-top: .85rem; border-top: 1px solid rgba(255,255,255,.18); }
    .nav__contact { grid-column: 1 / -1; justify-content: center; }
    .nav__search { display: flex; width: auto; height: auto; border-radius: 10px; padding: .55rem .7rem; justify-content: center; align-items: center; gap: .5rem; }
    .nav__search-label { display: inline; }
    .nav__lang { width: 100%; }
    .nav__lang-toggle { width: 100%; justify-content: center; padding: .55rem .7rem; border-radius: 10px; }
    .nav__lang-menu { right: auto; left: 50%; transform: translateX(-50%) translateY(8px); }
    .nav__lang.is-open .nav__lang-menu { transform: translateX(-50%) translateY(0); }
    .drawer-backdrop.is-open { display: block; position: fixed; inset: 0; background: rgba(12,46,90,.45); z-index: 120; }
}
/* Short-and-wide viewports (a foldable phone unfolded in landscape, e.g. Galaxy Fold at
   717x512) don't have the vertical room the drawer's normal spacing assumes - at 717x512 the
   drawer content ran to 543px against only 512px available, forcing a scroll to reach Search/
   Language. Tighten padding/gaps here (not touch-target sizes) so it fits without scrolling. */
@media (max-width: 1100px) and (max-height: 580px) {
    .nav__panel { padding-bottom: .75rem; }
    .nav__list { gap: .12rem; }
    .nav__link { padding-block: 6px; }
    .nav__has-menu.is-expanded .nav__menu { margin-block: .15rem .2rem; }
    .nav__actions { margin-top: .5rem; padding-top: .5rem; gap: .45rem; }
}
@media (max-width: 768px) {
    .stats { grid-template-columns: repeat(2, 1fr); }
    .stat:nth-child(-n+2) { border-block-end: 1px solid var(--border-glass); }
    .stat:nth-child(odd) { border-inline-start: none; }
    .statband { grid-template-columns: repeat(2, 1fr); }
    .form-grid { grid-template-columns: 1fr; }
    .footer__grid { grid-template-columns: 1fr 1fr; }
    .footer__col a { padding: .62rem 0; }
    .footer__contact li a { display: inline-flex; align-items: center; min-height: 44px; }
    .topbar__contact { display: none; }
    .section-head { align-items: flex-start; }
    .product-grid.is-list .card { flex-direction: column; }
    .product-grid.is-list .card__thumb { width: 100%; flex: none; }
    /* Mobile: the tall, narrow hero over-zooms any cover-cropped background photo, so
       soften every page's hero background to a subtle backdrop for readability. Also drop
       the home hero's desktop-positioned scan/network layers (they only show clipped bits). */
    .hero-bg-host > .hero-bg-layer { opacity: .22; }
    .hero-anim .hero-net, .hero-anim .hero-scan { display: none; }
}
@media (max-width: 600px) {
    /* Mobile text scale — every heading token is fluid (clamp) but the min bound was tuned
       for desktop/tablet, so on phones (<800px-ish) it was permanently pinned to that min
       (e.g. hero title flat at 40px, page title flat at 32px on every phone). Redefine the
       tokens with smaller mobile minimums; since every heading site-wide reads var(--fs-*),
       this rebalances hero/page/section titles on every page from one place. Body/small/
       card-title/eyebrow tokens were already an appropriate size on phones — left as-is. */
    :root {
        --fs-hero: clamp(2rem, 7vw, 2.5rem);
        --fs-page-title: clamp(1.7rem, 6.2vw, 2rem);
        --fs-section: clamp(1.4rem, 5.2vw, 1.7rem);
    }
    /* Loosen the eyebrow label's heavy desktop tracking so long labels wrap less awkwardly. */
    .eyebrow { letter-spacing: .14em; margin-bottom: .6rem; }

    /* Hero vertical rhythm: tighten the gaps between eyebrow/heading/description/CTA (desktop
       spacing carried straight over to phones and, stacked with a 3-line heading + 2 stacked
       CTA buttons + stat tiles, made the whole hero run to 1+ full screens before any real
       content appeared). Also shrink the CTA buttons themselves — still full-width/no-clip
       (grid-item min-width:0 fix), just a shorter pill. */
    .hero__title { margin-bottom: .85rem; }
    .hero__desc, .hero-bg-host .lead { margin-bottom: 1rem; }
    .hero__cta { gap: .6rem; margin-bottom: 1rem; }
    .hero__cta .btn-primary, .hero__cta .btn-cyan { min-height: 46px; padding: 4px 6px 4px 20px; }
    .hero__cta .btn-primary .ico, .hero__cta .btn-cyan .ico { width: 36px; height: 36px; padding: 8px; }
    .hero__cta .btn-glass { min-height: 46px; padding: .6rem 1.3rem; }

    /* Products/Solutions/Services/Brands hero (.fx-hero) carries more stacked blocks than Home's
       (breadcrumb, eyebrow, title, desc, CTA, trust-row/float-panel, THEN a showcase image) — tighten
       further so it doesn't run well past a full screen before any other content is visible. */
    .breadcrumb { margin-bottom: .6rem; }
    .hero-bg-host .trust-row { margin-top: .85rem; }
    /* Float-panel (Solutions/Services/Brands/About hero benefit list) goes static+full-width at
       <=992px already; single column stays the shorter option here — a 2-up grid was tried, but
       these titles ("Regulatory Compliance", "Scalable & Future-Ready") wrap to 2 lines at
       half-width either way, so 2 columns netted the same total height with smaller, wrapped
       text. Just tighten the gap above it. */
    .hero-bg-host .float-panel { margin-top: .85rem; }

    /* Contact hero's Quick Contact card (Phone/Message/Address/Support rows) was the single
       biggest block on that page (~426px) — tighter row gap, smaller icon, less padding.
       Padding is set inline in the view (style="padding:1.5rem") so it needs !important here,
       same precedent as the brand-lockup icon override above. */
    .contact-quick-card { padding: 1.1rem !important; }
    .contact-quick-card .section-title { font-size: 1.15rem !important; margin-bottom: .75rem !important; }
    .quick-contact { gap: .9rem; }
    .contact-quick-card .icon-tile { width: 38px; height: 38px; flex: 0 0 38px; }
    .contact-quick-card .icon-tile .ico { width: 18px; height: 18px; }
    .contact-quick-card .quick-contact__label { font-size: .92rem; }
    .contact-quick-card .quick-contact__sub { font-size: .78rem; }

    /* Support-feature row (Expert Support/Trusted Solutions/Quick Response) — already stacks with
       dividers at <=640px; just trim the icon and row padding a bit further. */
    .support-feature__ic { width: 38px; height: 38px; }
    .support-feature__ic .ico { width: 18px; height: 18px; }
    .support-feature { padding-block: .5rem; gap: .55rem; }
    .contact-hero-cta { margin-bottom: 1.5rem; }

    /* Body-content quick-contact panels (e.g. About's "Our Mission & Vision") pair a 54px
       icon-tile--lg with a long paragraph — proportionate on desktop, oversized next to the
       paragraph's wrapped height on a narrow phone. Not inside a hero, so untouched by the
       hero-scoped rules above. */
    .panel .quick-contact .icon-tile--lg { width: 44px; height: 44px; border-radius: 12px; }
    .panel .quick-contact .icon-tile--lg .ico { width: 22px; height: 22px; }
    .panel .quick-contact { gap: 1.1rem; }

    /* About hero's 2x2 feature grid (Trusted Partner/Global Quality/Customer Focused/Health
       Canada Compliant) — each tile ran ~146px (44px icon + uncapped 2-line description), 340px
       total, the single biggest chunk of the About hero. Smaller icon + clamped description,
       matching the compaction already used for the grid--4 trust band elsewhere. */
    .feature-row.grid--2 { margin-top: 1rem !important; gap: .9rem .8rem; }
    .feature-row.grid--2 .feature { gap: .4rem; }
    .feature-row.grid--2 .icon-tile { width: 38px; height: 38px; flex: 0 0 38px; }
    .feature-row.grid--2 .icon-tile .ico { width: 19px; height: 19px; }
    .feature-row.grid--2 .feature__title { font-size: .88rem; margin-bottom: .15rem; }
    .feature-row.grid--2 .feature__desc {
        font-size: .78rem; line-height: 1.4;
        display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .hero__image { aspect-ratio: 16 / 10; }

    /* Category/overview card grids (Home categories, Solutions specialties, Services, Brands —
       grid--6/grid--5) were falling back to ONE column on phones (auto-fit minmax(210px,1fr)
       doesn't fit 2 across a 343px content width), turning a 6-card section into a very long
       single stack. Force 2 columns with a compact card so it reads as a real grid and the
       section is roughly half the length. (product-grid — the richer product cards with brand/
       model/badges — keeps its existing single-column mobile treatment; not touched here.) */
    .grid--6, .grid--5 { grid-template-columns: repeat(2, 1fr); gap: .7rem; }
    /* Solutions/Brands index reuse .product-grid's filter/pager JS on these same lighter grid--6
       cards, and .product-grid[data-filter-grid]:not(.is-list) forces a single column at <=520px
       (higher specificity, meant for Products' richer cards) — out-specify it here so those two
       pages get the same compact 2-column treatment instead of the long single stack. */
    .grid--6.product-grid[data-filter-grid]:not(.is-list),
    .grid--5.product-grid[data-filter-grid]:not(.is-list) { grid-template-columns: repeat(2, 1fr); }
    .grid--6 .card, .grid--5 .card { padding: .8rem; border-radius: 16px; gap: .4rem; }
    .grid--6 .card__thumb, .grid--5 .card__thumb { margin-bottom: .2rem; }
    .grid--6 .card__thumb .ico, .grid--5 .card__thumb .ico { width: 34px; height: 34px; }
    .grid--6 .card__title, .grid--5 .card__title { font-size: .82rem; line-height: 1.25; gap: .35rem; }
    .grid--6 .card__title .ico, .grid--5 .card__title .ico { width: 15px; height: 15px; }
    .grid--6 .card__desc, .grid--5 .card__desc {
        font-size: .74rem; line-height: 1.4;
        /* Clamp so a long description can't make one card (and its row) much taller than the rest. */
        display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .grid--6 .card__link, .grid--5 .card__link { font-size: .74rem; }

    /* Trust/feature band (Home, Solutions, Brands — "Trusted Quality / Compliance & Safety /
       Customer Focused / Years of Excellence"): was one column of 4 wide, uniform-navy rows
       with a big 54px icon each (~680px tall on a 375px screen) — looked oversized and
       monotonous. 2x2 compact grid instead, smaller icon, icon-above-text (matches the
       .feature-row.grid--2 mobile pattern already used elsewhere), and alternating navy/red
       icon color so the four items read as distinct, not a repeated block. */
    .feature-row.grid--4 { grid-template-columns: repeat(2, 1fr); gap: 1.1rem .8rem; }
    .feature-row.grid--4 .feature { flex-direction: column; gap: .5rem; }
    .feature-row.grid--4 .icon-tile--lg { width: 44px; height: 44px; }
    .feature-row.grid--4 .icon-tile--lg .ico { width: 22px; height: 22px; }
    .feature-row.grid--4 .feature:nth-child(even) .icon-tile--lg {
        background: var(--to-gradient-primary); box-shadow: 0 8px 20px rgba(237, 28, 36, .20);
    }
    .feature-row.grid--4 .feature__title { font-size: .88rem; }
    .feature-row.grid--4 .feature__desc {
        font-size: .78rem; line-height: 1.4;
        /* Clamp so the longest description can't stretch its row taller than the others. */
        display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    }
}
@media (max-width: 520px) {
    /* Footer was forced to a single stacked column here, so its 4 nav columns (Company/
       Products/Support/Contact — 5 links each, desktop-size text/padding) ran one under the
       other for ~1000px alone, on top of the brand block — ~1.8 screens of footer. Keep the
       768px tier's 2-column layout (2 rows of 2 instead of 4 rows of 1) and shrink the type/
       padding/gaps site-wide-footer-only, so the whole footer is roughly half as tall. */
    .footer__inner { padding-block: 2rem 1.25rem; }
    .footer__grid { grid-template-columns: 1fr 1fr; gap: 1.75rem 1rem; }
    .footer__brand { grid-column: 1 / -1; }
    .footer__tag { font-size: .92rem; margin-top: .7rem; }
    .footer__cta { max-width: none; padding: .85rem 1rem; }
    .footer__cta-text { font-size: .95rem; }
    .footer__cta-btn { font-size: .9rem; }
    .socials { margin-top: .9rem; }
    .footer__col h4 { font-size: 1rem; margin-bottom: .7rem; }
    .footer__col a { font-size: .88rem; padding: .4rem 0; }
    .footer__contact li { font-size: .88rem; padding: .4rem 0; gap: .45rem; }
    .footer__contact li a { min-height: 0; }
    .footer { border-radius: 28px 28px 0 0; }
    .footer__copyright-inner { flex-direction: column; justify-content: center; text-align: center; gap: .55rem; }
    /* .footer__legal (Privacy/Terms/Cookie) has no justify-content, so on the column mobile
       layout above it renders as a full-width flex row packed flush-left — when it wraps to a
       2nd line ("Cookie Policy" alone), that line sits at the left edge while the copyright
       line above and "Designed by" line below are text-align:center, reading as misaligned. */
    .footer__legal { justify-content: center; gap: .9rem 1.1rem; }
    /* Services stat band: 2-up instead of a long single-column list of near-identical rows. */
    .statband { grid-template-columns: repeat(2, 1fr); gap: .9rem 1rem; }
    .statband .stat-cell { gap: .6rem; }
    .statband .stat-cell .num { font-size: 1.3rem; }
    .statband .stat-cell .lbl { font-size: .82rem; }
    .statband .stat-cell .cap { font-size: .7rem; }
    /* Breadcrumb: tighter tracking + size so the trail fits neatly on phones. */
    .breadcrumb { font-size: .72rem; letter-spacing: .06em; gap: .25rem .4rem; margin-bottom: 1rem; }
    /* Brand lockup: a more prominent icon with a compact wordmark + tighter chip, so the icon
       reads bigger while the whole lockup takes less nav width — without growing the pill
       height (trim vertical padding to make room for the taller icon). */
    .nav { padding: 5px 8px; }
    .nav__brand { padding: 2px 8px !important; }
    .brand-lockup__icon { height: 42px !important; }
    .brand-lockup__text { margin-inline-start: 5px !important; }
    .brand-lockup__primary { font-size: .66rem; letter-spacing: .07em; }
    /* Stop the tiny "C A N A D A" from being justified edge-to-edge (looks sparse at this size). */
    .brand-lockup__secondary { text-align-last: auto; text-align: center; font-size: .42rem; letter-spacing: .04em; }
    /* Hero stat tiles: the 768px tier's 2-column grid (below) now fits cleanly at every phone
       width — the grid-item min-width:0 fix elsewhere stopped the wide label text from forcing
       the track past its 2-col share, which is what forced this to 1 column previously. Keep
       2 columns (much shorter hero) but shrink to a compact size for the narrower half-width. */
    .stat { padding: .8rem .7rem; gap: .55rem; }
    .stat__ic { width: 36px; height: 36px; flex: 0 0 36px; }
    .stat__ic .ico { width: 17px; height: 17px; }
    .stat__value { font-size: 1.15rem; }
    .stat__label { font-size: .72rem; line-height: 1.25; }
    /* Stack hero CTAs full-width so the gradient pill (with its arrow puck) never truncates. */
    .hero__cta { flex-direction: column; align-items: stretch; }
    .hero__cta .btn { width: 100%; }
    .brand__name { font-size: 1.12rem; }
}