.lh-hero {
background-color: var(--color-bg);
}
.lh-hero .service-hero__bg img {
object-position: 20% 50%;
}
@media (min-width: 1024px) {
.lh-hero.service-hero--bleed {
min-height: calc(70svh + var(--service-hero-band-h));
}
}
@media (min-width: 768px) and (max-width: 1023.98px) {
.lh-hero .service-hero__bg img {
object-position: 11% 50%;
}
}
@media (max-width: 767.98px) {
.lh-hero .service-hero__bg img {
object-position: 19% 45%;
}
}
@media (max-width: 1099.98px) {
.lh-hero .service-hero__bg::after {
background-image: linear-gradient(
to bottom,
rgb(1 1 1 / 0.72) 0%,
rgb(1 1 1 / 0.62) 42%,
rgb(1 1 1 / 0.70) 72%,
rgb(1 1 1 / 0.88) 100%
);
}
}
@media (min-width: 1024px) {
.lh-hero:not(.service-hero--bleed) {
min-height: 70svh;
padding-block: var(--space-7) var(--space-8);
}
}
.lh-hero h1 {
-webkit-hyphens: manual;
hyphens: manual;
}
.lh-orient .section__intro {
text-align: center;
}
.lh-orient .section__intro > p {
margin-inline: auto;
text-wrap: balance;
-webkit-hyphens: none;
hyphens: none;
}
.lh-orient__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0;
}
@media (min-width: 900px) {
.lh-orient__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lh-orient__list > li + li { border-left: 1px solid var(--color-border); }
}
.lh-orient__item {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
align-content: start;
column-gap: var(--space-4);
height: 100%;
padding: var(--space-5) 0;
color: inherit;
text-decoration: none;
border-top: 1px solid var(--color-border);
transition: border-color var(--duration-base) var(--easing-standard);
}
@media (min-width: 900px) {
.lh-orient__item {
padding: var(--space-6) var(--space-6) var(--space-5);
}
.lh-orient__list > li:first-child .lh-orient__item { padding-left: 0; }
}
.lh-orient__icon {
grid-column: 1;
display: block;
width: clamp(7.5rem, 10vw, 9rem);
height: clamp(5rem, 7vw, 6.5rem);
object-fit: contain;
object-position: left bottom;
margin-bottom: var(--space-4);
}
.lh-orient__num {
grid-column: 1;
display: block;
margin-bottom: var(--space-4);
font-size: var(--font-size-sm);
color: var(--color-accent);
font-variant-numeric: tabular-nums;
}
.section--light .lh-orient__num {
color: color-mix(in srgb, var(--color-blue-dark) 85%, black);
}
.lh-orient__title {
grid-column: 1;
font-size: clamp(1.375rem, 1.15rem + 0.7vw, 1.75rem);
font-weight: var(--font-weight-regular);
letter-spacing: normal;
line-height: var(--line-height-heading);
margin-bottom: var(--space-3);
}
.lh-orient__text {
grid-column: 1;
max-width: 26rem;
color: var(--color-text-muted);
font-size: var(--font-size-sm);
line-height: var(--line-height-base);
}
.lh-orient__arrow {
grid-column: 2;
grid-row: 1 / -1;
align-self: start;
width: 1.5rem;
height: 1.5rem;
color: var(--color-accent);
fill: none;
stroke: currentColor;
transition: transform var(--duration-base) var(--easing-standard);
}
.lh-orient__item:hover,
.lh-orient__item:focus-visible {
border-top-color: var(--color-accent);
}
.lh-orient__item:hover .lh-orient__arrow,
.lh-orient__item:focus-visible .lh-orient__arrow {
transform: translate(3px, -3px);
}
.pixel-seam + .lh-services {
padding-top: calc(var(--space-6) + 200px);
}
@media (max-width: 767.98px) {
.pixel-seam + .lh-services {
padding-top: calc(var(--space-5) + 120px);
}
}
.lh-chapter + .lh-chapter {
margin-top: var(--space-9);
}
.lh-chapter {
scroll-margin-top: 6rem;
}
.lh-chapter__head {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: baseline;
column-gap: var(--space-4);
padding-bottom: var(--space-4);
border-bottom: 1px solid var(--color-border);
margin-bottom: var(--space-6);
}
.lh-chapter__num {
font-size: var(--font-size-md);
color: var(--color-accent);
font-variant-numeric: tabular-nums;
}
.section--light .lh-chapter__num {
color: color-mix(in srgb, var(--color-blue-dark) 85%, black);
}
.lh-chapter__title {
font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2.125rem);
font-weight: var(--font-weight-regular);
letter-spacing: normal;
line-height: var(--line-height-heading);
}
.lh-cards {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--space-5);
}
@media (min-width: 640px) {
.lh-cards--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lh-cards--trio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
.lh-cards { gap: var(--space-6); }
.lh-cards--trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.lh-card {
display: grid;
grid-template-rows: auto auto 1fr auto;
height: 100%;
padding: var(--space-6);
background-color: rgb(255 255 255 / 0.045);
border: 1px solid rgb(255 255 255 / 0.1);
border-radius: var(--radius-xl);
color: inherit;
text-decoration: none;
transition: translate var(--duration-base) var(--easing-standard),
background-color var(--duration-base) var(--easing-standard),
box-shadow var(--duration-base) var(--easing-standard),
border-color var(--duration-base) var(--easing-standard);
}
.section--light .lh-card {
background-color: var(--color-white);
border-color: rgb(1 1 1 / 0.09);
box-shadow: 0 18px 48px rgb(1 1 1 / 0.07), 0 2px 6px rgb(1 1 1 / 0.04);
}
.lh-card__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
margin-bottom: var(--space-5);
}
.lh-card__icon {
width: 1.75rem;
height: 1.75rem;
color: var(--color-accent);
fill: none;
stroke: currentColor;
}
.lh-card__num {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
font-variant-numeric: tabular-nums;
}
.lh-card__mark {
background-image: linear-gradient(
color-mix(in srgb, var(--color-blue-dark) 85%, var(--color-logo-black)),
color-mix(in srgb, var(--color-blue-dark) 85%, var(--color-logo-black))
);
background-repeat: no-repeat;
background-position: left center;
background-size: 100% 100%;
padding-inline: 0.14em;
border-radius: 3px;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
color: var(--color-white);
}
.lh-services--live .lh-card__mark {
background-size: calc(var(--mark, 0) * 100%) 100%;
}
.lh-card__title {
font-size: clamp(1.3125rem, 1.1rem + 0.62vw, 1.625rem);
font-weight: var(--font-weight-regular);
letter-spacing: normal;
line-height: var(--line-height-heading);
margin-bottom: var(--space-3);
}
.lh-card__qualifier {
display: block;
font-size: var(--font-size-sm);
color: var(--color-text-muted);
}
.lh-card__text {
color: var(--color-text-muted);
font-size: var(--font-size-base);
line-height: var(--line-height-base);
}
.lh-card__arrow {
justify-self: end;
margin-top: var(--space-5);
width: 1.75rem;
height: 1.75rem;
color: var(--color-blue-light);
fill: none;
stroke: currentColor;
transition: transform var(--duration-base) var(--easing-standard);
}
.lh-card:hover,
.lh-card:focus-visible {
translate: 0 -4px;
background-color: rgb(255 255 255 / 0.075);
border-color: color-mix(in srgb, var(--color-blue-light) 55%, transparent);
}
.section--light .lh-card:hover,
.section--light .lh-card:focus-visible {
background-color: var(--color-white);
box-shadow: 0 26px 60px rgb(1 1 1 / 0.10), 0 3px 8px rgb(1 1 1 / 0.05);
border-color: color-mix(in srgb, var(--color-blue-light) 45%, transparent);
}
.lh-card:hover .lh-card__arrow,
.lh-card:focus-visible .lh-card__arrow {
transform: translate(5px, -5px);
}
@media (max-width: 767.98px) {
.lh-card { padding: var(--space-5); }
.lh-card__head { margin-bottom: var(--space-4); }
.lh-card__title { margin-bottom: var(--space-2); }
.lh-card__arrow { margin-top: var(--space-4); }
.lh-chapter + .lh-chapter { margin-top: var(--space-8); }
.lh-orient__icon {
width: clamp(5rem, 22vw, 6.5rem);
height: clamp(3.5rem, 15vw, 4.5rem);
}
}
.lh-keyword__inner {
text-align: center;
}
.lh-keyword__inner > * {
margin-inline: auto;
}
.lh-keyword__answer,
.lh-keyword__text {
-webkit-hyphens: none;
hyphens: none;
}
.lh-keyword__rule {
display: block;
width: 3rem;
height: 2px;
margin-bottom: var(--space-5);
background-color: var(--color-accent);
}
.lh-keyword__inner h2 {
max-width: 34ch;
margin-inline: auto;
text-wrap: balance;
}
.lh-keyword__answer {
max-width: 38rem;
margin-top: var(--space-6);
font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem);
line-height: var(--line-height-heading);
color: var(--color-text);
text-wrap: balance;
}
.lh-keyword__text {
max-width: 42rem;
margin-top: var(--space-5);
font-size: var(--font-size-base);
line-height: var(--line-height-base);
color: var(--color-text-muted);
}
.lh-why .section__intro {
text-align: center;
}
.lh-why .section__intro h2 {
max-width: 26ch;
margin-inline: auto;
text-wrap: balance;
}
.lh-why__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--space-7);
}
@media (min-width: 640px) {
.lh-why__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
.lh-why__list {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--space-6);
}
}
.lh-why__item::before {
content: "";
display: block;
width: 3rem;
height: 2px;
margin-bottom: var(--space-4);
background-color: var(--color-accent);
}
.lh-why__title {
font-size: var(--font-size-md);
font-weight: var(--font-weight-regular);
letter-spacing: normal;
line-height: var(--line-height-heading);
margin-bottom: var(--space-3);
}
.lh-why__text {
color: var(--color-text-muted);
font-size: var(--font-size-sm);
line-height: var(--line-height-base);
}