.hx-wa:not(#hx_) {
--a-accent:   var( --hx-accent, var( --helix-plum, #764452 ) );
--a-accent-d: var( --helix-plum-dark, #5E3541 );
--a-ink:      var( --helix-ink, #1C1C1C );
--a-dark:     var( --helix-dark, #2B211E );
--a-muted:    #6E6862;
--a-line:     #E6DFD4;
--a-tint:     var( --hx-tint, var( --helix-cream, #F6F1EA ) );
--a-soft:     color-mix( in srgb, var( --a-tint ) 55%, #fff );
--a-ease:     cubic-bezier( .2, .8, .2, 1 );
--a-r:        28px; position: relative;
width: calc( 100vw - var( --hx-sbw, 0px ) );
max-width: none;
margin-left: calc( 50% - ( 100vw - var( --hx-sbw, 0px ) ) / 2 );
padding: 8px clamp( 14px, 3vw, 48px ) 70px;
color: var( --a-ink );
font-family: inherit;
}
.hx-wa:not(#hx_) > * { max-width: 1320px; margin-left: auto; margin-right: auto; }
.hx-wa:not(#hx_) *,
.hx-wa:not(#hx_) *::before,
.hx-wa:not(#hx_) *::after { box-sizing: border-box; }
.hx-wa:not(#hx_) img { display: block; max-width: 100%; height: auto; }
.hx-wa:not(#hx_) a { text-decoration: none; }
.hx-wa:not(#hx_) h1, .hx-wa:not(#hx_) h2, .hx-wa:not(#hx_) h3 { margin: 0; color: inherit; font-family: inherit; letter-spacing: -.02em; }
.hx-wa:not(#hx_) p { margin: 0; } .hx-article-page:not(#hx_) .page-header,
.hx-article-page:not(#hx_) .entry-header,
.hx-article-page:not(#hx_) .elementor-widget-theme-post-title { display: none !important; }
.hx-wa-ico:not(#hx_) { width: 18px; height: 18px; flex: 0 0 auto; }
.hx-wa-eyebrow:not(#hx_) {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 10px !important;
color: var( --a-accent );
font-size: 13px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
}
.hx-wa:not(#hx_) h2 { font-size: clamp( 26px, 2.8vw, 40px ); font-weight: 700; line-height: 1.1; }
.hx-wa-sec:not(#hx_) p:not( .hx-wa-eyebrow ) { color: var( --a-muted ); font-size: 16px; line-height: 1.65; }
.hx-wa-sec:not(#hx_) p + p { margin-top: 12px; }
.hx-wa-sec:not(#hx_) b { color: var( --a-ink ); }
.hx-wa:not(#hx_) h2 + p { margin-top: 14px; } .hx-wa-btns:not(#hx_) { display: flex; flex-wrap: wrap; gap: 10px; }
.hx-wa:not(#hx_) .hx-wa-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
height: 54px;
padding: 0 24px;
border: 1px solid transparent;
border-radius: 999px;
font-size: 15px;
font-weight: 600;
white-space: nowrap;
transition: background-color .2s, border-color .2s, color .2s, transform .2s;
}
.hx-wa:not(#hx_) .hx-wa-btn:hover .hx-wa-ico:last-child { transform: translateX( 2px ); }
.hx-wa-btn:not(#hx_) .hx-wa-ico { transition: transform .3s var( --a-ease ); }
.hx-wa:not(#hx_) .hx-wa-btn--accent { background: var( --a-accent ); color: #fff; }
.hx-wa:not(#hx_) .hx-wa-btn--accent:hover { background: var( --a-accent-d ); color: #fff; }
.hx-wa:not(#hx_) .hx-wa-btn--light { background: #fff; color: var( --a-ink ); }
.hx-wa:not(#hx_) .hx-wa-btn--light:hover { background: var( --a-tint ); color: var( --a-ink ); }
.hx-wa:not(#hx_) .hx-wa-btn--ghost { border-color: var( --a-line ); background: #fff; color: var( --a-ink ); }
.hx-wa:not(#hx_) .hx-wa-btn--ghost:hover { border-color: var( --a-ink ); color: var( --a-ink ); }
.hx-wa:not(#hx_) .hx-wa-btn--outline { border-color: rgba( 255, 255, 255, .45 ); color: #fff; }
.hx-wa:not(#hx_) .hx-wa-btn--outline:hover { border-color: #fff; background: rgba( 255, 255, 255, .1 ); color: #fff; } .hx-wa-hero:not(#hx_) {
position: relative;
display: flex;
align-items: flex-end;
min-height: clamp( 440px, 48vw, 640px );
padding: clamp( 26px, 4vw, 60px );
overflow: hidden;
border-radius: var( --a-r );
background: var( --a-dark );
color: #fff;
isolation: isolate;
}
.hx-wa:not(#hx_) .hx-wa-hero__bg {
position: absolute;
inset: 0;
z-index: -2;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
transform: translateZ( 0 );
animation: hx-wa-zoom 14s cubic-bezier( .22, .61, .36, 1 ) both;
will-change: transform;
}
@keyframes hx-wa-zoom { from { transform: scale( 1.18 ) rotate( .02deg ) translateZ( 0 ); } to { transform: scale( 1.001 ) rotate( .02deg ) translateZ( 0 ); } }
.hx-wa-hero:not(#hx_)::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient( 90deg, rgba( 20, 14, 12, .82 ), rgba( 20, 14, 12, .35 ) 60%, rgba( 20, 14, 12, .1 ) );
}
.hx-wa-hero__in:not(#hx_) { display: grid; gap: 16px; max-width: 680px; animation: hx-wa-up .8s var( --a-ease ) both; }
@keyframes hx-wa-up { from { opacity: 0; transform: translateY( 14px ); } }
.hx-wa-hero__logo:not(#hx_) { display: inline-flex; justify-self: start; padding: 10px 16px; border-radius: 14px; background: #fff; }
.hx-wa-hero__logo:not(#hx_) img { width: auto; height: 34px; }
.hx-wa-hero:not(#hx_) .hx-wa-eyebrow { margin: 0 !important; color: rgba( 255, 255, 255, .8 ); }
.hx-wa-hero:not(#hx_) h1 { color: #fff; font-size: clamp( 34px, 4.6vw, 64px ); font-weight: 700; line-height: 1.02; text-wrap: balance; }
.hx-wa:not(#hx_) .hx-wa-hero__lead { max-width: 52ch; color: rgba( 255, 255, 255, .86 ); font-size: clamp( 15px, 1.3vw, 18px ); line-height: 1.55; }
.hx-wa-hero:not(#hx_) .hx-wa-btns { margin-top: 6px; } .hx-wa-nav:not(#hx_) {
position: sticky;
top: 96px;
z-index: 5;
display: flex;
gap: 6px;
width: max-content;
max-width: 100%;
margin-top: -28px !important;
padding: 6px;
overflow-x: auto;
border-radius: 999px;
background: rgba( 255, 255, 255, .94 );
backdrop-filter: blur( 12px );
-webkit-backdrop-filter: blur( 12px );
box-shadow: 0 12px 32px rgba( 0, 0, 0, .12 );
scrollbar-width: none;
}
.hx-wa-nav:not(#hx_)::-webkit-scrollbar { display: none; }
.hx-wa:not(#hx_) .hx-wa-nav a {
flex: 0 0 auto;
padding: 10px 16px;
border-radius: 999px;
color: var( --a-ink );
font-size: 14px;
font-weight: 600;
transition: background-color .2s, color .2s;
}
.hx-wa:not(#hx_) .hx-wa-nav a:hover { background: var( --a-accent ); color: #fff; } .hx-wa-sec:not(#hx_) { margin-top: clamp( 56px, 7vw, 96px ); scroll-margin-top: 160px; }
.hx-wa-band:not(#hx_) {
padding: clamp( 28px, 4vw, 56px );
border-radius: var( --a-r );
background: var( --a-soft );
}
.hx-wa-head:not(#hx_) {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 18px 32px;
margin-bottom: 26px;
}
.hx-wa-head:not(#hx_) > div { max-width: 720px; } .hx-wa-intro:not(#hx_) { display: grid; grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1.1fr ); gap: clamp( 24px, 4vw, 64px ); align-items: center; }
.hx-wa-stats:not(#hx_) {
display: grid;
grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
gap: 10px;
margin: 0;
}
.hx-wa-stats:not(#hx_) > div { padding: 20px 22px; border-radius: 20px; background: var( --a-tint ); }
.hx-wa-stats:not(#hx_) > div:first-child { grid-column: span 2; background: var( --a-accent ); color: #fff; }
.hx-wa-stats:not(#hx_) dt { margin: 0 0 4px; font-size: clamp( 26px, 2.6vw, 38px ); font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.hx-wa-stats:not(#hx_) dd { margin: 0; color: var( --a-muted ); font-size: 14px; line-height: 1.4; }
.hx-wa-stats:not(#hx_) > div:first-child dd { color: rgba( 255, 255, 255, .8 ); } .hx-wa-split:not(#hx_) { display: grid; grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr ); gap: clamp( 24px, 4vw, 64px ); align-items: center; }
.hx-wa-split--rev:not(#hx_) .hx-wa-split__text { order: 0; }
.hx-wa-split__media:not(#hx_) { overflow: hidden; border-radius: var( --a-r ); background: var( --a-tint ); }
.hx-wa-split__media:not(#hx_) img { width: 100%; }
.hx-wa-split__media--contain:not(#hx_) { padding: clamp( 18px, 3vw, 40px ); }
.hx-wa-certs:not(#hx_) { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; }
.hx-wa-certs:not(#hx_) li {
display: flex;
align-items: center;
justify-content: center;
width: 92px;
height: 72px;
padding: 10px;
border: 1px solid var( --a-line );
border-radius: 16px;
background: #fff;
}
.hx-wa-certs:not(#hx_) img { max-height: 100%; width: auto; object-fit: contain; } .hx-wa-swatches:not(#hx_) {
display: grid;
grid-template-columns: repeat( auto-fill, minmax( 104px, 1fr ) );
gap: 12px;
margin: 0;
padding: 0;
list-style: none;
}
.hx-wa-swatches:not(#hx_) li { display: grid; gap: 6px; }
.hx-wa-swatches:not(#hx_) img {
width: 100%;
aspect-ratio: 1;
border-radius: 16px;
object-fit: cover;
box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, .06 );
transition: transform .4s var( --a-ease ), box-shadow .3s;
}
.hx-wa-swatches:not(#hx_) li:hover img { transform: translateY( -3px ); box-shadow: 0 12px 24px rgba( 0, 0, 0, .14 ); }
.hx-wa-swatches:not(#hx_) span { color: var( --a-muted ); font-size: 12px; font-weight: 600; text-align: center; } .hx-wa-mosaic:not(#hx_) { display: grid; grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); grid-auto-rows: clamp( 140px, 15vw, 230px ); gap: 12px; }
.hx-wa-mosaic:not(#hx_) figure { margin: 0; overflow: hidden; border-radius: 20px; background: var( --a-tint ); }
.hx-wa-mosaic:not(#hx_) figure.is-big { grid-column: span 2; grid-row: span 2; }
.hx-wa-mosaic:not(#hx_) img { width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 1s var( --a-ease ); }
.hx-wa-mosaic:not(#hx_) figure:hover img { transform: scale( 1.05 ); } .hx-wa-cards:not(#hx_) { display: grid; grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); gap: 12px; }
.hx-wa:not(#hx_) .hx-wa-card {
position: relative;
display: grid;
gap: 6px;
align-content: start;
min-height: 170px;
padding: 20px;
border: 1px solid var( --a-line );
border-radius: 22px;
background: #fff;
color: var( --a-ink );
transition: border-color .2s, transform .3s var( --a-ease ), box-shadow .3s;
}
.hx-wa:not(#hx_) .hx-wa-card:hover { border-color: var( --a-accent ); transform: translateY( -3px ); box-shadow: 0 16px 34px rgba( 0, 0, 0, .08 ); color: var( --a-ink ); }
.hx-wa-card:not(#hx_) strong, .hx-wa-card:not(#hx_) .hx-t { margin-top: 10px; font-size: 16px; line-height: 1.3; }
.hx-wa-card:not(#hx_) small { color: var( --a-muted ); font-size: 13px; }
.hx-wa-card__ico:not(#hx_) {
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 14px;
background: var( --a-tint );
color: var( --a-accent );
}
.hx-wa-card__ico:not(#hx_) .hx-wa-ico { width: 22px; height: 22px; }
.hx-wa-card__go:not(#hx_) { position: absolute; right: 18px; bottom: 18px; color: var( --a-accent ); }
.hx-wa-card__go:not(#hx_) .hx-wa-ico { transition: transform .3s var( --a-ease ); }
.hx-wa-card:hover:not(#hx_) .hx-wa-card__go .hx-wa-ico { transform: translateX( 3px ); } .hx-wa-links:not(#hx_) { display: grid; gap: 10px; }
.hx-wa:not(#hx_) .hx-wa-links a {
display: flex;
align-items: center;
gap: 16px;
padding: 16px 20px 16px 16px;
border: 1px solid var( --a-line );
border-radius: 20px;
background: #fff;
color: var( --a-ink );
transition: border-color .2s, transform .3s var( --a-ease );
}
.hx-wa:not(#hx_) .hx-wa-links a:hover { border-color: var( --a-accent ); transform: translateX( 3px ); color: var( --a-ink ); }
.hx-wa-links:not(#hx_) a > span:not( .hx-wa-card__ico ) { display: grid; flex: 1 1 auto; gap: 2px; }
.hx-wa-links:not(#hx_) strong, .hx-wa-links:not(#hx_) .hx-t { font-size: 16px; }
.hx-wa-links:not(#hx_) small { color: var( --a-muted ); font-size: 13px; }
.hx-wa-links:not(#hx_) a > .hx-wa-ico { color: var( --a-accent ); } .hx-wa-note:not(#hx_) {
display: grid;
grid-template-columns: auto minmax( 0, 1fr );
gap: clamp( 18px, 3vw, 36px );
padding: clamp( 26px, 4vw, 52px );
border-radius: var( --a-r );
background: var( --a-tint );
}
.hx-wa-note:not(#hx_) > div { max-width: 820px; }
.hx-wa-note__ico:not(#hx_) {
display: flex;
align-items: center;
justify-content: center;
width: 72px;
height: 72px;
border-radius: 22px;
background: #fff;
color: var( --a-accent );
}
.hx-wa-note__ico:not(#hx_) .hx-wa-ico { width: 34px; height: 34px; }
.hx-wa:not(#hx_) .hx-wa-warn {
margin: 18px 0 20px !important;
padding: 14px 18px;
border-left: 3px solid var( --a-accent );
border-radius: 0 14px 14px 0;
background: #fff;
color: var( --a-ink ) !important;
font-weight: 600;
} .hx-wa-awards:not(#hx_) { display: grid; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 16px; }
.hx-wa-award:not(#hx_) { overflow: hidden; border: 1px solid var( --a-line ); border-radius: var( --a-r ); background: #fff; }
.hx-wa-award__img:not(#hx_) { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var( --a-tint ); }
.hx-wa-award__img:not(#hx_) img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.hx-wa-award__img:not(#hx_) span {
position: absolute;
top: 16px;
left: 16px;
padding: 7px 14px;
border-radius: 999px;
background: var( --a-accent );
color: #fff;
font-size: 14px;
font-weight: 700;
}
.hx-wa-award__body:not(#hx_) { padding: 22px 24px 26px; }
.hx-wa-award:not(#hx_) h3 { margin-bottom: 8px; font-size: 20px; font-weight: 700; line-height: 1.25; }
.hx-wa-award:not(#hx_) p { color: var( --a-muted ); font-size: 15px; line-height: 1.6; } .hx-wa-quotes:not(#hx_) { display: grid; grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); gap: 14px; }
.hx-wa-quote:not(#hx_) {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 22px;
margin: 0;
padding: 26px;
border-radius: 24px;
background: #fff;
}
.hx-wa-quote:not(#hx_) blockquote { margin: 0; padding: 0; border: 0; color: var( --a-ink ); font-size: 15.5px; font-style: normal; line-height: 1.6; }
.hx-wa-quote:not(#hx_) figcaption { display: flex; align-items: center; gap: 12px; }
.hx-wa-quote:not(#hx_) figcaption > span:last-child { display: grid; gap: 2px; }
.hx-wa-quote:not(#hx_) strong, .hx-wa-quote:not(#hx_) .hx-t { font-size: 15px; }
.hx-wa-quote:not(#hx_) small { color: var( --a-muted ); font-size: 13px; }
.hx-wa-quote__logo:not(#hx_) {
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
padding: 8px;
border-radius: 14px;
background: var( --a-tint );
}
.hx-wa-quote__logo:not(#hx_) img { max-height: 100%; width: auto; object-fit: contain; } .hx-wa-faqwrap:not(#hx_) { display: grid; grid-template-columns: minmax( 0, .8fr ) minmax( 0, 1.2fr ); gap: clamp( 24px, 4vw, 64px ); align-items: start; }
.hx-wa-faqwrap:not(#hx_) a { color: var( --a-accent ); font-weight: 600; }
.hx-wa-faq:not(#hx_) { display: grid; gap: 10px; }
.hx-wa-faq:not(#hx_) details { border: 1px solid var( --a-line ); border-radius: 20px; background: #fff; transition: border-color .2s; }
.hx-wa-faq:not(#hx_) details[open] { border-color: #BAA2A1; border-color: color-mix( in srgb, var( --a-accent ) 40%, var( --a-line ) ); }
.hx-wa-faq:not(#hx_) summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px 20px;
color: var( --a-ink );
font-size: 16px;
font-weight: 700;
list-style: none;
cursor: pointer;
}
.hx-wa-faq:not(#hx_) summary::-webkit-details-marker { display: none; }
.hx-wa-faq:not(#hx_) summary .hx-wa-ico { color: var( --a-accent ); transition: transform .3s var( --a-ease ); }
.hx-wa-faq:not(#hx_) details[open] summary .hx-wa-ico { transform: rotate( 45deg ); }
.hx-wa-faq:not(#hx_) details > div { padding: 0 20px 20px; }
.hx-wa-faq:not(#hx_) details > div p { color: var( --a-muted ); font-size: 15px; line-height: 1.65; }
.hx-wa-faq:not(#hx_) details > div p + p { margin-top: 10px; } .hx-wa-cta:not(#hx_) {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 24px;
margin-top: clamp( 56px, 7vw, 96px );
padding: clamp( 28px, 4vw, 56px );
border-radius: var( --a-r );
background: linear-gradient( 135deg, var( --a-dark ), #4D3135 ); background: linear-gradient( 135deg, var( --a-dark ), color-mix( in srgb, var( --a-dark ) 55%, var( --a-accent ) ) );
color: #fff;
}
.hx-wa-cta:not(#hx_) > div:first-child { max-width: 620px; }
.hx-wa-cta:not(#hx_) h2 { color: #fff; }
.hx-wa:not(#hx_) .hx-wa-cta p { margin-top: 12px; color: rgba( 255, 255, 255, .78 ); font-size: 16px; line-height: 1.6; } @media ( max-width: 1024px ) {
.hx-wa-intro:not(#hx_),
.hx-wa-split:not(#hx_),
.hx-wa-faqwrap:not(#hx_) { grid-template-columns: 1fr; }
.hx-wa-cards:not(#hx_) { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
.hx-wa-quotes:not(#hx_) { grid-template-columns: 1fr; }
.hx-wa-mosaic:not(#hx_) { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); }
.hx-wa-mosaic:not(#hx_) figure.is-big { grid-column: span 2; }
}
@media ( max-width: 767px ) {
.hx-wa:not(#hx_) { padding-bottom: 40px; }
.hx-wa-hero:not(#hx_) { min-height: 520px; border-radius: 22px; }
.hx-wa-hero:not(#hx_)::before { background: linear-gradient( to top, rgba( 20, 14, 12, .85 ), rgba( 20, 14, 12, .2 ) 80% ); }
.hx-wa-hero:not(#hx_) .hx-wa-btns .hx-wa-btn { flex: 1 1 100%; }
.hx-wa-nav:not(#hx_) { top: 74px; margin-top: 12px !important; border-radius: 18px; }
.hx-wa-band:not(#hx_), .hx-wa-note:not(#hx_) { border-radius: 22px; }
.hx-wa-note:not(#hx_) { grid-template-columns: 1fr; }
.hx-wa-awards:not(#hx_) { grid-template-columns: 1fr; }
.hx-wa-cards:not(#hx_) { grid-template-columns: 1fr; }
.hx-wa:not(#hx_) .hx-wa-card { min-height: 0; }
.hx-wa-mosaic:not(#hx_) { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); grid-auto-rows: 150px; gap: 8px; }
.hx-wa-swatches:not(#hx_) { grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); gap: 8px; }
.hx-wa-swatches:not(#hx_) img { border-radius: 12px; }
.hx-wa-swatches:not(#hx_) span { font-size: 10.5px; }
.hx-wa-stats:not(#hx_) > div { padding: 16px; }
}
@media ( prefers-reduced-motion: reduce ) {
.hx-wa:not(#hx_) *, .hx-wa:not(#hx_) *::before { animation: none !important; transition-duration: .01ms !important; }
} .hx-wa-band:not(#hx_) { background: var( --a-tint ); }
.hx-wa-split:not(#hx_) { align-items: start; }
.hx-wa-split__text:not(#hx_) > .hx-wa-eyebrow:first-child { margin-top: 0 !important; }
.hx-wa-split--rev:not(#hx_) .hx-wa-links { padding-top: 32px; }
@media ( max-width: 1024px ) { .hx-wa-split--rev:not(#hx_) .hx-wa-links { padding-top: 0; } }