.hm {
--hm-red: #FF293A;
--hm-red-deep: #E01427;
--hm-red-tint: rgba(255, 41, 58, 0.08);
--hm-ink: #1d2127;
--hm-lead: #2a2f37;
--hm-body: #5a606a;
--hm-label: #4a5058;
--hm-tile: #f7f8fa;
--hm-rule: #eceef1;
--hm-line-strong: #d8dbe0;
--hm-pill: #f1f2f4;
--hm-pill-rule: #e6e7ea;
--hm-dark: #1d2127;
--hm-darker: #14171c;
--hm-pad: 74px;
--hm-pad-end: 78px;
font-family: 'Work Sans', sans-serif;
position: relative;
}
.hm *,
.hm *::before,
.hm *::after {
box-sizing: border-box;
}
:where(.hm) p {
font-family: 'Work Sans', sans-serif;
margin: 0;
line-height: 1.75;
}
:where(.hm) h1,
:where(.hm) h2,
:where(.hm) h3,
:where(.hm) h4 {
font-family: 'Work Sans', sans-serif;
margin: 0;
color: inherit;
line-height: 1.15;
}
:where(.hm) ul {
margin: 0;
padding: 0;
list-style: none;
}
.hm__title {
font-size: 40px;
font-weight: 700;
color: var(--hm-ink);
margin-bottom: 20px;
letter-spacing: -0.01em;
text-wrap: balance;
}
.hm__divider {
width: 60px;
height: 4px;
background: var(--hm-red);
border-radius: 2px;
margin-bottom: 24px;
}
.hm__lead {
font-size: 18px;
font-weight: 500;
color: var(--hm-lead);
line-height: 1.7;
}
.hm__body {
font-size: 15px;
color: var(--hm-body);
line-height: 1.8;
}
.hm__head {
max-width: 820px;
margin: 0 0 40px;
}
.hm-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
font-family: 'Work Sans', sans-serif;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.2px;
line-height: 1;
padding: 16px 26px;
border-radius: 8px;
border: 1px solid var(--hm-red);
background: var(--hm-red);
color: #fff;
min-width: 0;
transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.hm-btn:link,
.hm-btn:visited,
.hm-btn:active,
.hm-btn:focus {
color: #fff;
}
.hm-btn:hover,
.hm-btn:focus-visible {
background: var(--hm-red-deep);
border-color: var(--hm-red-deep);
color: #fff;
transform: translateY(-2px);
box-shadow: 0 10px 26px rgba(255, 41, 58, 0.28);
}
.hm-btn svg {
flex: none;
transition: transform .25s ease;
}
.hm-btn:hover svg {
transform: translateX(3px);
}
.hm-btn--ghost {
background: transparent;
border-color: rgba(255, 255, 255, 0.32);
color: #fff;
}
.hm-btn--ghost:link,
.hm-btn--ghost:visited,
.hm-btn--ghost:active,
.hm-btn--ghost:focus {
color: #fff;
}
.hm-btn--ghost:hover,
.hm-btn--ghost:focus-visible {
background: rgba(255, 255, 255, 0.1);
border-color: #fff;
color: #fff;
box-shadow: none;
}
.hm-btn--outline {
background: transparent;
border-color: rgba(29, 33, 39, 0.18);
color: var(--hm-ink);
}
.hm-btn--outline:link,
.hm-btn--outline:visited,
.hm-btn--outline:active,
.hm-btn--outline:focus {
color: var(--hm-ink);
}
.hm-btn--outline:hover,
.hm-btn--outline:focus-visible {
background: var(--hm-ink);
border-color: var(--hm-ink);
color: #fff;
box-shadow: 0 10px 26px rgba(29, 33, 39, 0.18);
}
.hm-btn--sm {
padding: 13px 20px;
font-size: 12px;
}
.hm__actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: center;
}
.hm-chip {
display: inline-block;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.5px;
color: var(--hm-ink);
background: var(--hm-pill);
border: 1px solid var(--hm-pill-rule);
padding: 7px 14px;
border-radius: 20px;
}
.hm-chips {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.hm-anim {
opacity: 0;
transform: translateY(26px);
transition: opacity .6s ease var(--hm-delay, 0s), transform .6s ease var(--hm-delay, 0s);
}
.hm-anim.is-visible {
opacity: 1;
transform: translateY(0);
}
.hm :focus-visible {
outline: 2px solid var(--hm-red);
outline-offset: 3px;
border-radius: 4px;
}
.hm-topline {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 30px;
margin-bottom: 40px;
}
.hm-topline .hm__head,
.hm-topline .hm-portfolio__head {
margin-bottom: 0;
}
.hm-hero {
position: relative;
isolation: isolate;
background: var(--hm-dark);
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 520px;
}
.hm-hero__media {
position: absolute;
inset: 0;
z-index: 0;
}
.hm-hero__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hm-hero__scrim {
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(90deg, rgba(15, 17, 21, 0.93) 0%, rgba(15, 17, 21, 0.74) 32%, rgba(15, 17, 21, 0.24) 62%, rgba(15, 17, 21, 0.1) 100%),
linear-gradient(0deg, rgba(15, 17, 21, 0.72) 0%, rgba(15, 17, 21, 0) 42%);
}
.hm-hero__inner {
position: relative;
z-index: 3;
padding-top: 92px;
padding-bottom: 52px;
}
.hm-hero__content {
max-width: 690px;
color: #fff;
}
.hm-hero__heading {
font-size: 64px;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.02;
margin-bottom: 16px;
color: #fff;
}
.hm-hero__tagline {
display: block;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 3px;
color: rgba(255, 255, 255, 0.78);
margin-bottom: 18px;
}
.hm-hero__content .hm__divider {
margin-bottom: 22px;
}
.hm-hero__sub {
font-size: 18px;
line-height: 1.75;
color: rgba(255, 255, 255, 0.82);
max-width: 560px;
margin-bottom: 30px;
}
.hm-hero__stats {
position: relative;
z-index: 3;
border-top: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(10, 12, 15, 0.55);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.hm-hero__stats-inner {
display: flex;
align-items: stretch;
flex-wrap: wrap;
padding-top: 22px;
padding-bottom: 22px;
gap: 0;
}
.hm-hero__stat {
flex: 1 1 0;
min-width: 160px;
padding: 0 26px;
}
.hm-hero__stat:first-child {
padding-left: 0;
}
.hm-hero__stat + .hm-hero__stat {
border-left: 1px solid rgba(255, 255, 255, 0.12);
}
.hm-hero__stat-value {
display: block;
font-size: 24px;
font-weight: 700;
color: #fff;
line-height: 1.1;
margin-bottom: 7px;
font-variant-numeric: tabular-nums;
}
.hm-hero__stat-label {
display: block;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.6px;
color: rgba(255, 255, 255, 0.55);
line-height: 1.4;
}
.hm-route {
background: #fff;
border-bottom: 1px solid var(--hm-rule);
}
.hm-route__inner {
display: flex;
align-items: center;
gap: 24px;
flex-wrap: wrap;
padding: 24px 0;
position: relative;
}
.hm-route__text {
flex: 1 1 320px;
}
.hm-route__title {
font-size: 19px;
font-weight: 700;
color: var(--hm-ink);
line-height: 1.35;
}
.hm-route__note {
font-size: 14px;
color: var(--hm-body);
margin-top: 4px;
}
.hm-about {
background: #fff;
padding: var(--hm-pad) 0 var(--hm-pad-end);
}
.hm-about__split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.hm-about__split--copy,
.hm-about__split--media {
grid-template-columns: 1fr;
}
.hm-about__split--copy .hm-about__copy {
max-width: 820px;
}
.hm-about__split--media .hm-about__media {
max-width: 1000px;
margin: 0 auto;
width: 100%;
}
.hm-about__ethic {
margin: 26px 0;
padding: 22px 0 0;
border-top: 1px solid var(--hm-rule);
}
.hm-about__ethic-label {
display: block;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--hm-label);
margin-bottom: 14px;
}
.hm-about__ethic-list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.hm-about__ethic-item {
font-size: 13px;
font-weight: 700;
color: var(--hm-ink);
padding-top: 12px;
border-top: 3px solid var(--hm-red);
}
.hm-about__actions {
margin-top: 28px;
}
.hm-video {
position: relative;
border-radius: 16px;
overflow: hidden;
background: var(--hm-darker);
aspect-ratio: 4 / 3;
box-shadow: 0 24px 60px rgba(29, 33, 39, 0.22);
}
.hm-video__poster {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hm-video__frame {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
display: block;
}
.hm-video video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
background: #000;
}
.hm-video__play {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(12, 14, 18, 0.28);
border: 0;
border-radius: 0;
padding: 0;
cursor: pointer;
transition: background-color .3s ease;
text-transform: none;
min-width: 0;
}
.hm-video__play:hover,
.hm-video__play:focus-visible {
background: rgba(12, 14, 18, 0.42);
}
.hm-video__play-ring {
width: 78px;
height: 78px;
border-radius: 50%;
background: var(--hm-red);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
box-shadow: 0 12px 34px rgba(255, 41, 58, 0.42);
transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}
.hm-video__play:hover .hm-video__play-ring {
transform: scale(1.08);
}
.hm-video__caption {
position: absolute;
left: 18px;
bottom: 18px;
display: inline-flex;
align-items: center;
gap: 9px;
padding: 8px 15px;
border-radius: 30px;
background: rgba(12, 14, 18, 0.72);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border: 1px solid rgba(255, 255, 255, 0.12);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.4px;
color: rgba(255, 255, 255, 0.82);
pointer-events: none;
}
.hm-video.is-playing .hm-video__play,
.hm-video.is-playing .hm-video__caption,
.hm-video.is-playing .hm-video__poster {
display: none;
}
.hm-cap {
background: var(--hm-tile);
padding: var(--hm-pad) 0 var(--hm-pad-end);
border-top: 1px solid var(--hm-rule);
border-bottom: 1px solid var(--hm-rule);
}
.hm-cap__head {
max-width: 820px;
margin: 0 0 40px;
}
.hm-cap__list {
margin: 0;
border-top: 1px solid var(--hm-line-strong);
}
.hm-cap__row {
display: grid;
grid-template-columns: 300px 1fr;
gap: 40px;
padding: 22px 0;
border-bottom: 1px solid var(--hm-rule);
}
.hm-cap__row-key {
font-size: 19px;
font-weight: 700;
color: var(--hm-ink);
line-height: 1.35;
margin: 0;
}
.hm-cap__row-val {
font-size: 16px;
color: var(--hm-body);
line-height: 1.8;
margin: 0;
max-width: 68ch;
}
.hm-cap__applications {
margin-top: 36px;
}
.hm-cap__applications-label {
display: block;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--hm-label);
margin-bottom: 18px;
}
.hm-cap__statement {
max-width: 880px;
margin: 36px 0 0;
padding-top: 28px;
border-top: 1px solid var(--hm-line-strong);
font-size: 18px;
font-weight: 500;
line-height: 1.75;
color: var(--hm-lead);
}
.hm-ranges {
background: #fff;
padding: var(--hm-pad) 0 var(--hm-pad-end);
}
.hm-ranges__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
.hm-range {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--hm-rule);
border-radius: 14px;
overflow: hidden;
transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.hm-range:hover {
transform: translateY(-5px);
box-shadow: 0 20px 44px rgba(29, 33, 39, 0.12);
border-color: rgba(255, 41, 58, 0.18);
}
.hm-range__media {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(--hm-tile);
}
.hm-range__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
.hm-range:hover .hm-range__media img {
transform: scale(1.05);
}
.hm-range__tag {
position: absolute;
top: 14px;
left: 14px;
padding: 7px 13px;
border-radius: 20px;
background: rgba(12, 14, 18, 0.74);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.6px;
color: #fff;
}
.hm-range__body {
padding: 28px 28px 30px;
display: flex;
flex-direction: column;
flex: 1;
border-top: 3px solid var(--hm-red);
}
.hm-range__name {
font-size: 24px;
font-weight: 700;
color: var(--hm-ink);
margin-bottom: 12px;
line-height: 1.2;
}
.hm-range__text {
font-size: 15px;
color: var(--hm-body);
line-height: 1.78;
margin-bottom: 18px;
}
.hm-range__specs {
margin-top: auto;
margin-bottom: 24px;
border-top: 1px solid var(--hm-rule);
}
.hm-range__spec {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
padding: 11px 0;
border-bottom: 1px solid var(--hm-rule);
}
.hm-range__spec-key {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.6px;
color: var(--hm-label);
flex: none;
}
.hm-range__spec-val {
font-size: 13px;
font-weight: 600;
color: var(--hm-ink);
text-align: right;
}
.hm-range__foot {
margin-top: 0;
}
.hm-sys {
background: #fff;
padding: var(--hm-pad) 0 var(--hm-pad-end);
}
.hm .hm-sys__list {
margin: 0;
padding: 0;
list-style: none;
counter-reset: none;
}
.hm-sys__item {
display: grid;
grid-template-columns: 0.95fr 1.05fr;
gap: 52px;
align-items: center;
padding: 44px 0;
border-top: 1px solid var(--hm-rule);
}
.hm-sys__item:first-child {
border-top: 1px solid var(--hm-line-strong);
}
.hm-sys__item:nth-child(even) .hm-sys__media {
order: 2;
}
.hm-sys__item--nomedia {
grid-template-columns: 1fr;
}
.hm-sys__item--nomedia .hm-sys__body {
max-width: 860px;
}
.hm-sys__item--nomedia .hm-sys__specs {
max-width: 620px;
}
.hm-sys__media {
position: relative;
border-radius: 14px;
overflow: hidden;
background: var(--hm-tile);
aspect-ratio: 4 / 3;
}
.hm-sys__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hm-sys__tag {
position: absolute;
top: 14px;
left: 14px;
padding: 7px 13px;
border-radius: 20px;
background: rgba(12, 14, 18, 0.74);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.6px;
color: #fff;
}
.hm-sys__no {
display: block;
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
color: var(--hm-red);
font-variant-numeric: tabular-nums;
margin-bottom: 12px;
}
.hm-sys__title {
font-size: 24px;
font-weight: 700;
color: var(--hm-ink);
line-height: 1.2;
margin-bottom: 14px;
}
.hm .hm-sys__text {
font-size: 16px;
color: var(--hm-body);
line-height: 1.8;
margin-bottom: 22px;
}
.hm .hm-sys__specs {
margin: 0 0 24px;
border-top: 1px solid var(--hm-rule);
}
.hm-sys__spec {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
padding: 11px 0;
border-bottom: 1px solid var(--hm-rule);
}
.hm-sys__spec dt {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.6px;
color: var(--hm-label);
flex: none;
}
.hm .hm-sys__spec dd {
margin: 0;
font-size: 13px;
font-weight: 600;
color: var(--hm-ink);
text-align: right;
}
.hm-sys__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 18px;
}
.hm-sys__dl {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.2px;
color: var(--hm-ink);
border-bottom: 1px solid var(--hm-line-strong);
padding-bottom: 3px;
transition: color .2s ease, border-color .2s ease;
}
.hm-sys__dl:link,
.hm-sys__dl:visited,
.hm-sys__dl:active {
color: var(--hm-ink);
}
.hm-sys__dl:hover,
.hm-sys__dl:focus-visible {
color: var(--hm-red);
border-color: var(--hm-red);
}
.hm-sys__dl svg {
flex: none;
}
.hm-courses {
background: var(--hm-tile);
padding: var(--hm-pad) 0 var(--hm-pad-end);
border-top: 1px solid var(--hm-rule);
border-bottom: 1px solid var(--hm-rule);
}
.hm .hm-courses__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
gap: 28px;
margin: 0;
padding: 0;
list-style: none;
}
.hm-course {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--hm-rule);
border-radius: 14px;
overflow: hidden;
transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.hm-course:hover {
transform: translateY(-4px);
box-shadow: 0 18px 40px rgba(29, 33, 39, 0.1);
border-color: rgba(255, 41, 58, 0.18);
}
.hm-course__media {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(--hm-tile);
}
.hm-course__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hm-course__slots {
position: absolute;
top: 14px;
left: 14px;
padding: 7px 13px;
border-radius: 20px;
background: var(--hm-red);
color: #fff;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.4px;
font-variant-numeric: tabular-nums;
}
.hm-course__slots--none {
background: rgba(12, 14, 18, 0.78);
}
.hm-course__body {
display: flex;
flex-direction: column;
flex: 1;
padding: 26px 26px 24px;
border-top: 3px solid var(--hm-red);
}
.hm-course__name {
font-size: 19px;
font-weight: 700;
color: var(--hm-ink);
line-height: 1.3;
margin-bottom: 12px;
}
.hm .hm-course__text,
.hm .hm-course__text p {
font-size: 14px;
color: var(--hm-body);
line-height: 1.75;
margin: 0 0 18px;
}
.hm .hm-course__text ul {
margin: 10px 0 0;
padding: 0;
list-style: none;
}
.hm .hm-course__text li {
position: relative;
padding-left: 16px;
font-size: 13.5px;
line-height: 1.7;
color: var(--hm-body);
}
.hm .hm-course__text li::before {
content: '';
position: absolute;
left: 0;
top: 10px;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--hm-red);
}
.hm .hm-course__meta {
margin: auto 0 20px;
border-top: 1px solid var(--hm-rule);
}
.hm-course__meta-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 14px;
padding: 10px 0;
border-bottom: 1px solid var(--hm-rule);
}
.hm-course__meta-row dt {
display: inline-flex;
align-items: center;
gap: 8px;
flex: none;
color: var(--hm-label);
}
.hm-course__meta-row dt svg {
flex: none;
color: var(--hm-red);
}
.hm-course__meta-label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.6px;
}
.hm .hm-course__meta-row dd {
margin: 0;
font-size: 13px;
font-weight: 600;
color: var(--hm-ink);
text-align: right;
}
.hm-course__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
}
.hm .hm-course__price,
.hm .hm-course__price .amount,
.hm .hm-course__price bdi {
font-size: 19px;
font-weight: 700;
color: var(--hm-ink);
font-variant-numeric: tabular-nums;
}
.hm-course__unavailable {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.2px;
color: var(--hm-label);
}
.hm .hm-courses__empty {
font-size: 16px;
color: var(--hm-body);
line-height: 1.8;
}
.hm .hm-courses__empty a {
color: var(--hm-red);
font-weight: 600;
text-decoration: underline;
}
.hm-contact {
background: #fff;
padding: var(--hm-pad) 0 var(--hm-pad-end);
}
.hm-contact__head {
max-width: 820px;
margin: 0 0 44px;
}
.hm-contact__split {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 52px;
align-items: start;
}
.hm-contact__block {
padding: 18px 0;
border-bottom: 1px solid var(--hm-rule);
}
.hm-contact__block:first-child {
border-top: 1px solid var(--hm-line-strong);
}
.hm-contact__label {
display: block;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--hm-label);
margin-bottom: 8px;
}
.hm .hm-contact__rich,
.hm .hm-contact__rich p {
font-size: 15px;
line-height: 1.8;
color: var(--hm-ink);
margin: 0;
}
.hm .hm-contact__rich a {
color: var(--hm-ink);
font-weight: 600;
}
.hm .hm-contact__rich a:hover {
color: var(--hm-red);
}
.hm-contact__map {
margin-top: 24px;
border-radius: 14px;
overflow: hidden;
border: 1px solid var(--hm-rule);
line-height: 0;
}
.hm-contact__map iframe {
width: 100%;
height: 300px;
border: 0;
display: block;
}
.hm-contact__form {
background: var(--hm-tile);
border: 1px solid var(--hm-rule);
border-radius: 14px;
padding: 32px 30px 28px;
}
.hm-contact__form-title {
font-size: 24px;
font-weight: 700;
color: var(--hm-ink);
line-height: 1.2;
margin-bottom: 22px;
}
.hm-contact .salesforce_w2l_lead .w2llead {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0 20px;
}
.hm-contact .salesforce_w2l_lead .sf_field {
width: auto;
padding: 0;
margin-bottom: 18px;
}
.hm-contact .salesforce_w2l_lead .sf_field.sf_type_textarea,
.hm-contact .salesforce_w2l_lead .sf_field.sf_type_checkbox,
.hm-contact .salesforce_w2l_lead .w2lsubmit,
.hm-contact .salesforce_w2l_lead .sf_required_fields_msg {
grid-column: 1 / -1;
width: auto;
}
.hm-contact .salesforce_w2l_lead form .sf_field label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.4px;
color: var(--hm-label);
margin-bottom: 8px;
}
.hm-contact .salesforce_w2l_lead .sf_field input[type="text"],
.hm-contact .salesforce_w2l_lead .sf_field input[type="tel"],
.hm-contact .salesforce_w2l_lead .sf_field input[type="email"],
.hm-contact .salesforce_w2l_lead .sf_field textarea,
.hm-contact .salesforce_w2l_lead .sf_field select {
border-radius: 10px;
border-color: var(--hm-line-strong);
font-size: 15px;
padding: 12px 14px;
background-color: #fff;
}
.hm-contact .salesforce_w2l_lead .sf_field input:focus,
.hm-contact .salesforce_w2l_lead .sf_field textarea:focus,
.hm-contact .salesforce_w2l_lead .sf_field select:focus {
border-color: var(--hm-red);
box-shadow: 0 0 0 3px rgba(255, 41, 58, 0.12);
}
.hm-contact .salesforce_w2l_lead .w2lsubmit .submit,
.hm-contact .salesforce_w2l_lead input[type="submit"] {
background: var(--hm-red);
border: 1px solid var(--hm-red);
color: #fff;
border-radius: 8px;
padding: 15px 30px;
font-size: 13px;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
min-width: 0;
transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.hm-contact .salesforce_w2l_lead .w2lsubmit .submit:hover,
.hm-contact .salesforce_w2l_lead input[type="submit"]:hover {
background: var(--hm-red-deep);
border-color: var(--hm-red-deep);
transform: translateY(-2px);
box-shadow: 0 10px 26px rgba(255, 41, 58, 0.28);
}
.hm-depots {
background: var(--hm-tile);
padding: var(--hm-pad) 0 var(--hm-pad-end);
border-top: 1px solid var(--hm-rule);
}
.hm .hm-depots__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 26px;
margin: 0;
padding: 0;
list-style: none;
}
.hm-depot {
background: #fff;
border: 1px solid var(--hm-rule);
border-radius: 14px;
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.hm-depot:hover {
transform: translateY(-4px);
box-shadow: 0 18px 40px rgba(29, 33, 39, 0.1);
border-color: rgba(255, 41, 58, 0.18);
}
.hm-depot__map {
line-height: 0;
border-bottom: 3px solid var(--hm-red);
}
.hm-depot__map iframe {
width: 100%;
height: 210px;
border: 0;
display: block;
}
.hm-depot__body {
padding: 24px 24px 22px;
}
.hm .hm-depot__body,
.hm .hm-depot__body p {
font-size: 15px;
line-height: 1.8;
color: var(--hm-body);
margin: 0;
}
.hm .hm-depot__body strong,
.hm .hm-depot__body h3,
.hm .hm-depot__body h4 {
display: block;
font-size: 17px;
font-weight: 700;
color: var(--hm-ink);
margin: 0 0 8px;
line-height: 1.3;
}
.hm .hm-depot__body a {
color: var(--hm-ink);
font-weight: 600;
}
.hm .hm-depot__body a:hover {
color: var(--hm-red);
}
.hm-portfolio {
background: var(--hm-dark);
padding: var(--hm-pad) 0 0;
position: relative;
overflow: hidden;
}
.hm-portfolio__head {
max-width: 820px;
margin: 0 0 46px;
color: #fff;
}
.hm-portfolio__head .hm__title {
color: #fff;
}
.hm-portfolio__head .hm__lead {
color: rgba(255, 255, 255, 0.72);
font-size: 16px;
}
.hm-portfolio__slider {
margin-bottom: 0;
}
.hm-portfolio .hm-arrow {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.3);
color: #fff;
}
.hm-portfolio__plate {
position: relative;
aspect-ratio: 4 / 3;
margin: 0 8px;
border-radius: 12px;
overflow: hidden;
background: var(--hm-darker);
}
.hm-portfolio__plate img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .7s cubic-bezier(.22, 1, .36, 1);
}
.hm-portfolio__plate:hover img {
transform: scale(1.06);
}
.hm-portfolio__foot {
text-align: left;
padding: 36px 0 var(--hm-pad-end);
}
.hm .slick-arrow::after,
.hm-arrow::after {
content: none;
}
.hm-slider-nav {
display: flex;
gap: 10px;
flex: none;
}
.hm-arrow {
position: static;
display: flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
min-width: 0;
padding: 0;
border-radius: 50%;
border: 1px solid var(--hm-line-strong);
background: #fff;
color: var(--hm-ink);
font-size: 0;
text-transform: none;
cursor: pointer;
transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.hm-arrow:hover,
.hm-arrow:focus-visible {
background: var(--hm-red);
border-color: var(--hm-red);
color: #fff;
}
.hm-arrow.slick-disabled {
opacity: .4;
cursor: default;
}
.hm-portfolio .hm-arrow,
.hm-quotes--media .hm-arrow {
background: rgba(255, 255, 255, 0.14);
border-color: rgba(255, 255, 255, 0.28);
color: #fff;
}
.hm-portfolio .hm-arrow:hover,
.hm-portfolio .hm-arrow:focus-visible,
.hm-quotes--media .hm-arrow:hover,
.hm-quotes--media .hm-arrow:focus-visible {
background: var(--hm-red);
border-color: var(--hm-red);
color: #fff;
}
.hm-quotes {
background: var(--hm-tile);
padding: var(--hm-pad) 0 var(--hm-pad-end);
border-top: 1px solid var(--hm-rule);
position: relative;
}
.hm-quotes--media {
background: var(--hm-dark);
border-top: 0;
}
.hm-quotes__bg {
position: absolute;
inset: 0;
z-index: 0;
object-fit: cover;
width: 100%;
height: 100%;
opacity: 0.22;
}
.hm-quotes__inner {
position: relative;
z-index: 1;
}
.hm-quotes--media .hm__title {
color: #fff;
}
.hm-quotes--media .hm__lead {
color: rgba(255, 255, 255, 0.72);
}
.hm-quote {
height: auto;
padding: 0 12px;
}
.hm-quote__inner {
background: #fff;
border: 1px solid var(--hm-rule);
border-radius: 14px;
padding: 32px 30px 28px;
display: flex;
flex-direction: column;
position: relative;
}
.hm-quote__mark {
color: var(--hm-red);
margin-bottom: 16px;
display: block;
}
.hm-quote__text {
font-size: 15px;
color: var(--hm-lead);
line-height: 1.8;
margin-bottom: 24px;
}
.hm-quote__text p {
font-size: 15px;
line-height: 1.8;
margin: 0;
}
.hm-quote__text p + p {
margin-top: 14px;
}
.hm-quote__attrib {
padding-top: 20px;
border-top: 1px solid var(--hm-rule);
}
.hm-quote__name {
display: block;
font-size: 14px;
font-weight: 700;
color: var(--hm-ink);
margin-bottom: 3px;
}
.hm-quote__org {
display: block;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.6px;
color: var(--hm-label);
}
.hm-quotes .slick-track {
display: flex !important;
align-items: flex-start;
}
.hm-quotes .slick-slide {
height: auto !important;
}
.hm-quotes .slick-slide > div {
height: 100%;
}
@media (max-width: 1180px) {
.hm-hero__heading {
font-size: 54px;
}
}
@media (max-width: 980px) {
.hm {
--hm-pad: 56px;
--hm-pad-end: 60px;
}
.hm-about__split {
grid-template-columns: 1fr;
gap: 42px;
}
.hm-about__media {
order: -1;
}
.hm-ranges__grid {
grid-template-columns: 1fr;
gap: 24px;
}
.hm-hero {
min-height: 0;
}
.hm-hero__inner {
padding-top: 88px;
padding-bottom: 54px;
}
.hm-hero__scrim {
background:
linear-gradient(90deg, rgba(15, 17, 21, 0.9) 0%, rgba(15, 17, 21, 0.72) 55%, rgba(15, 17, 21, 0.5) 100%),
linear-gradient(0deg, rgba(15, 17, 21, 0.8) 0%, rgba(15, 17, 21, 0.2) 55%, rgba(15, 17, 21, 0.05) 100%);
}
.hm__title {
font-size: 32px;
}
}
@media (max-width: 768px) {
.hm-hero__heading {
font-size: 40px;
}
.hm-hero__sub {
font-size: 16px;
}
.hm-hero__stat {
flex: 1 1 50%;
min-width: 0;
padding: 14px 18px;
}
.hm-hero__stat:first-child {
padding-left: 18px;
}
.hm-hero__stats-inner {
padding-top: 8px;
padding-bottom: 8px;
}
.hm-hero__stat + .hm-hero__stat {
border-left: 1px solid rgba(255, 255, 255, 0.12);
}
.hm-hero__stat:nth-child(odd) {
border-left: 0;
padding-left: 0;
}
.hm-hero__stat:nth-child(n + 3) {
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.hm-hero__stat-value {
font-size: 21px;
}
.hm-about__ethic-list {
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
.hm-sys__title {
font-size: 21px;
}
.hm-sys__actions {
gap: 12px;
}
.hm-sys__actions .hm-btn {
width: 100%;
}
.hm-cap__row {
grid-template-columns: 1fr;
gap: 8px;
padding: 24px 0;
}
.hm-cap__row-key {
font-size: 18px;
}
.hm-cap__row-val {
font-size: 15px;
}
.hm-cap__head {
margin-bottom: 40px;
}
.hm-cap__statement {
font-size: 16px;
}
.hm-topline {
flex-direction: column;
align-items: flex-start;
gap: 24px;
margin-bottom: 36px;
}
.hm-portfolio__plate {
margin: 0;
}
.hm__title {
margin-bottom: 26px;
}
.hm-route__inner {
padding: 22px 0;
gap: 16px;
}
.hm-video {
aspect-ratio: 16 / 9;
}
.hm-video__play-ring {
width: 62px;
height: 62px;
}
.hm-btn {
width: 100%;
}
.hm__actions {
gap: 10px;
}
.hm-route .hm-btn {
width: auto;
}
}
@media (max-width: 560px) {
.hm-hero__heading {
font-size: 34px;
}
.hm-range__body {
padding: 24px 22px 26px;
}
.hm-quote__inner {
padding: 26px 24px 24px;
}
}
@media (prefers-reduced-motion: reduce) {
.hm-anim {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.hm *,
.hm *::before,
.hm *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
.hm-range:hover {
transform: none !important;
}
.hm-range:hover .hm-range__media img,
.hm-portfolio__plate:hover img {
transform: none !important;
}
} .hm-lib { padding: var(--hm-pad) 0 var(--hm-pad-end); }
.hm-lib .screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.hm-lib__head { max-width: 760px; margin-bottom: 44px; }
.hm-lib__controls {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px 28px;
padding-bottom: 24px;
border-bottom: 1px solid var(--hm-line-strong);
}
.hm-lib__search {
position: relative;
flex: 1 1 320px;
min-width: 260px;
}
.hm-lib__search-icon {
position: absolute;
top: 50%;
left: 16px;
width: 20px;
height: 20px;
margin-top: -10px;
color: var(--hm-body);
pointer-events: none;
} .hm-lib__search .hm-lib__input {
width: 100%;
font-family: 'Work Sans', sans-serif; font-size: 16px;
line-height: 20px;
color: var(--hm-ink);
background: var(--hm-tile);
border: 1px solid var(--hm-rule);
border-radius: 10px;
padding: 14px 18px 14px 46px;
transition: border-color .2s ease, background-color .2s ease;
-webkit-appearance: none;
appearance: none;
}
.hm-lib__search .hm-lib__input::placeholder { color: var(--hm-body); opacity: 1; }
.hm-lib__search .hm-lib__input:focus {
background: #fff;
border-color: var(--hm-line-strong);
outline: none;
}
.hm-lib__search .hm-lib__input:focus-visible {
outline: 2px solid var(--hm-red);
outline-offset: 2px;
}
.hm-lib__search .hm-lib__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.hm-lib__filters { gap: 8px; }
.hm-lib__filter {
font-family: 'Work Sans', sans-serif;
cursor: pointer;
transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}
.hm-lib__filter:hover { border-color: var(--hm-line-strong); }
.hm-lib__filter.is-active {
color: #fff;
background: var(--hm-ink);
border-color: var(--hm-ink);
}
.hm-lib__count {
font-size: 13px;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--hm-body);
font-variant-numeric: tabular-nums;
margin: 22px 0 0;
}
.hm-lib__group { margin-top: 46px; }
.hm-lib__group-title {
display: flex;
align-items: baseline;
gap: 14px;
font-size: 24px;
font-weight: 700;
color: var(--hm-ink);
padding-bottom: 14px;
border-bottom: 2px solid var(--hm-ink);
}
.hm-lib__group-count {
font-size: 14px;
font-weight: 600;
color: var(--hm-body);
font-variant-numeric: tabular-nums;
}
.hm-lib__list { list-style: none; margin: 0; padding: 0; }
.hm-lib__row { border-bottom: 1px solid var(--hm-rule); }
.hm-lib__link {
display: grid;
grid-template-columns: 1fr auto auto;
align-items: center;
gap: 18px 28px;
padding: 19px 14px 19px 4px;
text-decoration: none;
color: inherit;
border-radius: 8px;
transition: background-color .2s ease;
}
.hm-lib__link:hover {
background: var(--hm-tile);
} .hm-lib__name {
font-size: 17px;
font-weight: 600;
color: var(--hm-ink);
line-height: 1.4;
transition: transform .2s ease;
}
.hm-lib__link:hover .hm-lib__name,
.hm-lib__link:focus-visible .hm-lib__name {
transform: translateX(10px);
}
@media (prefers-reduced-motion: reduce) {
.hm-lib__name { transition: none; }
.hm-lib__link:hover .hm-lib__name,
.hm-lib__link:focus-visible .hm-lib__name { transform: none; }
}
.hm-lib__link:hover .hm-lib__name { color: var(--hm-red-deep); }
.hm-lib__meta {
display: flex;
align-items: center;
gap: 10px;
}
.hm-lib__kind,
.hm-lib__fmt {
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
color: var(--hm-label);
background: var(--hm-pill);
border: 1px solid var(--hm-pill-rule);
border-radius: 4px;
padding: 4px 8px;
}
.hm-lib__size {
font-size: 14px;
color: var(--hm-body);
font-variant-numeric: tabular-nums;
min-width: 72px;
text-align: right;
}
.hm-lib__go {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
color: var(--hm-body);
border: 1px solid var(--hm-rule);
border-radius: 50%;
transition: color .2s ease, border-color .2s ease, background-color .2s ease, transform .2s ease;
}
.hm-lib__go svg { width: 20px; height: 20px; }
.hm-lib__link:hover .hm-lib__go {
color: #fff;
background: var(--hm-red);
border-color: var(--hm-red);
transform: translateY(2px);
}
.hm-lib__empty {
font-size: 17px;
color: var(--hm-body);
padding: 46px 0;
margin: 0;
}
.hm-lib__group[hidden],
.hm-lib__row[hidden] { display: none; }
@media (max-width: 900px) {
.hm-lib { padding: 54px 0 58px; }
.hm-lib__group-title { font-size: 21px; }
}
@media (max-width: 640px) {
.hm-lib__link {
grid-template-columns: 1fr auto;
gap: 10px 16px;
padding: 16px 10px 16px 4px;
}
.hm-lib__name { grid-column: 1 / -1; font-size: 16px; }
.hm-lib__size { min-width: 0; text-align: left; }
.hm-lib__go { width: 34px; height: 34px; }
.hm-lib__link:hover { padding-left: 4px; }
} .hm-gallery { padding: var(--hm-pad) 0 var(--hm-pad-end); }
.hm-gallery .screen-reader-text,
.hm-lightbox .screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.hm-gallery__head { max-width: 760px; margin-bottom: 34px; }
.hm-gallery__head h1 { font-size: 54px; font-weight: 700; line-height: 1.08; color: var(--hm-ink); margin: 0 0 18px; }
.hm-gallery__head h2 { font-size: 34px; font-weight: 700; color: var(--hm-ink); margin: 0 0 16px; }
.hm-gallery__head p { font-size: 18px; color: var(--hm-body); }
.hm-gallery__filters { margin-bottom: 34px; gap: 8px; }
.hm-gallery__filter {
font-family: 'Work Sans', sans-serif;
cursor: pointer;
transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}
.hm-gallery__filter:hover { border-color: var(--hm-line-strong); }
.hm-gallery__filter.is-active {
color: #fff;
background: var(--hm-ink);
border-color: var(--hm-ink);
}
.hm-gallery__grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.hm-gallery__item { min-width: 0; }
.hm-gallery__item[hidden] { display: none; }
.hm-gallery__plate {
position: relative;
display: block;
width: 100%;
aspect-ratio: 4 / 3;
padding: 0;
border: 0;
border-radius: 12px;
overflow: hidden;
background: var(--hm-tile);
cursor: pointer;
}
.hm-gallery__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.hm-gallery__plate::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(20, 23, 28, 0.45), rgba(20, 23, 28, 0) 55%);
opacity: 0;
transition: opacity .35s ease;
}
.hm-gallery__plate:hover .hm-gallery__img { transform: scale(1.045); }
.hm-gallery__plate:hover::after { opacity: 1; }
.hm-gallery__zoom {
position: absolute;
right: 12px;
bottom: 12px;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
color: var(--hm-ink);
background: rgba(255, 255, 255, 0.94);
border-radius: 50%;
opacity: 0;
transform: translateY(6px);
transition: opacity .3s ease, transform .3s ease;
}
.hm-gallery__zoom svg { width: 21px; height: 21px; }
.hm-gallery__plate:hover .hm-gallery__zoom,
.hm-gallery__plate:focus-visible .hm-gallery__zoom {
opacity: 1;
transform: translateY(0);
}
.hm-gallery__empty {
font-size: 17px;
color: var(--hm-body);
padding: 46px 0;
margin: 0;
}
@media (max-width: 1100px) { .hm-gallery__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) {
.hm-gallery { padding: 54px 0 58px; }
.hm-gallery__head h1 { font-size: 40px; }
}
@media (max-width: 700px) { .hm-gallery__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
@media (max-width: 460px) {
.hm-gallery__head h1 { font-size: 32px; }
.hm-gallery__zoom { opacity: 1; transform: none; width: 32px; height: 32px; }
} .hm-lightbox {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 32px;
}
.hm-lightbox[hidden] { display: none; }
.hm-lightbox__backdrop {
position: absolute;
inset: 0;
background: rgba(14, 17, 21, 0.92);
animation: hm-lightbox-in .25s ease both;
}
.hm-lightbox__panel {
position: relative;
max-width: min(1180px, 100%);
max-height: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
animation: hm-lightbox-rise .3s cubic-bezier(.2, .7, .3, 1) both;
}
.hm-lightbox__img {
max-width: 100%;
max-height: calc(100vh - 150px);
width: auto;
height: auto;
display: block;
border-radius: 10px;
background: var(--hm-darker);
}
.hm-lightbox__caption {
font-family: 'Work Sans', sans-serif;
font-size: 15px;
color: rgba(255, 255, 255, 0.86);
text-align: center;
margin: 0;
} .hm-lightbox__close,
.hm-lightbox__nav {
position: absolute;
z-index: 2;
display: flex; padding: 0;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
color: #fff;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 50%;
cursor: pointer;
transition: background-color .2s ease, border-color .2s ease;
} .hm-lightbox__close svg,
.hm-lightbox__nav svg { width: 24px; height: 24px; flex: none; }
.hm-lightbox__close:hover,
.hm-lightbox__nav:hover {
background: var(--hm-red);
border-color: var(--hm-red);
}
.hm-lightbox__close { top: 24px; right: 24px; }
.hm-lightbox__nav--prev { left: 24px; top: 50%; transform: translateY(-50%); }
.hm-lightbox__nav--next { right: 24px; top: 50%; transform: translateY(-50%); }
.hm-lightbox__nav[hidden] { display: none; }
.hm-lightbox :focus-visible {
outline: 2px solid #fff;
outline-offset: 3px;
}
@keyframes hm-lightbox-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes hm-lightbox-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (max-width: 1000px) {
.hm-lightbox { padding: 16px; }
.hm-lightbox__close { top: 12px; right: 12px; background: rgba(14, 17, 21, 0.66); }
.hm-lightbox__nav--prev { left: 10px; }
.hm-lightbox__nav--next { right: 10px; } .hm-lightbox__img { max-height: calc(100vh - 150px); }
}
@media (prefers-reduced-motion: reduce) {
.hm-gallery__plate:hover .hm-gallery__img { transform: none !important; }
.hm-lightbox__backdrop,
.hm-lightbox__panel { animation: none !important; }
} .hm-cases { padding: var(--hm-pad) 0 var(--hm-pad-end); }
.hm-cases__head { max-width: 760px; margin-bottom: 46px; }
.hm-cases__head .hm__lead p { margin-bottom: 14px; }
.hm-cases__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 34px 28px;
}
.hm-cases__card {
display: flex;
flex-direction: column;
min-width: 0;
position: relative;
} .hm-cases__title a::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
} @supports selector(:has(*)) {
.hm-cases__title a:focus-visible {
outline: none;
}
.hm-cases__card:has(.hm-cases__title a:focus-visible) {
outline: 2px solid var(--hm-red);
outline-offset: 6px;
border-radius: 4px;
}
}
.hm-cases__media {
display: block;
aspect-ratio: 3 / 2;
border-radius: 12px;
overflow: hidden;
background: var(--hm-tile);
margin-bottom: 20px;
}
.hm-cases__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.hm-cases__card:hover .hm-cases__img { transform: scale(1.04); }
.hm-cases__title {
font-size: 21px;
font-weight: 700;
line-height: 1.3;
color: var(--hm-ink);
margin: 0 0 10px;
}
.hm-cases__title a { color: inherit; text-decoration: none; }
.hm-cases__card:hover .hm-cases__title a { color: var(--hm-red-deep); }
.hm-cases__excerpt {
font-size: 16px;
color: var(--hm-body);
line-height: 1.65;
margin: 0 0 16px;
}
.hm-cases__more {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: auto;
font-size: 14px;
font-weight: 700;
letter-spacing: .02em;
color: var(--hm-red);
}
.hm-cases__more svg {
width: 20px;
height: 20px;
transition: transform .25s ease;
}
.hm-cases__card:hover .hm-cases__more svg { transform: translateX(4px); }
.hm-cases__more-wrap { margin-top: 52px; text-align: center; }
.hm-cases__empty {
font-size: 17px;
color: var(--hm-body);
padding: 46px 0;
margin: 0;
} .hm-search__none {
max-width: 620px;
}
.hm-search__none .hm-cases__empty {
padding: 34px 0 18px;
}
.hm-search__none form {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
}
.hm-search__none input[type="search"],
.hm-search__none input[type="text"] {
flex: 1 1 240px;
min-width: 0;
padding: 12px 15px;
font-family: 'Work Sans', sans-serif;
font-size: 15px;
color: var(--hm-ink);
background: #fff;
border: 1px solid var(--hm-line-strong);
border-radius: 8px;
}
.hm-search__none input[type="search"]:focus-visible,
.hm-search__none input[type="text"]:focus-visible {
outline: 2px solid var(--hm-red);
outline-offset: 3px;
}
.hm-search__none button,
.hm-search__none input[type="submit"] {
padding: 12px 22px;
font-family: 'Work Sans', sans-serif;
font-size: 13px;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
color: #fff;
background: var(--hm-red);
border: 0;
border-radius: 8px;
cursor: pointer;
}
.hm-search__none button:hover,
.hm-search__none input[type="submit"]:hover {
background: var(--hm-red-deep);
}
@media (max-width: 1000px) { .hm-cases__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .hm-cases { padding: 54px 0 58px; } }
@media (max-width: 620px) {
.hm-cases__grid { grid-template-columns: 1fr; gap: 30px; }
.hm-cases__title { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
.hm-cases__card:hover .hm-cases__img { transform: none !important; }
.hm-cases__card:hover .hm-cases__more svg { transform: none !important; }
} .hm-news__layout {
display: grid;
grid-template-columns: 232px 1fr;
gap: 48px;
align-items: start;
}
.hm-news__aside {
position: sticky;
top: 110px;
padding-right: 20px;
border-right: 1px solid var(--hm-rule);
}
.hm-news__aside-title {
font-size: 13px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--hm-body);
margin: 0 0 18px;
}
.hm-news__year {
font-size: 17px;
font-weight: 700;
color: var(--hm-ink);
margin: 22px 0 8px;
}
.hm-news__year:first-of-type { margin-top: 0; }
.hm-news__year a { color: inherit; text-decoration: none; }
.hm-news__year a:hover { color: var(--hm-red-deep); }
.hm-news__months { list-style: none; margin: 0; padding: 0; }
.hm-news__months a {
display: flex;
justify-content: space-between;
gap: 10px;
font-size: 15px;
color: var(--hm-body);
text-decoration: none;
padding: 6px 0;
transition: color .2s ease;
}
.hm-news__months a span { font-variant-numeric: tabular-nums; opacity: .7; }
.hm-news__months a:hover { color: var(--hm-red-deep); }
.hm-news__months a.is-active { color: var(--hm-ink); font-weight: 700; }
.hm-news__grid { grid-template-columns: repeat(2, 1fr); }
.hm-cases__date {
font-size: 13px;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--hm-body);
margin: 0 0 8px;
}
.hm-news__pagination { margin-top: 46px; }
.hm-news__pagination ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.hm-news__pagination a,
.hm-news__pagination span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 42px;
height: 42px;
padding: 0 14px;
font-size: 15px;
font-weight: 600;
color: var(--hm-ink);
text-decoration: none;
background: var(--hm-pill);
border: 1px solid var(--hm-pill-rule);
border-radius: 8px;
font-variant-numeric: tabular-nums;
transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}
.hm-news__pagination a:hover { border-color: var(--hm-line-strong); }
.hm-news__pagination .current {
color: #fff;
background: var(--hm-ink);
border-color: var(--hm-ink);
}
@media (max-width: 1000px) {
.hm-news__layout { grid-template-columns: 1fr; gap: 34px; }
.hm-news__aside {
position: static;
padding-right: 0;
padding-bottom: 24px;
border-right: 0;
border-bottom: 1px solid var(--hm-rule);
}
.hm-news__months { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.hm-news__months a { padding: 4px 0; }
}
@media (max-width: 620px) { .hm-news__grid { grid-template-columns: 1fr; } } .hm-article__head {
padding: var(--hm-pad) 0 0;
background: var(--hm-tile);
}
.hm-article__head-inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
gap: 48px;
align-items: center;
padding-bottom: var(--hm-pad-end);
} .hm-article__head-text {
min-width: 0;
}
.hm-article__title {
font-size: 40px;
font-weight: 700;
color: var(--hm-ink);
line-height: 1.15;
letter-spacing: -0.01em;
margin: 0;
overflow-wrap: break-word;
text-wrap: balance;
} .hm-article__kicker {
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--hm-red);
margin: 14px 0 0;
}
.hm-article__meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 14px 22px;
margin-top: 22px;
}
.hm-article__date {
font-size: 13px;
font-weight: 600;
color: var(--hm-body);
}
.hm-article__author {
display: flex;
align-items: center;
gap: 10px;
}
.hm-article__portrait {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.hm-article__byline {
display: flex;
flex-direction: column;
line-height: 1.3;
}
.hm-article__author-name {
font-size: 13px;
font-weight: 700;
color: var(--hm-ink);
}
.hm-article__author-company {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--hm-body);
}
.hm-article__share {
display: flex;
gap: 8px;
list-style: none;
margin: 24px 0 0;
padding: 0;
}
.hm-article__share a {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
border: 1px solid var(--hm-line-strong);
color: var(--hm-ink);
transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.hm-article__share a:hover,
.hm-article__share a:focus-visible {
border-color: var(--hm-red);
background: var(--hm-red-tint);
color: var(--hm-red);
}
.hm-article__share svg {
width: 17px;
height: 17px;
}
.hm-article__figure {
margin: 0;
border-radius: 10px;
overflow: hidden;
background: var(--hm-rule);
} .hm-article__img {
display: block;
width: 100%;
height: 100%;
aspect-ratio: 3 / 2;
object-fit: cover;
}  .hm-article__body {
padding: 46px 0 0;
} .hm-article > .hm-article__body:last-child {
padding-bottom: var(--hm-pad-end);
}
.hm-article__prose {
max-width: 74ch;
} .hm-article__layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 264px;
gap: 60px;
align-items: start;
}
.hm-article__layout .hm-article__prose {
max-width: 80ch;
}
.hm-article__rail {
min-width: 0;
}
.hm-article__rail-inner {
position: sticky;
top: 96px;
display: flex;
flex-direction: column;
gap: 10px;
padding-top: 4px;
}
.hm-article__rail .hm-article__btn {
width: 100%;
justify-content: center;
}
@media (max-width: 1000px) {
.hm-article__layout {
grid-template-columns: 1fr;
gap: 36px;
}
.hm-article__layout .hm-article__prose {
max-width: 74ch;
}
.hm-article__rail-inner {
position: static;
flex-direction: row;
flex-wrap: wrap;
padding-top: 26px;
border-top: 1px solid var(--hm-rule);
}
.hm-article__rail .hm-article__btn {
width: auto;
}
}
@media (max-width: 620px) {
.hm-article__rail-inner {
flex-direction: column;
}
.hm-article__rail .hm-article__btn {
width: 100%;
}
}
.hm-article__prose > * + * {
margin-top: 20px;
}
.hm-article__prose p,
.hm-article__prose li {
font-size: 18px;
color: var(--hm-body);
line-height: 1.8;
}
.hm-article__prose h2 {
font-size: 24px;
font-weight: 700;
color: var(--hm-ink);
line-height: 1.25;
margin-top: 44px;
}
.hm-article__prose h3 {
font-size: 19px;
font-weight: 700;
color: var(--hm-ink);
line-height: 1.35;
margin-top: 34px;
}
.hm-article__prose a {
color: var(--hm-red);
text-decoration: underline;
text-underline-offset: 2px;
}
.hm-article__prose img {
max-width: 100%;
height: auto;
border-radius: 8px;
} .hm-article__prose blockquote {
margin: 36px 0;
padding: 0;
}
.hm-article__prose blockquote::before {
content: "";
display: block;
width: 60px;
height: 4px;
border-radius: 2px;
background: var(--hm-red);
margin-bottom: 18px;
}
.hm-article__prose blockquote p {
font-size: 19px;
font-weight: 500;
color: var(--hm-lead);
line-height: 1.6;
} .hm-article__prose p:has(> strong:only-child) {
font-size: 19px;
font-weight: 700;
color: var(--hm-ink);
line-height: 1.35;
margin-top: 40px;
margin-bottom: -6px;
}
.hm-article__prose p:has(> strong:only-child) strong {
font-weight: inherit;
}
.hm-article__prose > p:has(> strong:only-child):first-child {
margin-top: 0;
}
.hm-article__prose ul,
.hm-article__prose ol {
padding-left: 20px;
} .hm-article__prose ul { list-style: disc; }
.hm-article__prose ol { list-style: decimal; }
.hm-article__prose li::marker {
color: var(--hm-red);
}
.hm-article__prose li + li {
margin-top: 8px;
} .hm-article__prose p:empty,
.hm-article__prose p:has(> br:only-child) {
display: none;
} .hm-article__prose table {
display: block;
width: 100%;
overflow-x: auto;
border-collapse: collapse;
} .hm-article__foot {
padding: 0 0 var(--hm-pad-end);
}
.hm-article__actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
margin-top: 30px;
padding-top: 26px;
border-top: 1px solid var(--hm-rule);
} .hm-article__prose > *:last-child {
margin-bottom: 0;
}
.hm-article__btn {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 13px 22px;
border-radius: 8px;
border: 1px solid var(--hm-line-strong);
background: transparent;
color: var(--hm-ink);
font-size: 13px;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.hm-article__btn:hover,
.hm-article__btn:focus-visible {
border-color: var(--hm-red);
color: var(--hm-red);
}
.hm-article__btn--primary {
background: var(--hm-red);
border-color: var(--hm-red);
color: #fff;
}
.hm-article__btn--primary:hover,
.hm-article__btn--primary:focus-visible {
background: var(--hm-red-deep);
border-color: var(--hm-red-deep);
color: #fff;
}
.hm-article__btn svg {
width: 17px;
height: 17px;
flex-shrink: 0;
} .hm-article__modules {
padding-top: 12px;
} .video-mp4,
.video-youtube {
position: relative;
overflow: hidden;
}
.video-poster {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
inset: 0;
z-index: 0;
}
.video-mp4 > video,
.video-youtube > iframe {
position: relative;
z-index: 1;
}
@media (max-width: 900px) {
.hm-article__head-inner {
grid-template-columns: 1fr;
gap: 30px;
}
.hm-article__title { font-size: 30px; }
.hm-article__img { aspect-ratio: 16 / 9; }
}
@media (max-width: 620px) {
.hm-article__title { font-size: 24px; }
.hm-article__prose p,
.hm-article__prose li { font-size: 16px; }
.hm-article__prose h2 { font-size: 21px; }
.hm-article__actions { gap: 10px; }
.hm-article__btn {
width: 100%;
justify-content: center;
}
}  .salesforce_w2l_lead {
--sf-error: #b3121f;
--sf-ink: #1d2127;
--sf-label: #4a5058;
--sf-line: #d8dbe0;
--sf-tile: #f7f8fa;
--sf-red: #FF293A; --sf-chevron: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>');
}
.salesforce_w2l_lead .error_message {
display: block;
margin-top: 6px;
color: var(--sf-error);
font-size: 13px;
line-height: 1.4;
font-weight: 500;
} .salesforce_w2l_lead .error_message:empty {
display: none;
}
.salesforce_w2l_lead .error_message::before {
content: "";
display: inline-block;
width: 14px;
height: 14px;
margin-right: 6px;
vertical-align: -2px;
background-color: currentColor;
-webkit-mask: var(--sf-error-icon) center / contain no-repeat;
mask: var(--sf-error-icon) center / contain no-repeat;
}
.salesforce_w2l_lead { --sf-error-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>');
}
.salesforce_w2l_lead .sf_field:has(.error_message:not(:empty)) input,
.salesforce_w2l_lead .sf_field:has(.error_message:not(:empty)) textarea,
.salesforce_w2l_lead .sf_field:has(.error_message:not(:empty)) select {
border-color: var(--sf-error);
}
.salesforce_w2l_lead .sf_field:has(.error_message:not(:empty)) input:focus,
.salesforce_w2l_lead .sf_field:has(.error_message:not(:empty)) textarea:focus,
.salesforce_w2l_lead .sf_field:has(.error_message:not(:empty)) select:focus {
border-color: var(--sf-error);
box-shadow: 0 0 0 3px rgba(179, 18, 31, 0.14);
}
.salesforce_w2l_lead .sf_field_turnstile {
grid-column: 1 / -1;
width: auto;
}
.salesforce_w2l_lead .sf_field_turnstile .cf-turnstile {
margin: 0;
}  .salesforce_w2l_lead .select-styled {
padding: 12px 44px 12px 14px;
border: 1px solid var(--sf-line);
border-radius: 10px;
background: #fff;
color: var(--sf-ink);
font-family: 'Work Sans', sans-serif;
font-size: 15px;
line-height: 18px;
transition: border-color .25s ease, box-shadow .25s ease;
}
.salesforce_w2l_lead .select-styled:hover {
border-color: #c4c9d0;
}
.salesforce_w2l_lead .select-styled.active {
border-color: var(--sf-red);
box-shadow: 0 0 0 3px rgba(255, 41, 58, 0.12);
}
.salesforce_w2l_lead .select-styled::before {
right: 16px;
width: 16px;
height: 16px;
background-image: none;
background-color: var(--sf-label);
-webkit-mask: var(--sf-chevron) center / 16px 16px no-repeat;
mask: var(--sf-chevron) center / 16px 16px no-repeat;
transition: transform .25s ease;
}
.salesforce_w2l_lead .select-styled.active::before {
transform: rotate(180deg);
}
.salesforce_w2l_lead .select-options {
margin-top: 6px;
padding: 0;
border: 1px solid var(--sf-line);
border-radius: 10px;
font-size: 15px; box-shadow: 0 20px 44px rgba(29, 33, 39, 0.12);
}
.salesforce_w2l_lead .select-options li {
padding: 11px 14px;
color: var(--sf-ink);
line-height: 1.4;
transition: background .2s ease;
}
.salesforce_w2l_lead .select-options li:hover {
background: var(--sf-tile);
}
@media (prefers-reduced-motion: reduce) {
.salesforce_w2l_lead .select-styled,
.salesforce_w2l_lead .select-styled::before,
.salesforce_w2l_lead .select-options li {
transition-duration: .01ms;
}
} .hm-404 {
background: var(--hm-dark);
color: #fff;
padding: var(--hm-pad) 0 var(--hm-pad-end);
}
.hm-404__head {
max-width: 820px;
}
.hm-404 h1 {
margin: 0;
font-size: 40px;
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.01em;
color: #fff;
text-wrap: balance;
}
.hm-404__tagline {
margin: 14px 0 0;
font-size: 13px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.78);
}
.hm-404__tagline::after {
content: "";
display: block;
width: 60px;
height: 4px;
margin-top: 22px;
border-radius: 2px;
background: var(--hm-red);
}
.hm-404__lead {
margin: 26px 0 0;
font-size: 18px;
font-weight: 500;
line-height: 1.7;
color: rgba(255, 255, 255, 0.72);
}
.hm-404__search {
margin-top: 40px;
max-width: 560px;
}
.hm-404 .search-form {
display: flex;
gap: 12px;
}
.hm-404 .search-form label {
flex: 1 1 auto;
margin: 0;
}
.hm-404 .search-field {
width: 100%;
padding: 14px 16px;
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: 8px;
background: rgba(255, 255, 255, 0.06);
color: #fff;
font-family: 'Work Sans', sans-serif;
font-size: 15px;
line-height: 1.4;
transition: border-color .25s ease, background .25s ease;
} .hm-404 .search-field,
.hm-404 .search-field:focus {
color: #fff;
-webkit-text-fill-color: #fff;
}
.hm-404 .search-field::placeholder,
.hm-404 .search-field:focus::placeholder {
color: rgba(255, 255, 255, 0.6);
-webkit-text-fill-color: rgba(255, 255, 255, 0.6);
}
.hm-404 .search-field:focus {
outline: none;
border-color: var(--hm-red);
background: rgba(255, 255, 255, 0.1);
}
.hm-404 .search-submit {
flex: 0 0 auto;
padding: 14px 24px;
border: 1px solid var(--hm-red);
border-radius: 8px;
background: var(--hm-red);
color: #fff;
font-family: 'Work Sans', sans-serif;
font-size: 13px;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
cursor: pointer;
transition: background .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.hm-404 .search-submit:hover,
.hm-404 .search-submit:focus-visible {
background: var(--hm-red-deep);
border-color: var(--hm-red-deep);
transform: translateY(-2px);
box-shadow: 0 10px 26px rgba(255, 41, 58, 0.28);
}
.hm-404__routes {
margin-top: 48px;
padding-top: 30px;
border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.hm-404__routes-label {
margin: 0 0 18px;
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
}
.hm-404__routes ul {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.hm-404__routes li {
margin: 0;
list-style: none;
}
.hm-404__routes a {
display: inline-block;
padding: 10px 18px;
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: 20px;
color: #fff;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.5px;
text-decoration: none;
transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.hm-404__routes a:hover,
.hm-404__routes a:focus-visible {
background: #fff;
border-color: #fff;
color: var(--hm-ink);
} .full-content-sec {
text-align: left;
background-color: transparent;
background-size: cover;
background-position: center;
padding: var(--hm-pad, 74px) 0 var(--hm-pad-end, 78px);
}
.full-content-sec::after {
background: linear-gradient(90deg, rgba(20, 23, 28, 0.93) 0%, rgba(20, 23, 28, 0.55) 55%, rgba(20, 23, 28, 0.10) 100%),
linear-gradient(180deg, rgba(20, 23, 28, 0.72) 0%, rgba(20, 23, 28, 0) 60%);
opacity: 1;
}
.full-content-main {
margin: 0;
max-width: 720px;
}
.full-content-main h1 {
margin: 0;
font-family: 'Work Sans', sans-serif;
font-size: 40px;
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.01em;
color: #fff;
text-wrap: balance;
}
.full-content-main h1::after {
content: "";
display: block;
width: 60px;
height: 4px;
margin-top: 22px;
border-radius: 2px;
background: var(--hm-red, #FF293A);
}
.full-content-main h2,
.full-content-main h3 {
margin: 26px 0 0;
font-family: 'Work Sans', sans-serif;
font-size: 18px;
font-weight: 500;
line-height: 1.7;
letter-spacing: normal;
color: rgba(255, 255, 255, 0.72);
}
.full-content-main p {
margin: 18px 0 0;
font-size: 15px;
line-height: 1.8;
color: rgba(255, 255, 255, 0.72);
}
.full-content-sec .btn__wrap {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 38px;
}
.full-content-sec .btn.white-btn {
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 16px 26px;
border: 1px solid rgba(255, 255, 255, 0.32);
border-radius: 8px;
background: transparent;
color: #fff;
font-family: 'Work Sans', sans-serif;
font-size: 13px;
font-weight: 700;
line-height: 1;
letter-spacing: 1.2px;
text-transform: uppercase;
text-decoration: none;
transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.full-content-sec .btn.white-btn:hover,
.full-content-sec .btn.white-btn:focus-visible {
background: rgba(255, 255, 255, 0.1);
border-color: #fff;
color: #fff;
}
.full-content-sec .btn__wrap .btn.white-btn:first-child {
background: var(--hm-red, #FF293A);
border-color: var(--hm-red, #FF293A);
}
.full-content-sec .btn__wrap .btn.white-btn:first-child:hover,
.full-content-sec .btn__wrap .btn.white-btn:first-child:focus-visible {
background: var(--hm-red-deep, #E01427);
border-color: var(--hm-red-deep, #E01427);
transform: translateY(-2px);
box-shadow: 0 10px 26px rgba(255, 41, 58, 0.28);
}
@media (max-width: 980px) {
.hm-404 h1,
.full-content-main h1 {
font-size: 32px;
}
.hm-404 {
padding: 68px 0 74px;
}
}
@media (max-width: 640px) {
.hm-404 .search-form {
flex-wrap: wrap;
}
.hm-404 .search-submit,
.full-content-sec .btn.white-btn {
width: 100%;
}
.full-content-sec .btn__wrap {
display: block;
}
.full-content-sec .btn__wrap .btn.white-btn + .btn.white-btn {
margin-top: 12px;
}
}
@media (prefers-reduced-motion: reduce) {
.hm-404 .search-submit:hover,
.full-content-sec .btn__wrap .btn.white-btn:first-child:hover {
transform: none;
}
}  .pics-legal .common-content-block {
--lg-ink: #1d2127;
--lg-body: #5a606a;
--lg-label: #4a5058;
--lg-rule: #eceef1;
--lg-line-strong: #d8dbe0;
--lg-red: #FF293A;
--lg-tile: #f7f8fa;
font-family: 'Work Sans', sans-serif;
color: var(--lg-body);
text-align: left;
}
.pics-legal .common-content-block .main > h1 {
max-width: none;
margin: 0 0 22px;
font-size: 40px;
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.01em;
color: var(--lg-ink);
text-align: left;
text-wrap: balance;
}
.pics-legal .common-content-block .main > h1::after {
content: "";
display: block;
width: 60px;
height: 4px;
margin-top: 22px;
border-radius: 2px;
background: var(--lg-red);
} .pics-legal .common-content-block .main > *:not(h1) {
max-width: 72ch;
}
.pics-legal .common-content-block h2,
.pics-legal .common-content-block h3,
.pics-legal .common-content-block h4,
.pics-legal .common-content-block h5,
.pics-legal .common-content-block h6 {
color: var(--lg-ink);
font-weight: 700;
letter-spacing: normal; margin: 52px 0 14px;
scroll-margin-top: 100px;
}
.pics-legal .common-content-block h2 {
font-size: 24px;
line-height: 1.2;
padding-top: 30px;
border-top: 1px solid var(--lg-rule);
}
.pics-legal .common-content-block h3 {
font-size: 19px;
line-height: 1.35;
} .pics-legal .common-content-block h4 {
font-size: 18px;
line-height: 1.4;
margin-top: 44px;
}
.pics-legal .common-content-block h5,
.pics-legal .common-content-block h6 {
font-size: 16px;
line-height: 1.45;
margin-top: 36px;
}
.pics-legal .common-content-block .main > *:not(h1) + h2:first-of-type {
margin-top: 44px;
}
.pics-legal .common-content-block p {
margin: 0 0 20px;
font-size: 16px;
line-height: 1.8;
color: var(--lg-body);
}
.pics-legal .common-content-block strong,
.pics-legal .common-content-block b {
font-weight: 600;
color: var(--lg-ink);
}
.pics-legal .common-content-block em {
font-style: italic;
}
.pics-legal .common-content-block a {
color: var(--lg-ink);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
transition: color .25s ease;
}
.pics-legal .common-content-block a:hover,
.pics-legal .common-content-block a:focus-visible {
color: var(--lg-red);
}
.pics-legal .common-content-block :focus-visible {
outline: 2px solid var(--lg-red);
outline-offset: 3px;
border-radius: 4px;
}
.pics-legal .common-content-block ul,
.pics-legal .common-content-block ol {
margin: 0 0 20px;
padding-left: 22px;
font-size: 16px;
line-height: 1.8;
}
.pics-legal .common-content-block li {
margin-bottom: 8px;
}
.pics-legal .common-content-block li::marker {
color: var(--lg-line-strong);
}
.pics-legal .common-content-block table {
width: 100%;
margin: 0 0 24px;
border-collapse: collapse;
font-size: 15px;
}
.pics-legal .common-content-block th,
.pics-legal .common-content-block td {
padding: 12px 14px 12px 0;
border-bottom: 1px solid var(--lg-rule);
text-align: left;
vertical-align: top;
}
.pics-legal .common-content-block th {
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--lg-label);
border-bottom-color: var(--lg-line-strong);
} .pics-legal .common-content-block .cmplz-document {
max-width: 72ch;
font-size: 16px;
line-height: 1.8;
color: var(--lg-body);
}
.pics-legal .common-content-block .cmplz-document h2 { font-size: 24px; }
.pics-legal .common-content-block .cmplz-document h3 { font-size: 19px; }
.pics-legal .common-content-block .cmplz-document h4 { font-size: 18px; }
.pics-legal .common-content-block .cmplz-document table {
max-width: none;
}
@media (max-width: 980px) {
.pics-legal .common-content-block .main > h1 {
font-size: 32px;
}
.pics-legal .common-content-block h2 {
margin-top: 40px;
padding-top: 24px;
}
.pics-legal .common-content-block h4 {
margin-top: 34px;
}
} .pics-legal .common-content-block .pics-todo {
position: relative;
margin: 0 0 20px;
padding: 16px 18px 16px 52px;
border: 1px solid #e6c9a8;
border-left: 3px solid #b8791f;
border-radius: 10px;
background: #fdf7ef;
color: #6b4a12;
font-size: 15px;
line-height: 1.7;
}
.pics-legal .common-content-block .pics-todo::before {
content: "";
position: absolute;
top: 18px;
left: 18px;
width: 20px;
height: 20px;
background-color: #b8791f;
-webkit-mask: var(--lg-todo-icon) center / contain no-repeat;
mask: var(--lg-todo-icon) center / contain no-repeat;
}
.pics-legal .common-content-block { --lg-todo-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>');
}