/*
Theme Name: Hindex Group
Theme URI: https://hindexgroup.com
Description: Custom theme faithfully reproducing the Hindex Group Shopify (Horizon) site. Informational industrial-gas company site. Content is editable through the WordPress admin (Hindex Site Settings + per-page fields via the hindex-core plugin). Not a page builder.
Author: Hindex Migration
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.0.1
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: hindex-group
*/

/* ==========================================================================
   Design tokens — ported from Shopify Horizon config/settings_data.json
   Fonts: body/subheading/accent = Inter, headings = Manrope
   Type scale: H1 56 / H2 48 / H3 32 / H4 24 / H5 14 / H6 12 ; body 14
   ========================================================================== */
:root{
  --hx-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --hx-font-heading: 'Manrope', var(--hx-font-body);
  --hx-font-subheading: 'Inter', var(--hx-font-body);
  --hx-font-accent: 'Inter', var(--hx-font-body);
  --hx-weight-body: 400;
  --hx-weight-subheading: 500;
  --hx-weight-heading: 400;
  --hx-weight-accent: 700;

  --hx-h1: 56px; --hx-h2: 48px; --hx-h3: 32px; --hx-h4: 24px; --hx-h5: 14px; --hx-h6: 12px;
  --hx-body: 14px;
  --hx-line-body: 1.6;          /* Horizon body-loose (paragraph) — was 1.7 */
  --hx-line-display-tight: 1;   /* Horizon display-tight (h1/h4) — was 1.1 */
  --hx-line-display-normal: 1.1;/* Horizon display-normal (h2/h3) — was 1.2 */
  --hx-line-display-loose: 1.2; /* Horizon display-loose (h5/h6) */

  --hx-fg: #333333;
  --hx-heading: #1a1a1a;
  --hx-bg: #ffffff;
  --hx-scheme-1-bg: #020202;
  --hx-scheme-2-bg: #1a1a1a;
  --hx-scheme-3-bg: #f5f3ef;
  --hx-scheme-4-bg: #f5f5f5;
  --hx-scheme-5-bg: #161616;
  --hx-helium-blue: #2f4fff;

  /* Header / footer (dark, from live) */
  --hx-header-h: 80px;
  --hx-header-dark: #131111;
  --hx-footer-bg: #171414;
  --hx-newsletter-bg: #020202;

  --hx-btn-bg: #000000;
  --hx-btn-fg: #ffffff;
  --hx-btn-hover-bg: #333333;
  --hx-btn-radius: 14px;

  --hx-card-radius: 4px;
  --hx-input-radius: 4px;
  --hx-input-border: #dfdfdf;

  --hx-page-width: 1600px;
  --hx-content-width: 1200px;
  --hx-gutter: 40px;
}

/* Reset-ish base */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--hx-font-body);
  font-weight:var(--hx-weight-body);
  font-size:var(--hx-body);
  line-height:var(--hx-line-body);
  color:var(--hx-fg);
  background:var(--hx-bg);
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
a:hover{text-decoration:none;}

h1,h2,h3,h4,h5,h6{
  font-family:var(--hx-font-heading);
  font-weight:var(--hx-weight-heading);
  color:var(--hx-heading);
  line-height:var(--hx-line-display-normal);
  margin:0 0 .5em;
}
h1{font-size:var(--hx-h1);line-height:var(--hx-line-display-tight);}
h2{font-size:var(--hx-h2);}
h3{font-size:var(--hx-h3);}
h4{font-size:var(--hx-h4);line-height:var(--hx-line-display-tight);}
h5{font-size:var(--hx-h5);font-family:var(--hx-font-subheading);font-weight:var(--hx-weight-subheading);line-height:var(--hx-line-display-loose);}
h6{font-size:var(--hx-h6);font-family:var(--hx-font-subheading);font-weight:var(--hx-weight-subheading);line-height:var(--hx-line-display-loose);}

/* Accessibility helpers */
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.hx-skip-link{position:absolute;left:-9999px;top:0;z-index:2000;background:#fff;color:#000;padding:10px 16px;}
.hx-skip-link:focus{left:8px;top:8px;}
.hx-no-scroll{overflow:hidden;}

/* Layout helpers */
.hx-page-width{max-width:var(--hx-page-width);margin-inline:auto;padding-inline:var(--hx-gutter);}
.hx-content-width{max-width:var(--hx-content-width);margin-inline:auto;padding-inline:var(--hx-gutter);}

/* Buttons */
.hx-btn{
  display:inline-block;font-family:var(--hx-font-body);font-weight:600;
  padding:14px 40px;border-radius:var(--hx-btn-radius);
  background:var(--hx-btn-bg);color:var(--hx-btn-fg);border:0;cursor:pointer;
  transition:background .2s ease;line-height:1;
}
.hx-btn:hover{background:var(--hx-btn-hover-bg);}
.hx-btn--sm{padding:11px 22px;font-size:13px;}
.hx-btn--secondary{background:transparent;color:var(--hx-heading);border:1px solid var(--hx-heading);}

/* ==========================================================================
   HEADER
   ========================================================================== */
.hx-header{position:sticky;top:0;z-index:1000;transition:transform .3s ease;}
.hx-header.is-hidden{transform:translateY(-100%);}
.hx-header__bar{background:var(--hx-header-dark);transition:background .3s ease;}
.hx-header__inner{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  min-height:var(--hx-header-h);gap:24px;
}
.hx-logo{justify-self:start;}
.hx-logo__img{height:72px;width:auto;max-width:46vw;}/* live logo_height=72 → 288×72 */
.hx-logo__text{font-family:var(--hx-font-heading);font-size:22px;color:#fff;}

/* Desktop nav (centered) */
.hx-nav--desktop{justify-self:center;}
.hx-nav--desktop .hx-menu{list-style:none;display:flex;gap:34px;margin:0;padding:0;}
.hx-nav--desktop .hx-menu li{position:relative;}
.hx-nav--desktop .hx-menu>li>a{
  display:inline-flex;align-items:center;gap:6px;
  color:#fff;opacity:.72;font-size:16px;font-weight:400;line-height:1;
  padding:8px 0;transition:opacity .2s ease;
}
.hx-nav--desktop .hx-menu>li>a:hover,
.hx-nav--desktop .hx-menu>.current-menu-item>a,
.hx-nav--desktop .hx-menu>.current-menu-parent>a{opacity:1;}
.hx-nav--desktop .menu-item-has-children>a::after{content:"";width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.8;}

/* Desktop dropdown */
.hx-nav--desktop .sub-menu{
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);
  min-width:200px;background:var(--hx-header-dark);list-style:none;margin:0;padding:10px 0;
  box-shadow:0 20px 40px rgba(0,0,0,.35);opacity:0;visibility:hidden;transition:opacity .2s ease,transform .2s ease;
}
.hx-nav--desktop li:hover>.sub-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.hx-nav--desktop .sub-menu a{display:block;padding:11px 24px;color:#fff;opacity:.8;font-size:15px;white-space:nowrap;}
.hx-nav--desktop .sub-menu a:hover{opacity:1;background:rgba(255,255,255,.06);}

/* Header actions */
.hx-header__actions{justify-self:end;display:flex;align-items:center;gap:18px;}
.hx-icon-btn{display:inline-flex;align-items:center;justify-content:center;background:none;border:0;color:#fff;cursor:pointer;padding:6px;font-size:22px;line-height:1;}
.hx-icon-btn:hover{opacity:.8;}
.hx-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:34px;height:34px;background:none;border:0;cursor:pointer;justify-self:start;}
.hx-burger span{display:block;height:2px;width:24px;background:#fff;transition:.2s;}

/* Transparent overlay on the homepage hero */
body.hx-transparent-header .hx-header{position:fixed;left:0;right:0;}
body.hx-transparent-header .hx-header__bar{background:transparent;}
body.hx-transparent-header .hx-header.is-solid .hx-header__bar{background:var(--hx-header-dark);}

/* Interior pages: header is in-flow (sticky) so content already clears it. */

/* Search overlay */
.hx-search{position:absolute;top:100%;left:0;right:0;background:var(--hx-header-dark);border-top:1px solid rgba(255,255,255,.08);}
.hx-search__inner{display:flex;align-items:center;gap:16px;padding-block:22px;}
.hx-search__form{display:flex;flex:1;gap:12px;}
.hx-search__form input[type=search]{flex:1;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.3);color:#fff;font-size:20px;padding:8px 0;outline:none;}
.hx-search__form input[type=search]::placeholder{color:rgba(255,255,255,.5);}
.hx-search__close{font-size:28px;}

/* Mobile drawer */
.hx-drawer{position:fixed;inset:0;z-index:1100;}
.hx-drawer[hidden]{display:none;}
.hx-drawer__scrim{position:absolute;inset:0;z-index:1;background:rgba(0,0,0,.55);border:0;cursor:pointer;}
.hx-drawer__panel{
  position:absolute;top:0;left:0;bottom:0;z-index:2;width:min(86vw,360px);
  background:var(--hx-header-dark);color:#fff;padding:20px 24px;overflow:auto;
  transform:translateX(-100%);transition:transform .3s ease;
}
.hx-drawer.is-open .hx-drawer__panel{transform:none;}
.hx-drawer__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.hx-drawer__logo .hx-logo__img{width:150px;}
.hx-menu--accordion{list-style:none;margin:0;padding:0;}
.hx-menu--accordion>li{border-bottom:1px solid rgba(255,255,255,.1);}
.hx-menu--accordion>li>a{display:flex;justify-content:space-between;align-items:center;padding:16px 0;color:#fff;font-size:17px;}
.hx-menu--accordion .menu-item-has-children>a::after{content:"+";font-size:20px;opacity:.7;}
.hx-menu--accordion .menu-item-has-children.is-open>a::after{content:"–";}
.hx-menu--accordion .sub-menu{list-style:none;margin:0;padding:0 0 10px 14px;display:none;}
.hx-menu--accordion li.is-open>.sub-menu{display:block;}
.hx-menu--accordion .sub-menu a{display:block;padding:11px 0;color:#fff;opacity:.8;font-size:15px;}
.hx-drawer__cta{display:block;text-align:center;margin-top:22px;}

/* ==========================================================================
   HOMEPAGE (v0.3.0) — exact editable sections
   Shared: reveal-on-scroll + eyebrow label
   ========================================================================== */
.hx-eyebrow{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:#666;font-weight:500;margin:0 0 20px;}
/* Reveal is progressive: content is visible by default; JS adds .hx-reveal-ready
   to <html>, which hides items until they scroll into view. No JS = visible. */
.hx-reveal-ready [data-hx-reveal]{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease;}
.hx-reveal-ready [data-hx-reveal].is-revealed{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.hx-reveal-ready [data-hx-reveal]{opacity:1;transform:none;transition:none;}}

/* --- 1. HERO --------------------------------------------------------------- */
.hx-hero{position:relative;min-height:calc(100vh - var(--hx-header-h));min-height:calc(100svh - var(--hx-header-h));display:flex;align-items:center;color:#fff;overflow:hidden;}/* live hero = viewport − header */
.hx-hero__media{position:absolute;inset:0;z-index:0;}
.hx-hero__media img,.hx-hero__img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;}
.hx-hero__scrim{position:absolute;inset:0;z-index:1;background:var(--hx-hero-overlay,rgba(0,0,0,.7));}
.hx-hero__inner{position:relative;z-index:2;width:100%;}
.hx-hero__content{max-width:640px;padding-block:calc(var(--hx-header-h) + 20px) 40px;}
.hx-hero__title{font-family:var(--hx-font-heading);font-weight:700;font-size:clamp(34px,5vw,56px);line-height:1.05;color:#fff;margin:0 0 22px;}
.hx-hero__line{display:block;}
.hx-hero__hl{color:var(--hx-helium-blue);}
.hx-hero__text{font-size:clamp(16px,1.4vw,18px);line-height:1.6;color:rgba(255,255,255,.9);max-width:540px;margin:0;}

/* --- 2. INDUSTRIAL EDITORIAL ----------------------------------------------- */
.hx-editorial{padding:80px 0;}
.hx-editorial__wrap{max-width:1600px;margin-inline:auto;padding-inline:clamp(24px,6vw,90px);display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:80px;align-items:start;}
.hx-editorial__heading{font-size:clamp(34px,3.4vw,52px);font-weight:700;color:#1a1a1a;line-height:1.05;margin:0 0 16px;}
.hx-editorial__label{margin:0;}
.hx-editorial__mission{font-size:17px;line-height:1.6;color:#333;margin:0 0 44px;max-width:620px;}
.hx-editorial__grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,auto);grid-auto-flow:column;column-gap:50px;row-gap:35px;}
.hx-editorial__item-heading{font-size:18px;font-weight:600;color:#1a1a1a;line-height:1.4;margin:0 0 8px;font-family:var(--hx-font-body);}
.hx-editorial__item-text{font-size:14px;line-height:1.7;color:#666;margin:0;}

/* --- 3. ABOUT / WHO WE ARE ------------------------------------------------- */
.hx-about{background:#fff;}
.hx-about__grid{display:grid;grid-template-columns:1fr 1fr;min-height:900px;}
.hx-about__media{grid-column:2;grid-row:1;position:relative;overflow:hidden;}
.hx-about__media img,.hx-about__img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;}
.hx-about__content{grid-column:1;grid-row:1;display:flex;flex-direction:column;justify-content:center;padding:80px clamp(24px,5vw,72px);}
.hx-about__inner,.hx-about__content>*{max-width:640px;}
.hx-about__heading{font-size:clamp(30px,3.2vw,48px);font-weight:700;line-height:1.1;letter-spacing:.02em;color:#000;margin:0 0 10px;}
.hx-about__label{font-size:20px;font-weight:500;color:#666;margin:0 0 30px;}
.hx-about__body p{font-size:16px;line-height:1.7;color:#333;margin:0 0 25px;}
.hx-about__body p:last-child{margin-bottom:0;}

/* --- 4. PRODUCT PORTFOLIO CTA ---------------------------------------------- */
.hx-portfolio{padding:125px 0;text-align:center;}/* live airy portfolio band */
.hx-portfolio__inner{max-width:1000px;margin-inline:auto;}
.hx-portfolio__heading{font-size:clamp(30px,3.4vw,48px);font-weight:900;color:#000;line-height:1.1;margin:0 0 14px;}
.hx-portfolio__sub{font-size:20px;font-weight:700;color:#666;margin:0 0 24px;}
.hx-portfolio__desc{font-size:16px;color:#555;line-height:1.7;max-width:760px;margin:0 auto 36px;}
.hx-portfolio__actions{margin:0;}
.hx-btn--square{border-radius:4px;}
.hx-portfolio__btn{font-size:16px;padding:16px 40px;}

/* --- 5. FOUR-SERVICE GRID -------------------------------------------------- */
.hx-services{padding:150px 0;}/* live airy 2×2 service grid */
.hx-services__wrap{max-width:1200px;margin-inline:auto;padding-inline:clamp(24px,5vw,50px);}
.hx-services__grid{display:grid;grid-template-columns:1fr 1fr;column-gap:60px;row-gap:104px;}
.hx-service{display:flex;flex-direction:column;align-items:flex-start;}
.hx-service__icon{margin:0 0 20px;}
.hx-service__icon img{max-width:56px;height:auto;}
.hx-service__title{font-size:24px;font-weight:700;color:#1a1a1a;line-height:1.3;margin:0 0 16px;font-family:var(--hx-font-body);}
.hx-service__text{font-size:15px;color:#4a4a4a;line-height:1.6;margin:0 0 24px;}
.hx-service__divider{display:block;width:100%;height:1px;background:#d4d0c8;margin:0 0 24px;}
.hx-service__link{display:inline-flex;align-items:center;gap:14px;font-size:14px;color:#1a1a1a;transition:color .2s ease;}
.hx-service__arrow{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid currentColor;border-radius:50%;transition:background .2s ease,color .2s ease;}
.hx-service__link:hover{color:#4a4a4a;}
.hx-service__link:hover .hx-service__arrow{background:#1a1a1a;color:#fff;}

/* --- 6. REQUEST A QUOTE FORM ----------------------------------------------- */
.hx-quote{background:#1a1a1a;color:#fff;padding:145px 0;}
.hx-quote__wrap{max-width:1200px;margin-inline:auto;padding-inline:clamp(24px,5vw,40px);}
.hx-quote__head{text-align:center;margin:0 0 50px;}
.hx-quote__heading{font-size:clamp(34px,5vw,56px);font-weight:700;color:#fff;margin:0 0 16px;}/* live quote headings are 700 (verified on PL + Helium) */
.hx-quote__sub{font-size:18px;line-height:1.5;color:rgba(255,255,255,.8);margin:0 auto;max-width:640px;}
.hx-quote__msg{max-width:820px;margin:0 auto 24px;padding:16px 22px;border-radius:12px;font-size:15px;text-align:center;}
.hx-quote__msg--success{background:rgba(255,255,255,.2);color:#fff;}
.hx-quote__msg--error{background:rgba(255,100,100,.22);color:#fff;}
.hx-quote__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 24px;}
.hx-field{display:flex;flex-direction:column;}
.hx-field--full{grid-column:1 / -1;}
.hx-field label{font-size:14px;font-weight:500;color:#fff;margin:0 0 8px;}
.hx-req{color:rgba(255,255,255,.85);}
.hx-quote input[type=text],.hx-quote input[type=email],.hx-quote input[type=tel],.hx-quote select,.hx-quote textarea{
  width:100%;background:rgba(255,255,255,.10);border:1.5px solid rgba(255,255,255,.35);border-radius:30px;
  padding:15px 20px;color:#fff;font-family:var(--hx-font-body);font-size:16px;line-height:1.3;outline:none;transition:border-color .2s ease,background .2s ease;
}
.hx-quote textarea{border-radius:20px;min-height:120px;resize:vertical;}
.hx-quote input::placeholder,.hx-quote textarea::placeholder{color:rgba(255,255,255,.5);}
.hx-quote input:focus,.hx-quote select:focus,.hx-quote textarea:focus{border-color:rgba(255,255,255,.75);background:rgba(255,255,255,.15);}
.hx-quote select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='1.6' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 18px center;padding-right:44px;cursor:pointer;}
.hx-quote select option{color:#1a1a1a;}
.hx-phone{display:flex;gap:10px;}
.hx-phone__code{flex:0 0 120px;width:120px !important;padding-inline:14px 30px !important;background-position:right 12px center !important;}
.hx-phone__num{flex:1 1 auto;min-width:0;}
.hx-quote__privacy{display:flex;align-items:flex-start;gap:12px;margin:24px 0 0;font-size:13px;line-height:1.5;color:rgba(255,255,255,.8);cursor:pointer;}
.hx-quote__privacy input{flex:0 0 auto;width:18px;height:18px;margin-top:1px;accent-color:#fff;}
.hx-quote__submit{text-align:center;margin-top:30px;}
.hx-quote__btn{background:#fff;color:#4a7c8a;border-radius:30px;padding:18px 40px;min-width:250px;font-size:16px;font-weight:600;}
.hx-quote__btn:hover{background:#f5f5f5;color:#4a7c8a;}
.hx-hp{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden;}

/* --- Homepage responsive --------------------------------------------------- */
@media (max-width:990px){
  .hx-editorial{padding:72px 0;}
  .hx-editorial__wrap{grid-template-columns:1fr;gap:36px;}
  .hx-editorial__mission{margin-bottom:32px;}
  .hx-about__grid{grid-template-columns:1fr;min-height:0;}
  .hx-about__media{grid-column:1;grid-row:1;min-height:320px;max-height:60vh;}
  .hx-about__content{grid-column:1;grid-row:2;padding:48px clamp(24px,6vw,48px);}
  .hx-quote__grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:749px){
  .hx-editorial__grid{grid-template-columns:1fr;grid-auto-flow:row;grid-template-rows:none;row-gap:28px;}
  .hx-services__grid{grid-template-columns:1fr;row-gap:44px;}
  .hx-quote{padding:64px 0;}
  /* live phone form rhythm: 62px inputs, 54px field step (24 gap + label) */
  .hx-quote__grid{gap:24px;}
  .hx-quote input[type=text],.hx-quote input[type=email],.hx-quote input[type=tel],.hx-quote select{padding:19px 20px;}
  .hx-quote__grid{grid-template-columns:1fr;}
  .hx-hero__content{padding-block:calc(var(--hx-header-h) + 10px) 24px;}
}
@media (max-width:600px){
  .hx-editorial,.hx-portfolio,.hx-services{padding:56px 0;}
  .hx-quote__btn{width:100%;min-width:0;}
  /* Live narrows the editorial + services list sections to a ~210px column on
     phones (≈90px side padding), so their text wraps and stacks like live. */
  .hx-editorial__wrap,.hx-services__wrap{padding-inline:clamp(40px,23vw,90px);}
  .hx-editorial__heading{font-size:28px;}
}

/* ==========================================================================
   PRODUCT / SERVICE PAGES (v0.4.0) — Private Label, Technical Gases, Helium
   ========================================================================== */

/* --- Shared: breadcrumb hero (ai_gen_block_6cb64b2) ------------------------ */
.hx-phero{position:relative;min-height:550px;display:flex;align-items:center;color:#fff;overflow:hidden;background:#111;}/* bare .hx-phero = Private Label; live PL hero = 550 */
.hx-phero__media{position:absolute;inset:0;z-index:0;}
.hx-phero__media img,.hx-phero__img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;}
.hx-phero__img--mobile{display:none;}
.hx-phero__scrim{position:absolute;inset:0;z-index:1;}
.hx-phero__inner{position:relative;z-index:2;width:100%;}
.hx-phero__content{max-width:700px;padding-block:76px 60px;}/* solid header sits above the hero (in flow) — no overlay compensation */
.hx-phero__crumbs{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:rgba(255,255,255,.85);margin:0 0 26px;}
.hx-phero__crumbs a{color:rgba(255,255,255,.85);transition:color .2s ease;}
.hx-phero__crumbs a:hover{color:#fff;}
.hx-phero__crumb-sep{opacity:.6;}
.hx-phero__title{font-family:var(--hx-font-heading);font-weight:700;font-size:48px;line-height:1.1;letter-spacing:-.02em;color:#fff;margin:0 0 20px;max-width:700px;}/* live PL: fixed 48px to <=768, 32px phone */
/* Heroes with a subheading (Technical Gases / Helium type) run a larger title
   + taller band to match the live d0aa369 hero. Does not affect the PL hero. */
.hx-phero--wsub{min-height:700px;}
/* Live TG/Helium heroes sit in a narrower centered container (content left ~160
   at 1440) with a larger 64px title. */
.hx-phero--wsub .hx-phero__inner{max-width:1200px;}
.hx-phero--wsub .hx-phero__title{font-size:64px;line-height:1.1;max-width:600px;}/* live holds 64px to ≤1024, steps to 40px on mobile (≤768) */
.hx-phero__subheading{font-family:var(--hx-font-body);font-size:clamp(17px,1.5vw,20px);font-weight:600;color:#fff;margin:0 0 22px;max-width:650px;}
.hx-phero__text{max-width:650px;}
.hx-phero__text p{font-size:clamp(14px,1.2vw,16px);line-height:1.6;color:rgba(255,255,255,.9);margin:0 0 16px;}
.hx-phero__text p:last-child{margin-bottom:0;}
.hx-phero__btn{display:inline-flex;align-items:center;gap:12px;margin-top:32px;padding:12px 22px;border:1px solid #fff;border-radius:30px;color:#fff;font-size:14px;line-height:1;transition:background .2s ease;}
.hx-phero__btn:hover{background:rgba(255,255,255,.12);}
.hx-phero__btn-arrow{display:inline-flex;}

/* --- Button: light outline on dark ---------------------------------------- */
.hx-btn--outline-light{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.7);}
.hx-btn--outline-light:hover{background:rgba(255,255,255,.12);}

/* --- Private Label: intro (Tailored solutions, dark, centred) ------------- */
.hx-plintro{background:#161616;color:#fff;padding:90px 0;text-align:center;}
.hx-plintro__wrap{max-width:1360px;margin-inline:auto;padding-inline:clamp(24px,5vw,60px);}
.hx-plintro__title{font-family:var(--hx-font-heading);font-size:clamp(36px,3.6vw,48px);font-weight:700;color:#fff;line-height:1.15;margin:0 0 22px;}/* live phone floor 36 */
.hx-plintro__sub{font-family:var(--hx-font-body);font-size:clamp(19px,1.7vw,24px);font-weight:700;color:#fff;margin:0 0 26px;}
.hx-plintro__body{font-size:16px;line-height:1.8;color:rgba(255,255,255,.78);margin:0 auto 34px;}
.hx-plintro__actions{margin:0;}

/* --- Private Label: capabilities (image + rich list) ---------------------- */
.hx-plcap__grid{display:grid;grid-template-columns:1fr 1fr;min-height:600px;}
.hx-plcap__content{background:#333333;color:#fff;display:flex;align-items:center;padding:80px clamp(24px,5vw,72px);}
.hx-plcap__inner{max-width:600px;}
.hx-plcap__head{font-family:var(--hx-font-heading);font-size:clamp(32px,3vw,40px);font-weight:700;color:#fff;line-height:1.1;margin:0 0 14px;}/* live phone floor 32 */
.hx-plcap__sub{font-size:18px;font-weight:500;color:#dfdfdf;margin:0 0 22px;}
.hx-plcap__body{font-size:16px;line-height:1.7;color:#fff;}
.hx-plcap__body p{margin:0 0 16px;}
.hx-plcap__body ul{margin:16px 0;padding-left:20px;list-style:disc;}
.hx-plcap__body li{margin:0 0 10px;}
.hx-plcap__body a{color:#fff;text-decoration:underline;font-weight:700;}
.hx-plcap__body a:hover{opacity:.85;}
.hx-plcap__media{position:relative;overflow:hidden;background:#fff;}
.hx-plcap__media img,.hx-plcap__img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;}
.hx-plcap__img--mobile{display:none;}

/* --- Private Label: brands ------------------------------------------------- */
.hx-plbrand{background:#666666;color:#fff;padding:120px 0;}
.hx-plbrand__wrap{max-width:var(--hx-content-width);margin-inline:auto;padding-inline:var(--hx-gutter);}
/* PL's quote follows the brands band; live's PL quote instance is compact
   (section ~749 @1440) unlike the homepage quote — scope the padding to PL
   only so the shared .hx-quote (home/helium/contact) is untouched. */
.hx-plbrand + .hx-quote{padding:40px 0;}
.hx-plbrand__head{font-family:var(--hx-font-heading);font-size:clamp(36px,4.6vw,60px);font-weight:700;color:#fff;line-height:1.1;margin:0 0 20px;}/* live phone floor 36 */
.hx-plbrand__sub{font-size:20px;font-weight:500;color:#dfdfdf;margin:0 0 26px;}
.hx-plbrand__para{font-size:16px;line-height:1.8;color:#fff;max-width:800px;margin:0;}

/* --- Product/service responsive ------------------------------------------- */
@media (max-width:990px){
  .hx-plcap__grid{grid-template-columns:1fr;}
  .hx-plcap__media{order:-1;min-height:360px;}
  .hx-plcap__content{padding:56px clamp(24px,6vw,48px);}
  .hx-plbrand{padding:80px 0;}
}
@media (max-width:749px){
  .hx-phero{min-height:500px;}
  .hx-phero__media:has(.hx-phero__img--mobile) .hx-phero__img--desktop{display:none;}
  .hx-phero__media:has(.hx-phero__img--mobile) .hx-phero__img--mobile{display:block;}
  .hx-plcap__media:has(.hx-plcap__img--mobile) .hx-plcap__img--desktop{display:none;}
  .hx-plcap__media:has(.hx-plcap__img--mobile) .hx-plcap__img--mobile{display:block;}
  .hx-plintro{padding:64px 0;}
}
@media (max-width:768px){
  /* live steps the subheading hero title 64px -> 40px at tablet/phone */
  .hx-phero--wsub .hx-phero__title{font-size:40px;}
  .hx-contact-hero h1{font-size:40px;}/* live 64 -> 40 at <=768 */
}
@media (max-width:600px){
  .hx-plbrand{padding:48px 0;}/* live brand block ≈ 489 @390 */
  .hx-plintro{padding:40px 0;}/* live intro pad-top ≈ 37 @390 */
  .hx-phero__content{padding-block:44px;}
  .hx-phero__title{font-size:32px;}/* live PL hero phone size */
}

/* ==========================================================================
   TECHNICAL GASES (v0.4.0)
   ========================================================================== */
/* --- Range: dark title band + light 2-col intro ---------------------------- */
.hx-tgrange__dark{background:#666666;color:#fff;padding:80px 0;}
/* Live centers the dark band title in a 1200px container (content left ~120). */
.hx-tgrange__darkwrap{max-width:1280px;}
.hx-tgrange__eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#fff;font-weight:600;margin:0 0 20px;}
.hx-tgrange__title{font-family:var(--hx-font-heading);font-size:56px;font-weight:400;color:#fff;line-height:1.2;letter-spacing:-.02em;margin:0;max-width:none;}/* live: fixed 56px to ≤768, 34px on phone */
.hx-tgrange__light{background:#f5f5f5;color:#333;padding:80px 0;}
.hx-tgrange__lightwrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:start;}
.hx-tgrange__cathead{font-family:var(--hx-font-heading);font-size:28px;font-weight:300;color:#111;line-height:1.1;margin:0;}/* live: 28px, 18px phone */
.hx-tgrange__col p{font-size:16px;line-height:1.8;color:#333;margin:0 0 18px;}
.hx-tgrange__cta{margin:6px 0 0;}
.hx-tgrange__cta a{color:#000;font-weight:700;text-decoration:underline;text-underline-offset:3px;}
.hx-tgrange__cta a:hover{opacity:.7;}

/* --- Portfolio: dark, heading left / rich content right -------------------- */
.hx-tgport{background:#2a2a2a;color:#dfdfdf;}
.hx-tgport__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);padding-block:48px;align-items:start;}
.hx-tgport__head{font-family:var(--hx-font-heading);font-size:44px;font-weight:400;color:#fff;line-height:1.1;letter-spacing:-.02em;margin:0;}/* live: 44px, 26px phone */
.hx-tgport__body{font-size:14px;line-height:1.6;color:#dfdfdf;}
.hx-tgport__body p{margin:0 0 16px;}
.hx-tgport__body strong{color:#fff;}
.hx-tgport__body ul{margin:16px 0;padding-left:20px;list-style:disc;}
.hx-tgport__body li{margin:0 0 12px;}

/* --- Gas tabs -------------------------------------------------------------- */
.hx-tgtabs{background:#fff;padding:60px 0;}
.hx-tgtabs__wrap{display:grid;grid-template-columns:280px 1fr;gap:clamp(32px,4.2vw,60px);align-items:start;}
.hx-tgtabs__nav{display:flex;flex-direction:column;gap:14px;}
.hx-tgtabs__tab{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;
  background:#fff;color:#000;border:1px solid #e6e6e6;border-radius:10px;padding:16px 20px;font-family:var(--hx-font-body);font-size:15px;font-weight:500;cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease;}
.hx-tgtabs__tab:hover{background:#f5f5f5;border-color:#000;}
.hx-tgtabs__tab[aria-selected="true"]{background:#000;color:#fff;border-color:#000;}
.hx-tgtabs__tabarrow{display:inline-flex;flex:0 0 auto;}
.hx-tgtabs__tab:focus-visible{outline:2px solid #000;outline-offset:2px;}
.hx-tgtabs__tab[aria-selected="true"]:focus-visible{outline-color:#000;box-shadow:0 0 0 2px #fff inset;}
.hx-tgtabs__panel{max-width:none;}
/* Live layout is 3-column: nav | large gas heading | content. Put the heading
   and content side by side (heading col ~440px so it wraps to two lines). */
.hx-tgtabs__cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,4vw,60px);align-items:start;}
.hx-tgtabs__heading{font-family:var(--hx-font-heading);font-size:48px;font-weight:400;color:#000;line-height:1.2;letter-spacing:-.02em;margin:0;}/* live: 48px, 34px phone */
.hx-tgtabs__content{font-size:14px;line-height:1.6;color:#111;}
.hx-tgtabs__content p{margin:0 0 16px;}
.hx-tgtabs__content strong{color:#000;}
.hx-tgtabs__content h3{font-family:var(--hx-font-heading);font-size:32px;font-weight:400;color:#000;line-height:1.2;letter-spacing:-.01em;margin:24px 0 14px;}/* live "Key Benefits:" = 32px/400 */
.hx-tgtabs__content ul{margin:12px 0;padding-left:20px;list-style:disc;}
.hx-tgtabs__content li{margin:0 0 8px;}
/* Welding mixtures sub-tabs */
.hx-tgtabs__subnav{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 28px;}
.hx-tgtabs__subtab{background:#f5f5f5;color:#000;border:1px solid #e6e6e6;border-radius:8px;padding:12px 18px;font-family:var(--hx-font-body);font-size:14px;font-weight:500;cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease;}
.hx-tgtabs__subtab:hover{background:#e6e6e6;}
.hx-tgtabs__subtab[aria-selected="true"]{background:#000;color:#fff;border-color:#000;}
.hx-tgtabs__subtab:focus-visible{outline:2px solid #000;outline-offset:2px;}
.hx-tgtabs__subheading{font-family:var(--hx-font-heading);font-size:clamp(22px,2.4vw,30px);font-weight:700;color:#000;margin:0 0 16px;}

/* --- Proven quality + FAQ accordion ---------------------------------------- */
.hx-tgfaq{background:#333333;color:#dfdfdf;}
.hx-tgfaq__grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding-block:36px;align-items:start;max-width:1280px;}/* live: ~1280 container (left ~120 @1440), ~590px cols, 20px gap */
.hx-tgfaq__title{font-family:var(--hx-font-heading);font-size:28px;font-weight:600;color:#fff;line-height:1.1;margin:0 0 24px;}/* live "Proven quality"/"Any questions?" = 28px/600 */
.hx-tgfaq__body p{font-size:14px;line-height:1.7;color:#dfdfdf;margin:0 0 18px;}/* live FAQ intro renders ~14px (240 chars -> 3 lines like live) */
.hx-tgfaq__body strong{color:#fff;}
.hx-tgfaq__acc{display:flex;flex-direction:column;gap:14px;}
.hx-tgfaq__item{background:#fff;border-radius:10px;overflow:hidden;}
.hx-tgfaq__qh{margin:0;font-size:inherit;font-weight:inherit;}
.hx-tgfaq__q{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;text-align:left;
  background:#fff;color:#111;border:0;padding:18px 22px;font-family:var(--hx-font-body);font-size:15px;font-weight:600;line-height:1.4;cursor:pointer;transition:background .2s ease,color .2s ease;}/* live rows = 56px (18px pad) */
.hx-tgfaq__q:hover{background:#000;color:#fff;}
.hx-tgfaq__q:focus-visible{outline:2px solid #2f4fff;outline-offset:-2px;}
.hx-tgfaq__icon{position:relative;width:18px;height:18px;flex:0 0 auto;}
.hx-tgfaq__icon::before,.hx-tgfaq__icon::after{content:"";position:absolute;background:currentColor;}
.hx-tgfaq__icon::before{top:8px;left:0;width:18px;height:2px;}
.hx-tgfaq__icon::after{left:8px;top:0;width:2px;height:18px;transition:transform .2s ease;}
.hx-tgfaq__q[aria-expanded="true"] .hx-tgfaq__icon::after{transform:scaleY(0);}
.hx-tgfaq__a{background:#fff;color:#333;}
.hx-tgfaq__a[hidden]{display:none;}
.hx-tgfaq__ainner{padding:0 22px 22px;font-size:15px;line-height:1.7;color:#333;}
.hx-tgfaq__ainner p{margin:0 0 12px;}
.hx-tgfaq__ainner ul{margin:12px 0;padding-left:20px;list-style:disc;}
.hx-tgfaq__ainner li{margin:0 0 8px;}

/* --- Technical Gases responsive -------------------------------------------- */
@media (max-width:990px){
  .hx-tgrange__lightwrap{grid-template-columns:1fr;gap:24px;}
  .hx-tgport__grid{grid-template-columns:1fr;gap:28px;padding-block:72px;}
  .hx-tgtabs__wrap{grid-template-columns:1fr;gap:32px;}
  .hx-tgtabs__cols{grid-template-columns:1fr;gap:20px;}
  .hx-tgtabs__nav{flex-direction:row;flex-wrap:wrap;}
  .hx-tgtabs__tab{width:auto;flex:1 1 auto;}
  .hx-tgfaq__grid{grid-template-columns:1fr;gap:36px;padding-block:72px;}
}
@media (max-width:600px){
  .hx-tgrange__dark,.hx-tgrange__light{padding:56px 0;}
  .hx-tgtabs{padding:56px 0;}
  .hx-tgtabs__tab{width:100%;}
  .hx-tgport__grid,.hx-tgfaq__grid{padding-block:56px;}
  /* live phone heading sizes (@390): range 33.6 · cathead 18.2 · portfolio 26.4 · gas 33.6 */
  .hx-tgrange__title{font-size:34px;}
  .hx-tgrange__cathead{font-size:18px;}
  .hx-tgport__head{font-size:26px;}
  .hx-tgtabs__heading{font-size:34px;}
}

/* ==========================================================================
   HELIUM (v0.4.0) — deliberately DISTINCT blue/yellow scheme
   hero (d0aa369) · Why Helium (a833280) · benefits (6ca0f7e) ·
   blue banner (section text) · feature tiles (74ec5cc) · quote (d9bef62)
   ========================================================================== */
/* --- Hero variant: blue overlay, DARK text, colourful can on the right ----- */
.hx-phero--helium{min-height:600px;color:#020202;background:#3a5cff;}
.hx-phero--helium.hx-phero--wsub{min-height:600px;}
.hx-phero--helium .hx-phero__media img{object-position:center right;}
.hx-phero--helium .hx-phero__content{max-width:600px;}
.hx-phero--helium .hx-phero__crumbs{color:#020202;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin:0 0 20px;}
.hx-phero--helium .hx-phero__crumbs a{color:#020202;}
.hx-phero--helium .hx-phero__crumbs a:hover{color:#1d3686;}
.hx-phero--helium .hx-phero__crumb-sep{color:#020202;}
.hx-phero--helium .hx-phero__title{color:#020202;font-size:clamp(40px,6vw,64px);font-weight:700;letter-spacing:.03em;line-height:1.05;max-width:none;margin:0 0 14px;}
.hx-phero--helium .hx-phero__subheading{color:#1a1a1a;font-size:clamp(18px,1.8vw,22px);font-weight:600;margin:0 0 26px;}
.hx-phero--helium .hx-phero__text p{color:#1a1a1a;font-weight:600;font-size:clamp(14px,1.2vw,16px);}

/* --- Why Helium: solid blue band, heading + CTA (left), body (right) ------- */
.hx-hewhy{position:relative;overflow:hidden;background:#4169ff;color:#fff;padding:96px 0;}
.hx-hewhy__grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,60px);align-items:center;}
.hx-hewhy__heading{font-family:var(--hx-font-heading);font-size:72px;font-weight:700;color:#fff;line-height:1.02;margin:0 0 30px;}/* live: 72px/700 held to <=768, 40px phone */
.hx-hewhy__btn{display:inline-block;background:#fff;color:#4169ff;font-weight:700;font-size:16px;border-radius:30px;padding:16px 32px;transition:background .2s ease;}
.hx-hewhy__btn:hover{background:#f0f0f0;color:#4169ff;}
.hx-hewhy__body{align-self:start;max-width:520px;padding-top:6px;}
.hx-hewhy__body p{font-size:16px;line-height:1.7;color:#fff;margin:0 0 16px;}
.hx-hewhy__body p:last-child{margin-bottom:0;}
/* Yellow decorative ovals — sit in the right margin / lower-right, clear of text. */
.hx-hewhy__blob{position:absolute;z-index:1;border-radius:50%;pointer-events:none;}
.hx-hewhy__blob--1{width:150px;height:100px;background:#ffe500;top:8%;right:-30px;}
.hx-hewhy__blob--2{width:118px;height:80px;background:#f3f048;bottom:34%;right:70px;}
.hx-hewhy__blob--3{width:180px;height:120px;background:#ffe500;bottom:-24px;right:15%;}

/* --- Why Our Helium Stands Out: yellow, heading (left) + 4 benefits -------- */
.hx-hebenefits{position:relative;overflow:hidden;background:#f3f048;color:#111;padding:120px 0;}/* live holds 120 to 768; 72 on phone */
/* Live centres this in ~1240 (heading x=140 @1440) and pins a NARROW ~460px
   list column (x=840) — the narrow column is what makes the benefit bodies wrap
   and the section tall (live 840 vs staging 599). space-between yields live's
   ~250px gap at 1440 and degrades sanely as the viewport narrows. */
.hx-hebenefits__grid{position:relative;z-index:2;display:grid;grid-template-columns:450px minmax(0,460px);justify-content:space-between;gap:40px;align-items:start;max-width:1240px;}
.hx-hebenefits__heading{font-family:var(--hx-font-heading);font-size:72px;font-weight:600;color:#111;line-height:1.08;margin:0;}/* live: 72px/600 */
.hx-hebenefits__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:60px;}/* live item step 144 = title 28 + body 56 + gap 60 */
.hx-hebenefits__item{display:flex;gap:16px;align-items:flex-start;}
.hx-hebenefits__dot{flex:0 0 auto;width:16px;height:16px;border-radius:50%;background:#ff6a3d;margin-top:4px;}
.hx-hebenefits__title{font-family:var(--hx-font-body);font-size:20px;font-weight:700;letter-spacing:.02em;color:#4a54ff;line-height:28px;margin:0 0 6px;}/* live 20px/700 lh28 */
.hx-hebenefits__body{font-size:16px;line-height:28px;color:#111;margin:0;}/* live lh 28 */
.hx-hebenefits__blob{position:absolute;left:-70px;bottom:-50px;z-index:1;width:170px;height:170px;border-radius:50%;background:#2e4fff;pointer-events:none;}

/* --- Blue banner: centred, two lines --------------------------------------- */
/* Live renders this as a fixed-height band with the lines centred:
   450px (>=1024) · 360px (768) · 240px (390) — not padding-driven. */
.hx-heband{background:#2f4fff;color:#fff;min-height:450px;display:flex;align-items:center;padding:24px 0;}
.hx-heband__wrap{text-align:center;width:100%;}
.hx-heband__line{margin:0;color:#fff;line-height:1.4;max-width:1000px;margin-inline:auto;}
.hx-heband__line--1{font-size:clamp(18px,2.1vw,24px);font-weight:700;}
.hx-heband__line--2{font-size:24px;font-weight:400;opacity:.95;margin-top:8px;}/* live line 2 = 24px (not 20px) */

/* --- Feature tiles: 4 colourful blocks on a dark background ----------------- */
/* Live: ~39px above the tiles and NO bottom padding (the quote starts flush at
   the last tile); 50px grid gap. Staging had 80/79 + 44 (+114). */
.hx-hefeat{background:#161616;padding:40px 0 0;}
.hx-hefeat__grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;}
.hx-hefeat__tile{position:relative;overflow:hidden;min-height:300px;border-radius:0;padding:40px;background:#333;color:#fff;}/* live tiles are square-cornered */
.hx-hefeat__title{font-family:var(--hx-font-heading);font-size:clamp(20px,2vw,24px);font-weight:700;line-height:1.15;color:inherit;margin:0 0 12px;max-width:70%;}
.hx-hefeat__text{font-size:16px;line-height:1.5;color:inherit;margin:0;max-width:70%;}
.hx-hefeat__icon{position:absolute;right:20px;bottom:20px;width:80px;height:80px;}
.hx-hefeat__icon svg{width:100%;height:100%;display:block;}

/* --- Quote form: Helium styling (yellow-bordered inputs, blue button) ------ */
/* Live centers this form at ~810px content (3 cols x 254px). The shared
   1200px wrap made it 1120px wide; narrow it so columns + phone split match. */
/* Live's Helium quote instance is ~100px top/bottom, not the shared 145px
   (.hx-quote is shared with home/PL/contact, so scope it here). */
.hx-quote--helium{padding:100px 0;}
.hx-quote--helium .hx-quote__wrap{max-width:890px;}
.hx-quote--helium .hx-quote__heading{color:#f9f9f9;}
.hx-quote--helium .hx-quote__sub{color:rgba(249,249,249,.85);}
.hx-quote--helium input[type=text],.hx-quote--helium input[type=email],.hx-quote--helium input[type=tel],.hx-quote--helium select,.hx-quote--helium textarea{
  background-color:#020202;border:3px solid #f4ff1b;border-radius:30px;color:#fff;}
.hx-quote--helium textarea{border-radius:24px;}
.hx-quote--helium input::placeholder,.hx-quote--helium textarea::placeholder{color:rgba(255,255,255,.45);}
.hx-quote--helium input:focus,.hx-quote--helium select:focus,.hx-quote--helium textarea:focus{border-color:#f4ff1b;background-color:rgba(255,255,255,.12);}
/* Single yellow chevron — set every background sub-property so no shorthand
   above can reset repeat/position and tile the SVG (the old zigzag bug). */
.hx-quote--helium select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23f4ff1b' stroke-width='1.6' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 18px center;background-size:12px 8px;padding-right:44px;}
.hx-quote--helium select:focus{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23f4ff1b' stroke-width='1.6' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 18px center;background-size:12px 8px;}
.hx-quote--helium .hx-quote__btn{background:#1d3686;color:#fff;border-radius:30px;min-width:270px;}
.hx-quote--helium .hx-quote__btn:hover{background:#fafafa;color:#1d3686;}

/* --- Helium responsive ----------------------------------------------------- */
@media (max-width:990px){
  .hx-hewhy{padding:72px 0;}
  .hx-hewhy__grid{grid-template-columns:1fr;gap:28px;}
  .hx-hebenefits__grid{grid-template-columns:1fr;gap:32px;}
  .hx-heband{min-height:360px;}/* live @768 */
  /* live keeps 300px tiles at 768 (no tablet shrink) */
}
@media (max-width:749px){
  .hx-phero--helium{min-height:550px;}
  .hx-phero--helium.hx-phero--wsub{min-height:550px;}
}
@media (max-width:600px){
  .hx-hewhy{padding:56px 0;}
  /* live steps the Helium display headings to 40px on phone */
  .hx-hewhy__heading,.hx-hebenefits__heading{font-size:40px;}
  .hx-hewhy__blob--1,.hx-hewhy__blob--2{display:none;}
  .hx-hewhy__blob--3{width:120px;height:80px;right:-20px;bottom:-10px;opacity:.9;}
  .hx-hebenefits{padding:72px 0;}/* live @390 */
  /* the 60px gap / 28px body leading are the DESKTOP rhythm; live's phone list
     is tighter (its bodies already wrap to many lines in a full-width column) */
  .hx-hebenefits__list{gap:36px;}
  .hx-hebenefits__body{line-height:24px;}
  .hx-hebenefits__title{font-size:16px;line-height:22px;}
  /* live stacks the phone tiles flush (no gap) at 250px each */
  .hx-hefeat__grid{grid-template-columns:1fr;gap:0;}
  .hx-hefeat__tile{padding:32px;min-height:250px;}
  .hx-hefeat__title,.hx-hefeat__text{max-width:78%;}
  .hx-hefeat__icon{width:60px;height:60px;right:16px;bottom:16px;}
  .hx-heband{min-height:240px;}/* live @390 */
}

/* ==========================================================================
   NEWSLETTER — global "Join Our Email List" band above the footer
   (measured from live: #020202 band, 32px heading, white pill input + Sign up)
   ========================================================================== */
.hx-newsletter{background:var(--hx-newsletter-bg);color:#fff;padding:34px 0;}
.hx-newsletter__inner{display:flex;align-items:center;justify-content:space-between;gap:40px;}
.hx-newsletter__text{flex:1 1 auto;min-width:0;}
.hx-newsletter__title{font-family:var(--hx-font-heading);font-weight:400;font-size:32px;line-height:1.1;color:#fff;margin:0;letter-spacing:-.01em;}
.hx-newsletter__sub{font-size:14px;line-height:1.5;color:#fff;margin:8px 0 0;}
.hx-newsletter__form{flex:0 0 auto;width:min(673px,50%);}
.hx-newsletter__hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden;}
.hx-newsletter__row{display:flex;gap:8px;}
.hx-newsletter__input{flex:1 1 auto;min-width:0;height:56px;border:1px solid rgba(0,0,0,.13);border-radius:100px;background:#fff;color:#111;font-size:14px;padding:0 28px;font-family:var(--hx-font-body);}
.hx-newsletter__input::placeholder{color:rgba(0,0,0,.53);}
.hx-newsletter__btn{flex:0 0 auto;height:54px;border:0;border-radius:14px;background:#fff;color:#000;font-size:14px;font-family:var(--hx-font-body);padding:0 28px;cursor:pointer;transition:background .2s ease;}
.hx-newsletter__btn:hover{background:#e9e9e9;}
.hx-newsletter__btn.is-busy{opacity:.6;pointer-events:none;}
.hx-newsletter__msg{font-size:13px;margin:10px 0 0;width:100%;}
.hx-newsletter__msg--ok{color:#8fe6b0;}
.hx-newsletter__msg--err{color:#ff9b9b;}

/* ==========================================================================
   404 — dark centered "Page not found" (matches live Shopify)
   ========================================================================== */
.hx-404{background:#020202;color:#fff;}
.hx-404__inner{min-height:58vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding-block:120px;gap:16px;}
.hx-404__title{font-family:var(--hx-font-heading);font-size:32px;font-weight:400;line-height:1.1;letter-spacing:-.02em;color:#fff;margin:0;}
.hx-404__text{font-size:15px;line-height:1.6;color:rgba(255,255,255,.85);margin:0;}
.hx-404__btn{margin-top:14px;display:inline-flex;align-items:center;background:#fff;color:#000;border-radius:14px;padding:16px 28px;font-size:14px;transition:background .2s ease;}
.hx-404__btn:hover{background:#e9e9e9;}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.hx-footer{background:var(--hx-footer-bg);color:#a9a9a9;padding:60px 0 40px;font-size:15px;}
.hx-footer__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:50px;}
/* Live never constrains the wordmark — it wraps purely on the column width
   (2 lines in the narrow 4-col desktop/1024 columns, 1 line in the wider 2x2
   tablet column). The old max-width:5ch forced 2 lines at every width. */
.hx-footer__wordmark{font-family:var(--hx-font-heading);font-weight:600;font-size:48px;line-height:1.2;color:#fff;text-transform:uppercase;margin:0 0 26px;letter-spacing:-.02em;max-width:none;}
.hx-socials{display:flex;gap:16px;}
.hx-social{width:48px;height:48px;border-radius:50%;background:#2a2a2a;display:inline-flex;align-items:center;justify-content:center;color:#fff;transition:background .2s ease;}/* live #2a2a2a */
.hx-social:hover{background:#3c3c3c;}
.hx-footer__heading{font-family:var(--hx-font-heading);font-weight:600;font-size:20px;letter-spacing:.02em;text-transform:uppercase;color:#fff;margin:0 0 22px;}
.hx-footer__menu{list-style:none;margin:0;padding:0;}
.hx-footer__menu li{font-size:18px;line-height:27px;margin:0 0 12px;padding-left:24px;position:relative;}/* live: 18px/27, 39px step */
.hx-footer__menu li::before{content:"—";position:absolute;left:0;color:#5f5f5f;}
.hx-footer__menu a{color:#c4c4c4;}
.hx-footer__menu a:hover{color:#fff;}
.hx-footer__address{font-style:normal;font-size:16px;line-height:1.6;color:#a2a2a2;}/* live: 16px/25.6 */
.hx-footer__extra{margin-top:14px;color:#a2a2a2;}
.hx-footer .hx-phone{display:inline-block;margin-top:10px;color:#c4c4c4;}
.hx-footer__bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;margin-top:64px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);font-size:13px;color:#8a8a8a;}
.hx-footer__copy{font-size:16px;}/* live copyright = 16px (not the 13px bottom-bar size) */
.hx-footer__legal{list-style:none;display:flex;gap:26px;margin:0;padding:0;}
.hx-footer__legal a{color:#8a8a8a;}
.hx-footer__legal a:hover{color:#fff;}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:990px){
  :root{--hx-gutter:24px;}
  .hx-nav--desktop{display:none;}
  .hx-header__cta{display:none;}
  .hx-burger{display:flex;}
  .hx-header__inner{grid-template-columns:1fr auto 1fr;}
  .hx-logo{justify-self:center;}
  .hx-logo__img{width:150px;height:auto;}/* height:auto — the base height:72px would distort */
  .hx-header__actions{gap:8px;}
  /* Live's tablet footer is a 2x2 grid in DOM order — brand | nav / address |
     info. Letting the four columns flow naturally reproduces it exactly; the
     old brand-spans-full-width rule pushed info onto a third row (+372px). */
  .hx-footer__grid{grid-template-columns:1fr 1fr;gap:40px;}
  /* Live keeps the newsletter horizontal (text left | form right) at 768 —
     it only stacks on phones (see the 600px block). */
  /* Live's tablet/mobile gap between the columns and the copyright bar is
     ~42px, not the desktop 64+24. */
  .hx-footer__bottom{margin-top:20px;}
}
@media (max-width:749px){
  /* Live's phone header is 56px (measured: main starts at y=56 at 430/390/375
     on every page, y=80 at 768) — the standard Shopify 749 mobile cut. */
  :root{--hx-header-h:56px;}
  .hx-header__inner{min-height:56px;}
  .hx-logo__img{width:120px;height:auto;}
}
@media (max-width:600px){
  :root{--hx-h1:36px;--hx-h2:30px;--hx-h3:24px;--hx-h4:20px;}
  .hx-footer{padding:56px 0 28px;}
  .hx-footer__grid{grid-template-columns:1fr;gap:30px;}
  .hx-footer__bottom{flex-direction:column;align-items:flex-start;}
  .hx-newsletter__inner{flex-direction:column;align-items:stretch;gap:18px;}
  .hx-newsletter__form{width:100%;}
  /* Live mobile footer wordmark is ~34px on a single line (not the 48px two-line
     desktop treatment) — cuts ~75px of the mobile footer overshoot. */
  .hx-footer__wordmark{font-size:34px;max-width:none;margin-bottom:20px;}
}
@media (max-width:480px){
  /* Live stacks the newsletter button under a full-width input on phones. */
  .hx-newsletter__row{flex-direction:column;}
  .hx-newsletter__btn{width:100%;}
}

/* =========================================================================
 * Products / Services (hindex_product) — single template + archive.
 * One controlled, uniform layout for future repeatable entries. Sections
 * auto-hide when empty (handled in single-hindex_product.php).
 * ====================================================================== */

/* --- Single: hero --- */
.hx-prod-hero{position:relative;background:var(--hx-scheme-2-bg);color:#fff;overflow:hidden;}
.hx-prod-hero__bg{position:absolute;inset:0;z-index:0;}
.hx-prod-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hx-prod-hero__scrim{position:absolute;inset:0;}
.hx-prod-hero__inner{position:relative;z-index:1;padding-top:88px;padding-bottom:72px;max-width:var(--hx-content-width);}
.hx-prod-hero:not(.hx-prod-hero--img){background:var(--hx-scheme-2-bg);}
.hx-prod-hero__crumb{font-size:13px;opacity:.85;margin-bottom:20px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.hx-prod-hero__crumb a{color:inherit;text-decoration:none;}
.hx-prod-hero__crumb a:hover{text-decoration:underline;}
.hx-prod-hero__label{font-family:var(--hx-font-accent);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:13px;margin:0 0 12px;opacity:.9;}
.hx-prod-hero__title{font-family:var(--hx-font-heading);font-size:var(--hx-h1);line-height:var(--hx-line-display-tight);margin:0 0 18px;color:#fff;}
.hx-prod-hero__para{max-width:640px;font-size:16px;line-height:1.7;}
.hx-prod-hero__para p{margin:0 0 12px;}
.hx-prod-hero__cta{display:inline-block;margin-top:24px;}

/* --- Single: shared section rhythm + titles --- */
.hx-prod-intro,.hx-prod-main,.hx-prod-specs,.hx-prod-features,.hx-prod-tags,
.hx-prod-certs,.hx-prod-gallery,.hx-prod-downloads,.hx-prod-related{padding-block:56px;}
.hx-prod-sec-title{font-family:var(--hx-font-heading);font-size:var(--hx-h3);line-height:1.2;margin:0 0 28px;color:var(--hx-heading);}
.hx-prod-intro__text{max-width:var(--hx-content-width);font-size:20px;line-height:1.6;color:var(--hx-heading);margin:0;}

/* --- Single: main content (optional split with image) --- */
.hx-prod-main--split{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:48px;align-items:start;}
.hx-prod-main__heading{font-family:var(--hx-font-heading);font-size:var(--hx-h3);margin:0 0 20px;color:var(--hx-heading);}
.hx-prod-main__body{font-size:16px;line-height:1.75;}
.hx-prod-main__body :where(h2,h3){font-family:var(--hx-font-heading);color:var(--hx-heading);margin:28px 0 12px;}
.hx-prod-main__body ul{padding-left:1.2em;margin:0 0 16px;}
.hx-prod-main__body li{margin:0 0 8px;}
.hx-prod-main__body a{color:var(--hx-heading);text-decoration:underline;}
.hx-prod-main__img{width:100%;height:auto;border-radius:var(--hx-card-radius);display:block;}

/* --- Single: specifications --- */
.hx-prod-specs__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:0;border-top:1px solid var(--hx-input-border);margin:0;}
.hx-prod-specs__item{display:flex;justify-content:space-between;gap:16px;padding:14px 4px;border-bottom:1px solid var(--hx-input-border);}
.hx-prod-specs__item dt{font-weight:600;color:var(--hx-heading);margin:0;}
.hx-prod-specs__item dd{margin:0;text-align:right;color:var(--hx-fg);}

/* --- Single: features --- */
.hx-prod-features__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;}
.hx-prod-features__item{padding:24px;border:1px solid var(--hx-input-border);border-radius:var(--hx-card-radius);background:#fff;}
.hx-prod-features__title{font-family:var(--hx-font-heading);font-size:18px;margin:0 0 8px;color:var(--hx-heading);}
.hx-prod-features__text{margin:0;font-size:14px;line-height:1.6;color:var(--hx-fg);}

/* --- Single: applications / industries tags --- */
.hx-prod-tags{display:grid;grid-template-columns:1fr 1fr;gap:40px;}
.hx-prod-tags__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px;}
.hx-prod-tag{background:var(--hx-scheme-4-bg);border:1px solid var(--hx-input-border);border-radius:999px;padding:8px 16px;font-size:14px;color:var(--hx-heading);}

/* --- Single: certifications --- */
.hx-prod-certs__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;}
.hx-prod-certs__item{padding:18px 20px;border:1px solid var(--hx-input-border);border-radius:var(--hx-card-radius);}
.hx-prod-certs__name{display:block;font-weight:600;color:var(--hx-heading);}
.hx-prod-certs__note{display:block;font-size:13px;color:var(--hx-fg);margin-top:4px;}

/* --- Single: gallery --- */
.hx-prod-gallery__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;}
.hx-prod-gallery__item{margin:0;}
.hx-prod-gallery__img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--hx-card-radius);display:block;}

/* --- Single: downloads --- */
.hx-prod-downloads__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;}
.hx-prod-downloads__item a{display:flex;align-items:center;gap:10px;padding:16px 18px;border:1px solid var(--hx-input-border);border-radius:var(--hx-card-radius);text-decoration:none;color:var(--hx-heading);font-weight:500;transition:border-color .2s,background .2s;}
.hx-prod-downloads__item a:hover{border-color:var(--hx-heading);background:var(--hx-scheme-4-bg);}
.hx-prod-downloads__icon{color:var(--hx-btn-bg);}

/* --- Single: related --- */
.hx-prod-related{background:var(--hx-scheme-4-bg);}
.hx-prod-related__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:24px;}
.hx-prod-related__link{display:block;background:#fff;border-radius:var(--hx-card-radius);overflow:hidden;text-decoration:none;color:inherit;border:1px solid var(--hx-input-border);height:100%;transition:transform .2s,box-shadow .2s;}
.hx-prod-related__link:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.08);}
.hx-prod-related__media{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--hx-scheme-4-bg);}
.hx-prod-related__img{width:100%;height:100%;object-fit:cover;display:block;}
.hx-prod-related__title{display:block;font-family:var(--hx-font-heading);font-size:18px;color:var(--hx-heading);padding:18px 20px 0;}
.hx-prod-related__desc{display:block;font-size:14px;color:var(--hx-fg);padding:8px 20px 20px;line-height:1.6;}

/* --- Archive (/products) --- */
.hx-parchive{padding-block:64px;min-height:50vh;}
.hx-parchive__head{margin-bottom:40px;}
.hx-parchive__title{font-family:var(--hx-font-heading);font-size:var(--hx-h1);line-height:var(--hx-line-display-tight);margin:0;color:var(--hx-heading);}
.hx-parchive__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:28px;}
.hx-parchive__link{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--hx-input-border);border-radius:var(--hx-card-radius);overflow:hidden;text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s;}
.hx-parchive__link:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.09);}
.hx-parchive__media{display:block;aspect-ratio:16/10;background:var(--hx-scheme-4-bg);overflow:hidden;}
.hx-parchive__img{width:100%;height:100%;object-fit:cover;display:block;}
.hx-parchive__img--placeholder{display:block;width:100%;height:100%;background:linear-gradient(135deg,#eee,#f7f7f7);}
.hx-parchive__body{display:flex;flex-direction:column;gap:8px;padding:22px 22px 24px;flex:1;}
.hx-parchive__name{font-family:var(--hx-font-heading);font-size:20px;color:var(--hx-heading);}
.hx-parchive__desc{font-size:14px;line-height:1.6;color:var(--hx-fg);}
.hx-parchive__more{margin-top:auto;font-weight:600;font-size:14px;color:var(--hx-heading);}
.hx-parchive__empty{padding:48px 0;font-size:18px;color:var(--hx-fg);max-width:640px;}
.hx-parchive__empty a{color:var(--hx-heading);text-decoration:underline;}

/* --- Responsive --- */
@media (max-width:900px){
  .hx-prod-main--split{grid-template-columns:1fr;gap:28px;}
  .hx-prod-main__media{order:-1;}
  .hx-prod-tags{grid-template-columns:1fr;gap:32px;}
}
@media (max-width:600px){
  .hx-prod-hero__inner{padding-top:64px;padding-bottom:52px;}
  .hx-prod-intro__text{font-size:17px;}
  .hx-prod-specs__item{flex-direction:column;gap:2px;}
  .hx-prod-specs__item dd{text-align:left;}
}

/* ==========================================================================
   ABOUT, CAREERS, CONTACT & LEGAL (v0.5.0)
   ========================================================================== */
.hx-company-label{font-family:var(--hx-font-accent);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin:0 0 18px;color:inherit;}
.hx-company-crumb{display:flex;gap:9px;align-items:center;flex-wrap:wrap;font-size:13px;color:rgba(255,255,255,.9);margin:0 0 28px;}
.hx-company-crumb a:hover{text-decoration:underline;}

/* About */
.hx-about-hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:#1a1a1a;color:#fff;}
.hx-about-hero__image,.hx-about-hero__overlay{position:absolute;inset:0;width:100%;height:100%;}
.hx-about-hero__image{object-fit:cover;filter:blur(6px);transform:scale(1.02);}
.hx-about-hero__overlay{z-index:1;}
/* Live's About header is solid + in flow, so the hero needs no overlay
   compensation. Heading holds 56px to 768 and steps to 39px on phone. */
.hx-about-hero__content{position:relative;z-index:2;width:100%;padding-top:60px;padding-bottom:80px;}
.hx-about-hero__heading{max-width:1050px;color:#fff;font-size:56px;font-weight:700;line-height:1.2;margin:0 0 20px;}
.hx-about-hero__subheading{font-size:16px;letter-spacing:.06em;margin:0;color:#fff;}
.hx-about-story{color:#fff;padding:100px 0;overflow:hidden;}
/* Live is two EQUAL 640px columns with an 80px gap @1440 (image 640 -> 360 tall
   at 16/9); staging ran 1.1fr/.7fr = 770/490, which made the image 433 tall. */
.hx-about-story__grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;}
.hx-about-story h2{font-size:clamp(38px,5vw,56px);font-weight:700;color:#fff;margin:0 0 40px;}
.hx-about-story__media{aspect-ratio:16/9;overflow:hidden;box-shadow:0 8px 50px rgba(2,2,2,.45);}
.hx-about-story__image{width:100%;height:100%;object-fit:cover;}
.hx-about-story__copy{padding-top:20px;font-size:16px;line-height:1.7;color:#fff;}/* live's copy starts ~20px into the grid, not 78 */
.hx-about-story__copy p{margin:0 0 25px;}
.hx-about-direction{display:grid;grid-template-columns:1fr 1fr;}
.hx-about-direction__panel{min-height:500px;display:flex;align-items:center;padding:60px clamp(36px,6vw,100px);}
.hx-about-direction__panel--mission{color:#fff;}
.hx-about-direction__panel--vision{color:#020202;}
.hx-about-direction__panel h2{font-size:clamp(34px,4vw,48px);line-height:1.12;color:inherit;margin:0 0 24px;max-width:600px;}
.hx-about-direction__panel p:last-child{font-size:16px;line-height:1.7;max-width:600px;margin:0;}
.hx-about-commercial{padding:100px 0;color:#fff;}
.hx-about-commercial h2{font-size:clamp(38px,5vw,56px);font-weight:700;color:#fff;margin:0 0 30px;}
.hx-about-commercial p:last-child{font-size:18px;line-height:1.65;max-width:750px;margin:0;}
.hx-about-values{color:#fff;padding:40px 0 80px;}
.hx-about-values__list{max-width:1400px;}
.hx-about-value{display:grid;grid-template-columns:70px minmax(0,1fr);gap:30px;padding:40px 0;border-bottom:1px solid rgba(255,255,255,.85);}
.hx-about-value:first-child{border-top:1px solid rgba(255,255,255,.85);}
.hx-about-value__icon{font-size:40px;line-height:1;color:#ccc;}
.hx-about-value h3{font-size:36px;font-weight:700;color:#fff;margin:0 0 12px;}
.hx-about-value p{font-size:16px;line-height:1.6;color:#fff;margin:0;max-width:900px;}
.hx-about-news{padding:120px 0 0;color:#fff;}
.hx-about-news__heading{text-align:center;font-size:40px;color:#fff;margin:0 0 40px;}
.hx-about-news__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
.hx-about-news-card{display:flex;flex-direction:column;background:#f5f5f5;color:#000;min-width:0;}
.hx-about-news-card__media{aspect-ratio:1;overflow:hidden;margin:10px 10px 0;}
.hx-about-news-card__image{width:100%;height:100%;object-fit:cover;transition:transform .35s ease;}
.hx-about-news-card:hover .hx-about-news-card__image{transform:scale(1.03);}
.hx-about-news-card__body{display:flex;flex-direction:column;flex:1;padding:18px 20px 20px;}
.hx-about-news-card time{font-size:12px;color:#666;margin-bottom:10px;}
.hx-about-news-card h3{font-size:24px;line-height:1.25;color:#000;margin:0 0 14px;}
.hx-about-news-card p{font-size:14px;line-height:1.6;color:#666;margin:0 0 22px;}
.hx-about-news-card__footer{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:14px;border-top:1px solid #e6e6e6;font-size:14px;font-weight:600;}
.hx-about-news-card__arrow{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#000;color:#fff;font-size:20px;}

/* Careers */
.hx-careers-hero{position:relative;min-height:600px;display:flex;align-items:center;background:#1a1a1a;color:#fff;overflow:hidden;}
.hx-careers-hero__image,.hx-careers-hero__overlay{position:absolute;inset:0;width:100%;height:100%;}
.hx-careers-hero__image{object-fit:cover;}
.hx-careers-hero__overlay{z-index:1;background:linear-gradient(to bottom,rgba(0,0,0,.6),#000);}
/* Live's Careers header is solid + in flow (verified by capture) — no overlay
   compensation. Heading holds 48px to 768, steps to 32px on phone. */
.hx-careers-hero__content{position:relative;z-index:2;width:100%;padding-top:60px;padding-bottom:60px;}
.hx-careers-hero h1{font-size:48px;font-weight:700;color:#fff;max-width:700px;margin:0 0 25px;}
.hx-careers-hero p{font-size:16px;line-height:1.65;max-width:650px;margin:0 0 30px;}
.hx-careers-culture{display:grid;grid-template-columns:1fr 1fr;color:#fff;}
.hx-careers-culture__panel{padding:120px clamp(32px,6vw,100px);}
.hx-careers-culture__inner{max-width:650px;margin-inline:auto;}
.hx-careers-culture h2{font-size:clamp(32px,4vw,40px);font-weight:300;color:#fff;margin:0 0 30px;}
.hx-careers-culture__panel--left p{font-size:16px;line-height:1.75;margin:0 0 22px;}
.hx-careers-culture__link{display:inline-block;margin-top:18px;font-size:15px;font-weight:600;border-bottom:1px solid rgba(255,255,255,.75);}
.hx-careers-culture__list{list-style:none;margin:0;padding:0;}
.hx-careers-culture__list li{display:grid;grid-template-columns:18px 1fr;gap:16px;margin:0 0 30px;}
.hx-careers-culture__list li>span{color:#fff;font-size:9px;margin-top:7px;}
.hx-careers-culture__list h3{font-size:18px;color:#fff;margin:0 0 7px;}
.hx-careers-culture__list p{font-size:15px;line-height:1.6;margin:0;color:rgba(255,255,255,.88);}
.hx-careers-culture__closing{font-size:16px;line-height:1.7;margin:30px 0 0;}
.hx-careers-jobs{padding:120px 0;color:#fff;}
.hx-careers-jobs__main{font-size:clamp(46px,6vw,72px);color:#fff;margin:0 0 60px;}
.hx-careers-jobs__intro{max-width:900px;margin-bottom:60px;}
.hx-careers-jobs__intro>p:last-child{font-size:14px;line-height:1.75;margin:0;}
.hx-careers-jobs__secondary{font-size:32px;color:#fff;margin:0 0 40px;}
.hx-careers-job{border-top:1px solid rgba(255,255,255,.65);}
.hx-careers-job:last-child{border-bottom:1px solid rgba(255,255,255,.65);}
.hx-careers-job summary{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:25px 0;cursor:pointer;font-size:18px;list-style:none;}
.hx-careers-job summary::-webkit-details-marker{display:none;}
.hx-careers-job__plus{position:relative;width:20px;height:20px;flex:0 0 20px;}
.hx-careers-job__plus::before,.hx-careers-job__plus::after{content:"";position:absolute;left:0;top:9px;width:20px;height:1px;background:#fff;}
.hx-careers-job__plus::after{transform:rotate(90deg);transition:transform .2s;}
.hx-careers-job[open] .hx-careers-job__plus::after{transform:rotate(0);}
.hx-careers-job__body{max-width:950px;padding:0 0 30px;font-size:15px;line-height:1.75;color:rgba(255,255,255,.84);}
.hx-careers-job__body p{margin-top:0;}
.hx-careers-job__link{display:inline-block;color:#fff;border-bottom:1px solid #fff;font-weight:600;margin-top:8px;}
.hx-careers-jobs__empty{padding:25px 0;border-top:1px solid rgba(255,255,255,.65);border-bottom:1px solid rgba(255,255,255,.65);}
/* Live's "Let's Connect" is a 48px/700 display heading in a ~100px-padded band
   (section 450), not a 16px label in a 60px band (staging was 286). */
.hx-careers-connect{text-align:center;color:#fff;padding:100px 0;}
.hx-careers-connect h2{font-size:48px;font-weight:700;color:#fff;margin:0 0 20px;}
.hx-careers-connect p{font-size:16px;line-height:1.75;max-width:820px;margin:0 auto 28px;}

/* Contact */
.hx-contact-hero{position:relative;min-height:600px;display:flex;align-items:center;background:#1a1a1a;color:#fff;overflow:hidden;}
.hx-contact-hero__image,.hx-contact-hero__overlay{position:absolute;inset:0;width:100%;height:100%;}
.hx-contact-hero__image{object-fit:cover;}
.hx-contact-hero__overlay{z-index:1;background:rgba(2,2,2,.58);}
/* Live's Contact header is solid + in flow — no overlay compensation.
   Heading holds 64px to 1024, steps to 40px on phone (live @430 = 40). */
.hx-contact-hero__content{position:relative;z-index:2;width:100%;padding-top:60px;padding-bottom:80px;}
.hx-contact-hero__crumb{font-size:12px;font-weight:700;margin:0 0 20px;}
.hx-contact-hero h1{font-size:64px;font-weight:700;color:#fff;margin:0 0 25px;}
.hx-contact-hero h2{font-family:var(--hx-font-body);font-size:clamp(18px,2vw,22px);font-weight:600;color:#fff;max-width:650px;margin:0 0 30px;}
.hx-contact-hero__body{font-size:16px;line-height:1.7;color:#e6e6e6;max-width:600px;}
.hx-contact-hero__body p{margin:0 0 20px;}
.hx-contact-offices{padding:80px 0;color:#666;}
.hx-contact-offices__grid{display:grid;grid-template-columns:1fr 1fr;gap:100px;}
.hx-contact-office+ .hx-contact-office{border-left:1px solid #fff;padding-left:100px;}
.hx-contact-office h2{font-family:var(--hx-font-body);font-size:24px;font-weight:600;color:#020202;margin:0 0 20px;}
.hx-contact-office address{font-style:normal;font-size:14px;line-height:1.6;margin:0 0 10px;}
.hx-contact-office a{font-size:14px;text-decoration:underline;}
.hx-contact-inquiry{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;}
.hx-contact-inquiry--form-only{grid-template-columns:1fr;}
.hx-contact-questions{position:relative;overflow:hidden;color:#fff;display:flex;align-items:center;padding:120px clamp(36px,7vw,120px);min-width:0;}
.hx-contact-questions__letter{position:absolute;left:-100px;bottom:-160px;font-family:var(--hx-font-heading);font-size:700px;line-height:.8;color:rgba(255,255,255,.1);pointer-events:none;}
.hx-contact-questions__inner{position:relative;z-index:1;max-width:700px;}
.hx-contact-questions h2{font-size:clamp(38px,4vw,50px);font-weight:300;letter-spacing:.02em;color:#fff;margin:0 0 30px;}
.hx-contact-questions h3{font-family:var(--hx-font-body);font-size:22px;font-weight:300;color:#fff;margin:0 0 35px;}
.hx-contact-questions p{font-size:16px;line-height:1.7;color:rgba(255,255,255,.8);margin:0;}
.hx-contact-questions a{text-decoration:underline;color:#fff;}
.hx-contact-inquiry>.hx-quote{min-width:0;padding:80px clamp(28px,5vw,80px);color:#000;}
.hx-quote--contact .hx-quote__wrap{max-width:500px;padding:0;margin:0 auto;}
.hx-quote--contact .hx-quote__head{text-align:left;margin-bottom:40px;}
.hx-quote--contact .hx-quote__heading{font-size:clamp(34px,4vw,44px);font-weight:300;color:#000;margin-bottom:20px;}
.hx-quote--contact .hx-quote__sub{font-size:16px;color:#000;margin:0;}
/* Live packs the contact form 2 fields per row inside the 500px column
   (inputs 241 wide, 18px gap; form 679 tall vs the 947 single-column stack). */
.hx-quote--contact .hx-quote__grid{grid-template-columns:1fr 1fr;gap:18px;}
.hx-quote--contact .hx-field--full{grid-column:1 / -1;}
.hx-quote--contact .hx-field label{color:#000;}
.hx-quote--contact input[type=text],.hx-quote--contact input[type=email],.hx-quote--contact input[type=tel],.hx-quote--contact select,.hx-quote--contact textarea{background:#555;border:0;border-radius:50px;color:#fff;padding:18px 28px;}
.hx-quote--contact textarea{border-radius:28px;min-height:140px;}
.hx-quote--contact input::placeholder,.hx-quote--contact textarea::placeholder{color:#fff;}
.hx-quote--contact input:focus,.hx-quote--contact select:focus,.hx-quote--contact textarea:focus{background:#7f9fa1;}
.hx-quote--contact .hx-phone--single{display:block;margin:0;color:inherit;}
.hx-quote--contact .hx-phone--single .hx-phone__num{width:100%;}
.hx-quote--contact .hx-quote__privacy{color:#000;}
.hx-quote--contact .hx-quote__privacy input{accent-color:#000;}
.hx-quote--contact .hx-quote__submit{text-align:left;}
.hx-quote--contact .hx-quote__btn{background:#000;color:#fff;border-radius:50px;padding:18px 70px;}
.hx-quote--contact .hx-quote__btn:hover{background:#2a2a2a;color:#fff;}
.hx-quote--contact .hx-quote__msg{color:#000;background:rgba(0,128,96,.12);}

/* Legal — matched to live Shopify policy pages: 672px reading column,
   48px/1.1 title, 14px/1.6 body (measured live @1440). */
.hx-legal{background:#fff;min-height:65vh;}
/* Live legal column = 672px centred (gutters 48 @768, 16 on phone). */
.hx-legal__article{max-width:calc(672px + var(--hx-gutter)*2);padding-top:40px;padding-bottom:32px;}/* live content->newsletter gap = 83 (was 131 at pb:80) */
.hx-legal__header{margin-bottom:30px;}
.hx-legal__header h1{font-size:clamp(36px,4.8vw,48px);line-height:1.1;color:#1a1a1a;margin:0 0 8px;}/* live: 48 ≥1024 · 36.86 @768 · 36 @390 */
.hx-legal__date{font-size:14px;color:#666;margin:0;}
.hx-legal__content{font-size:14px;line-height:1.6;color:#333;}
.hx-legal__content h2{font-size:24px;line-height:1.25;margin:40px 0 16px;color:#1a1a1a;}
.hx-legal__content h3{font-size:18px;line-height:1.3;margin:32px 0 12px;color:#1a1a1a;}
.hx-legal__content p{margin:0 0 14px;}
.hx-legal__content ul,.hx-legal__content ol{padding-left:1.5em;margin:0 0 1em;}
.hx-legal__content li{margin-bottom:6px;}
.hx-legal__content a{text-decoration:underline;overflow-wrap:anywhere;}
/* Privacy Policy — live uses Shopify's distinct /policies/ layout: a NARROWER
   534px column, 56px title (48 on tablet/phone) and 48px section headings. */
.hx-privacy .hx-legal__article{max-width:calc(534px + var(--hx-gutter)*2);padding-top:20px;}
.hx-privacy .hx-legal__header h1{font-size:clamp(48px,5.5vw,56px);margin-bottom:16px;}
.hx-privacy .hx-legal__content h2{font-size:clamp(36px,4.8vw,48px);line-height:1.1;}

/* Job single */
.hx-job-single__hero{background:#262626;color:#fff;padding:90px 0 70px;}
.hx-job-single__hero h1{font-size:clamp(38px,5vw,60px);color:#fff;max-width:980px;margin:0 0 22px;}
.hx-job-single__summary{font-size:18px;line-height:1.65;max-width:800px;color:rgba(255,255,255,.82);}
.hx-job-single__facts{display:flex;flex-wrap:wrap;gap:18px 40px;list-style:none;margin:36px 0 0;padding:0;}
.hx-job-single__facts li{display:flex;flex-direction:column;gap:3px;}
.hx-job-single__facts strong{font-size:11px;letter-spacing:.12em;text-transform:uppercase;}
.hx-job-single__facts span{font-size:15px;color:rgba(255,255,255,.8);}
.hx-job-single__layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:70px;align-items:start;padding-top:80px;padding-bottom:100px;}
.hx-job-single__content{font-size:16px;line-height:1.8;}
.hx-job-single__content p:first-child{margin-top:0;}
.hx-job-single__list{margin-top:42px;}
.hx-job-single__list h2{font-size:28px;margin:0 0 16px;}
.hx-job-single__list ul{margin:0;padding-left:22px;}
.hx-job-single__list li{margin-bottom:10px;}
.hx-job-single__apply{position:sticky;top:110px;background:#f5f3ef;padding:30px;}
.hx-job-single__apply h2{font-size:24px;margin:0 0 14px;}
.hx-job-single__apply p{margin:0 0 22px;}

@media (max-width:990px){
  .hx-about-story__grid{grid-template-columns:1fr;gap:40px;}/* stacked: keep the old 40px, not the 80px desktop gap */
  .hx-about-story__copy{padding-top:0;max-width:760px;}
  .hx-about-direction,.hx-careers-culture{grid-template-columns:1fr;}
  /* .hx-contact-inquiry stays 2-col here — live keeps questions|form side by
     side at 768 and only stacks on phones (<=749). */
  .hx-about-direction__panel{min-height:420px;}
  .hx-careers-culture__panel{padding:80px var(--hx-gutter);}
  .hx-contact-offices__grid{gap:50px;}
  .hx-contact-office+ .hx-contact-office{padding-left:50px;}
  .hx-contact-questions{min-height:560px;}
  .hx-contact-inquiry>.hx-quote{padding:70px var(--hx-gutter);}
  .hx-job-single__layout{grid-template-columns:1fr;gap:45px;}
  .hx-job-single__apply{position:static;}
  /* Live steps the About news cards 3 -> 2 columns at tablet (its @768 news
     block is 1543px vs staging's 3-col 948px); it only goes 1-col below 749. */
  .hx-about-news__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:749px){
  .hx-about-hero{min-height:50svh;}
  .hx-about-hero__content{padding-top:45px;padding-bottom:45px;}/* solid header is in flow */
  .hx-about-hero__heading{font-size:39px;}/* live @430 = 39.2px */
  .hx-careers-hero{min-height:500px;}
  .hx-careers-hero h1{font-size:32px;}/* live @430 = 32px (staging's clamp floor of 36 was larger) */
  /* live stacks the contact panels and switches the form to single-column
     full-width fields on phones (input w=310 @390) */
  .hx-contact-inquiry{grid-template-columns:1fr;}
  .hx-quote--contact .hx-quote__grid{grid-template-columns:1fr;}
  .hx-quote--contact .hx-quote__heading{font-size:36px;}/* live @390 = 36 */
  .hx-contact-questions h2{font-size:36px;}
  /* the 48px/100px "Let's Connect" band is the DESKTOP treatment */
  .hx-careers-connect{padding:60px 0;}
  .hx-careers-connect h2{font-size:32px;}
  .hx-contact-hero{min-height:550px;}
  /* declared here (AFTER the 64px base rule) so the phone size actually wins */
  .hx-contact-hero h1{font-size:40px;}
  .hx-about-news__grid{grid-template-columns:1fr;gap:24px;}
  .hx-about-news-card{max-width:560px;margin-inline:auto;}
  .hx-contact-offices__grid{grid-template-columns:1fr;gap:42px;}
  .hx-contact-office+ .hx-contact-office{border-left:0;border-top:1px solid #fff;padding:42px 0 0;}
}
@media (max-width:600px){
  .hx-about-story{padding:60px 0;}
  .hx-about-direction__panel{padding:50px var(--hx-gutter);min-height:400px;}
  .hx-about-commercial{padding:60px 0;}
  .hx-about-value{grid-template-columns:42px 1fr;gap:18px;padding:22px 0;}/* live row step 196 (staging was 232) */
  .hx-about-value__icon{font-size:30px;}
  .hx-about-value h3{font-size:28px;}
  .hx-about-news{padding-top:70px;}
  /* live phone news: 28px/700 left heading; 19px/700 card titles */
  .hx-about-news__heading{font-size:28px;font-weight:700;text-align:left;margin-bottom:30px;}
  .hx-about-news-card h3{font-size:19px;font-weight:700;}
  .hx-careers-culture__panel{padding:60px var(--hx-gutter);}
  .hx-careers-jobs{padding:70px 0;}
  .hx-careers-jobs__main{margin-bottom:40px;}
  .hx-contact-offices{padding:40px 0;}/* live offices block ≈ 505 total @390 */
  .hx-contact-questions{padding:70px var(--hx-gutter);min-height:0;}/* live sizes to content (~355) */
  /* Live's phone contact form is placeholder-only — field steps of 78px leave
     no label rows (measured gaps 18 vs staging 48). Keep labels for AT. */
  .hx-quote--contact .hx-field label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
  .hx-quote--contact .hx-field{position:relative;}
  .hx-contact-questions__letter{font-size:300px;left:-50px;bottom:-50px;}
  .hx-quote--contact .hx-quote__btn{width:100%;padding-inline:28px;}
  /* live phone legal: 28px top offset under the header, 16px gutters (358px
     column @390; privacy 20px -> 350), and body stays 14px/22.4 like desktop */
  .hx-legal__article{padding-top:28px;padding-bottom:70px;padding-inline:16px;}
  .hx-privacy .hx-legal__article{padding-inline:20px;}
  .hx-job-single__hero{padding:65px 0 55px;}
  .hx-job-single__layout{padding-top:55px;padding-bottom:70px;}
}

/* ==========================================================================
   Blog / Knowledge Hub — listing, article, search (v0.6.0)
   Reuses the site tokens + the About "Latest News" card language.
   ========================================================================== */

/* --- Listing header --- */
.hx-blog-head{background:var(--hx-scheme-3-bg);padding:calc(var(--hx-header-h) + 56px) 0 48px;border-bottom:1px solid #eceae4;}
.hx-blog-head__title{font-family:var(--hx-font-heading);font-size:var(--hx-h2);line-height:var(--hx-line-display-normal);color:var(--hx-heading);margin:6px 0 0;max-width:16ch;}
.hx-blog-head__intro{margin:18px 0 0;max-width:60ch;font-size:16px;line-height:1.7;color:var(--hx-fg);}
.hx-blog-head__intro p{margin:0 0 10px;}

.hx-blog__body{padding-block:56px 96px;}

/* --- Cards (grid) --- */
.hx-blog__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;}
.hx-bcard{min-width:0;background:#fff;border:1px solid #ececec;border-radius:var(--hx-card-radius);overflow:hidden;transition:box-shadow .25s ease,transform .25s ease;}
.hx-bcard:hover{box-shadow:0 14px 40px rgba(0,0,0,.10);transform:translateY(-3px);}
.hx-bcard__link{display:flex;flex-direction:column;height:100%;color:inherit;}
.hx-bcard__media{aspect-ratio:16/10;overflow:hidden;background:#f2f2f2;}
.hx-bcard__image{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
.hx-bcard:hover .hx-bcard__image{transform:scale(1.04);}
.hx-bcard__body{display:flex;flex-direction:column;flex:1;padding:22px 24px 24px;}
.hx-bcard__eyebrow{font-family:var(--hx-font-accent);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--hx-helium-blue);margin:0 0 12px;}
.hx-bcard__date{font-size:12px;letter-spacing:.02em;color:#8a8a8a;margin:0 0 10px;}
.hx-bcard__title{font-family:var(--hx-font-heading);font-size:21px;line-height:1.3;color:var(--hx-heading);margin:0 0 12px;}
.hx-bcard__excerpt{font-size:14px;line-height:1.65;color:#6a6a6a;margin:0 0 20px;}
.hx-bcard__more{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:16px;border-top:1px solid #ededed;font-size:13px;font-weight:600;color:var(--hx-heading);}
.hx-bcard__arrow{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--hx-heading);color:#fff;transition:background .2s ease;}
.hx-bcard:hover .hx-bcard__arrow{background:var(--hx-helium-blue);}

/* --- Featured (hero) card --- */
.hx-blog__feature{margin-bottom:40px;}
.hx-bcard--feature{display:block;}
.hx-bcard--feature .hx-bcard__link{flex-direction:row;align-items:stretch;}
.hx-bcard--feature .hx-bcard__media{flex:0 0 55%;aspect-ratio:auto;min-height:360px;}
.hx-bcard--feature .hx-bcard__body{flex:1;justify-content:center;padding:44px 48px;}
.hx-bcard--feature .hx-bcard__title{font-size:32px;line-height:1.18;margin-bottom:16px;}
.hx-bcard--feature .hx-bcard__excerpt{font-size:16px;margin-bottom:26px;}

/* --- Pagination --- */
.hx-blog__pagination{margin-top:56px;display:flex;justify-content:center;}
.hx-blog__pagination .page-numbers{display:inline-grid;place-items:center;min-width:42px;height:42px;padding:0 12px;margin:0 4px;border:1px solid #dcdcdc;border-radius:4px;color:var(--hx-heading);font-size:14px;font-weight:600;transition:all .2s ease;}
.hx-blog__pagination a.page-numbers:hover{border-color:var(--hx-heading);}
.hx-blog__pagination .page-numbers.current{background:var(--hx-heading);color:#fff;border-color:var(--hx-heading);}
.hx-blog__pagination .page-numbers.dots{border:none;}
.hx-blog__empty{text-align:center;font-size:16px;color:#aaa;padding:60px 0;}

/* --- Blog listing DARK theme — live Knowledge Hub is dark (#020202) --- */
.hx-blog-head{background:#020202;border-bottom:0;}
.hx-blog-head__eyebrow,.hx-blog-head .hx-eyebrow{color:rgba(255,255,255,.6);}
.hx-blog-head__title{color:#fff;}
.hx-blog-head__intro{color:rgba(255,255,255,.72);}
.hx-blog__body{background:#020202;}
.hx-bcard{background:#111;border-color:rgba(255,255,255,.10);}
.hx-bcard:hover{box-shadow:0 14px 40px rgba(0,0,0,.45);}
.hx-bcard__media{background:#222;}
.hx-bcard__title{color:#fff;}
.hx-bcard__excerpt{color:rgba(255,255,255,.66);}
.hx-bcard__date{color:rgba(255,255,255,.5);}
.hx-bcard__more{color:#fff;border-top-color:rgba(255,255,255,.12);}
.hx-bcard__arrow{background:#fff;color:#000;}
.hx-bcard:hover .hx-bcard__arrow{background:var(--hx-helium-blue);color:#fff;}
.hx-blog__pagination .page-numbers{color:#fff;border-color:rgba(255,255,255,.25);}
.hx-blog__pagination a.page-numbers:hover{border-color:#fff;}
.hx-blog__pagination .page-numbers.current{background:#fff;color:#000;border-color:#fff;}

/* --- Blog listing: full-bleed featured hero + centered "Latest News"
   (matches live: bg image + left-weighted dark gradient overlay, 48px title,
   white-outline Read More pill; grid heading 40px centered). --- */
.hx-blogfeat{position:relative;min-height:633px;display:flex;align-items:center;
  background:#111 center/cover no-repeat;}
.hx-blogfeat__overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,2,2,.85) 0%,rgba(2,2,2,.55) 48%,rgba(2,2,2,.15) 100%);}
.hx-blogfeat__inner{position:relative;z-index:2;width:100%;color:#fff;padding-block:48px;}
.hx-blogfeat__crumbs{display:flex;align-items:center;gap:10px;font-size:14px;color:rgba(255,255,255,.85);margin:0 0 24px;}
.hx-blogfeat__crumbs a{color:rgba(255,255,255,.85);transition:color .2s ease;}
.hx-blogfeat__crumbs a:hover{color:#fff;}
.hx-blogfeat__date{display:block;font-size:14px;color:rgba(255,255,255,.85);margin:0 0 16px;}
.hx-blogfeat__title{font-family:var(--hx-font-heading);font-size:clamp(34px,3.5vw,48px);font-weight:700;line-height:1.2;letter-spacing:-.02em;color:#fff;margin:0 0 22px;max-width:560px;}
.hx-blogfeat__excerpt{font-size:16px;line-height:1.6;color:rgba(255,255,255,.9);margin:0 0 30px;max-width:600px;}
.hx-blogfeat__btn{display:inline-flex;align-items:center;gap:12px;background:transparent;border:1px solid #fff;color:#fff;border-radius:30px;padding:12px 22px;font-size:14px;line-height:1;transition:background .2s ease;}
.hx-blogfeat__btn:hover{background:rgba(255,255,255,.15);}
.hx-blogfeat__arrow{display:inline-flex;}
.hx-blog__latest{font-family:var(--hx-font-heading);font-size:clamp(28px,2.8vw,40px);font-weight:700;letter-spacing:-.02em;color:#fff;text-align:center;margin:0 0 40px;}
@media (max-width:749px){
  .hx-blogfeat{min-height:480px;}
  .hx-blogfeat__title{font-size:clamp(28px,7vw,36px);max-width:none;}
  .hx-blogfeat__overlay{background:linear-gradient(180deg,rgba(2,2,2,.55) 0%,rgba(2,2,2,.85) 100%);}
}

/* --- Single article — matched to live: DARK, full-width, centered title,
   large body type. Live measured: bg #020202, white text, title 56px centered,
   body 24px full-width column (~1352px), featured image ~1360px/radius 8. --- */
.hx-article{background:#020202;color:#fff;}
/* Live article head: LEFT-aligned, full-width (h1 x=64 w=1312 @1440; x=40 @390),
   title starts 54px under the (now in-flow) header. */
.hx-article__head{background:#020202;padding:54px 0 0;text-align:left;}
.hx-article__head-inner{max-width:none;margin-inline:auto;padding-inline:clamp(40px,4.4vw,64px);}
.hx-article__crumbs{justify-content:center;font-size:13px;color:rgba(255,255,255,.55);margin:0 0 18px;display:flex;align-items:center;flex-wrap:wrap;gap:8px;}
.hx-article__crumbs a{color:rgba(255,255,255,.55);}
.hx-article__crumbs a:hover{color:#fff;text-decoration:underline;}
.hx-article__crumb-sep{color:rgba(255,255,255,.4);}
.hx-article__title{font-family:var(--hx-font-heading);font-size:clamp(48px,3.9vw,56px);line-height:1.05;color:#fff;margin:0 0 14px;max-width:none;}/* live keeps 48px on phone */
.hx-article__meta{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px;font-size:14px;color:rgba(255,255,255,.6);}
.hx-article__meta-sep{color:rgba(255,255,255,.35);}
.hx-article__author{font-weight:600;color:#fff;}
.hx-article__featured{margin:0;padding:34px 0 0;}
.hx-article__featured .hx-page-width{max-width:1440px;}
.hx-article__featured-img{width:100%;height:auto;border-radius:8px;display:block;}

.hx-article__body{max-width:1440px;margin-inline:auto;padding:34px 44px 80px;}

/* Rich-text entry typography (shared) — dark theme, large tight-set body (live) */
.hx-entry{font-size:24px;line-height:24px;color:#fff;}/* live sets the 24px body SOLID (lh 24, not 25.44) */
.hx-entry > *:first-child{margin-top:0;}
.hx-entry h2{font-family:var(--hx-font-heading);font-size:24px;line-height:1.05;font-weight:700;color:#fff;margin:6px 0 6px;}/* live mt 6 */
.hx-entry h3{font-family:var(--hx-font-heading);font-size:24px;line-height:1.05;font-weight:700;color:#fff;margin:12px 0 6px;}
.hx-entry h4{font-family:var(--hx-font-heading);font-size:22px;line-height:1.1;font-weight:700;color:#fff;margin:10px 0 6px;}
.hx-entry p{margin:0 0 6px;}
.hx-entry a{color:#8ab0ff;text-decoration:underline;text-underline-offset:2px;}
.hx-entry a:hover{color:#fff;}
.hx-entry ul,.hx-entry ol{margin:0 0 6px;padding-left:30px;}
.hx-entry li{margin:0;}/* live li mb 0 */
.hx-entry strong{color:#fff;font-weight:700;}
.hx-entry blockquote{margin:20px 0;padding:6px 0 6px 26px;border-left:3px solid var(--hx-helium-blue);color:rgba(255,255,255,.85);font-style:italic;}
.hx-entry hr{border:none;border-top:1px solid rgba(255,255,255,.15);margin:28px 0;}
.hx-entry img{max-width:100%;height:auto;border-radius:6px;}
.hx-entry figure{margin:24px 0;}
.hx-entry figcaption{font-size:14px;color:rgba(255,255,255,.6);text-align:center;margin-top:8px;}
.hx-entry .hindex-table,.hx-entry table{width:100%;}
.hx-entry .hindex-table{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:24px 0;}
.hx-entry table{border-collapse:collapse;font-size:16px;}
.hx-entry th,.hx-entry td{border:1px solid rgba(255,255,255,.18);padding:11px 14px;text-align:left;vertical-align:top;}
.hx-entry thead th{background:#1a1a1a;font-family:var(--hx-font-heading);color:#fff;}

/* Related articles — dark to continue the article scheme */
/* Live's related block: LEFT heading (the blog title), TWO compact cards with
   square 432px images, tight 8px gap, no boxed "Read More" footer. */
.hx-article-related{background:#0a0a0a;padding:72px 0 88px;margin-top:0;}
.hx-article-related__heading{font-family:var(--hx-font-heading);font-size:30px;color:#fff;text-align:left;margin:0 0 32px;}
.hx-article-related__grid{display:grid;grid-template-columns:repeat(2,432px);gap:8px;}
.hx-article-related .hx-bcard{background:transparent;}
.hx-article-related .hx-bcard__media{aspect-ratio:1/1;}
.hx-article-related .hx-bcard__more{display:none;}

/* Search results */
/* Live's /search is DARK (#020202, white heading, 56px 4px-radius input with a
   light border). Live's Shopify search only queries products ("No products
   found" for every real term), so the WP results themselves have no live
   counterpart — the results keep working but adopt the dark visual language.
   Header is solid/in-flow now, so no --hx-header-h compensation. */
.hx-search-page{background:#020202;color:#fff;}
.hx-search-page__head{background:transparent;padding:48px 0 44px;}
.hx-search-page .hx-company-label{color:rgba(255,255,255,.7);}
.hx-search-page__title{font-family:var(--hx-font-heading);font-size:38px;line-height:1.2;color:#fff;margin:6px 0 8px;}
.hx-search-page__count{font-size:14px;color:rgba(255,255,255,.65);margin:0 0 22px;}
.hx-search-page__form{display:flex;gap:10px;max-width:680px;}
.hx-search-page__form input[type=search]{flex:1;height:56px;padding:13px 16px;background:transparent;color:#fff;border:1px solid #dfdfdf;border-radius:4px;font-size:15px;font-family:inherit;}
.hx-search-page__form input[type=search]::placeholder{color:rgba(255,255,255,.5);}
.hx-search-page__form input[type=search]:focus{outline:2px solid #fff;outline-offset:1px;}
.hx-search-page__form .hx-btn{background:#fff;color:#000;border-color:#fff;}
.hx-search-page .hx-btn--secondary{background:transparent;color:#fff;border:1px solid #fff;}
.hx-search-page__body{padding-block:48px 96px;}
.hx-search-results{list-style:none;margin:0;padding:0;max-width:840px;}
.hx-search-result{border-bottom:1px solid rgba(255,255,255,.14);}
.hx-search-result__link{display:flex;align-items:center;gap:20px;padding:26px 4px;color:inherit;}
.hx-search-result__link:hover .hx-search-result__title{color:rgba(255,255,255,.75);}
.hx-search-result__type{display:inline-block;font-family:var(--hx-font-accent);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55);margin:0 0 8px;}
.hx-search-result__title{font-family:var(--hx-font-heading);font-size:22px;line-height:1.3;color:#fff;margin:0 0 8px;transition:color .2s ease;}
.hx-search-result__excerpt{font-size:14px;line-height:1.6;color:rgba(255,255,255,.65);margin:0;}
.hx-search-result__arrow{flex:0 0 auto;color:#fff;}
.hx-search-empty{max-width:560px;padding:20px 0 40px;}
.hx-search-empty p{font-size:16px;color:rgba(255,255,255,.75);margin:0 0 22px;}

@media (max-width:990px){
  .hx-blog__grid,.hx-article-related__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .hx-bcard--feature .hx-bcard__link{flex-direction:column;}
  .hx-bcard--feature .hx-bcard__media{flex:none;min-height:0;aspect-ratio:16/9;}
  .hx-bcard--feature .hx-bcard__body{padding:32px 30px;}
  .hx-bcard--feature .hx-bcard__title{font-size:27px;}
  .hx-article__body{padding-inline:32px;}
}
@media (max-width:749px){
  .hx-blog__grid,.hx-article-related__grid{grid-template-columns:1fr;}
  .hx-bcard{max-width:560px;margin-inline:auto;width:100%;}
  .hx-article__body{padding-inline:24px;}
}
@media (max-width:600px){
  .hx-blog-head{padding-top:calc(var(--hx-header-h) + 34px);}
  .hx-blog-head__title{font-size:32px;}
  .hx-blog__body{padding-block:40px 64px;}
  /* live keeps the 24px full-width body at every width — only tighten the gutter */
  .hx-article__body{padding:28px 20px 60px;}
  .hx-article-related{padding:52px 0 64px;}
  .hx-search-page__title{font-size:29px;}
  .hx-search-result__link{gap:14px;padding:22px 2px;}
  .hx-search-result__title{font-size:19px;}
}