.fh-hero {
padding: 84px 0 48px;
background-color: #FFEE00;
background-image: radial-gradient(65% 62% at 74% 52%, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 70%);
overflow: hidden;
}
.fh-h1 {
max-width: 10.3em;
margin: 0 0 24px;
font-family: 'Montserrat', 'Montserrat Fb', 'Montserrat Fb A', sans-serif;
font-size: clamp(34px, calc(25.34px + 2.71vw), 56px);
font-weight: 800;
line-height: 1;
letter-spacing: -0.029em;
color: #2B292D;
}
.fh-lead {
max-width: 640px;
margin: 0 0 26px;
font-family: 'Open Sans', 'Open Sans Fb', 'Open Sans Fb A', sans-serif;
font-size: clamp(18px, calc(15.5px + 0.78vw), 21px);
font-weight: 400;
line-height: 1.6;
color: #2B292D;
}
.fh-toc {
margin: 0;
}
.fh-toc ul {
display: flex;
flex-wrap: wrap;
gap: 10px 28px;
margin: 0;
padding: 0;
list-style: none;
}
.fh-toc a {
font-family: 'Open Sans', 'Open Sans Fb', 'Open Sans Fb A', sans-serif;
font-size: 15px;
font-weight: 700;
line-height: 1.4;
color: #0000ff;
text-decoration: none;
transition: text-decoration-color .15s ease;
}
.fh-toc a:hover,
.fh-toc a:focus {
color: #0000ff;
text-decoration: underline;
}
.fh-group {
padding: 64px 0;
background: #fff;
}
.fh-group--band {
background: #F8F8FB;
}
.fh-group {
scroll-margin-top: 84px;
}
.fh-head {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 32px;
align-items: center;
margin: 0 0 48px;
}
.fh-copy {
min-width: 0;
}
.fh .pillar-eyebrow {
display: flex;
align-items: center;
margin: 0 0 22px;
font-family: 'Open Sans', 'Open Sans Fb', 'Open Sans Fb A', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
color: rgba(43, 41, 45, .72);
}
.fh .pillar-eyebrow:before {
content: "";
flex: 0 0 22px;
height: 5px;
margin-right: 10px;
background: #00ffff;
}
.fh-copy .sec-lead {
margin-bottom: 22px;
}
.fh-more {
display: inline-block;
font-family: 'Open Sans', 'Open Sans Fb', 'Open Sans Fb A', sans-serif;
font-size: 14px;
font-weight: 700;
line-height: 1.4;
color: #0000ff;
text-decoration: none;
transition: text-decoration-color .15s ease;
}
a.fh-more:hover,
a.fh-more:focus {
color: #0000ff;
text-decoration: underline;
}
.fh-visual {
position: relative;
display: block;
width: 100%;
min-width: 0;
order: -1;
aspect-ratio: 16 / 9;
}
.fh-visual::before {
content: "";
display: block;
padding-top: 56.25%;
}
.fh-visual > .ways-card {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
}
.fh-visual .ways-visual {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
}
.fh-visual > .ways-card::after {
content: "";
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 2px;
background: #00ffff;
transform: scaleX(0);
transform-origin: 0 50%;
opacity: 0;
}
.fh-visual > .ways-card.is-playing::after {
opacity: 1;
animation: fh-progress var(--ways-loop, 8s) linear forwards;
}
@keyframes fh-progress {
from { transform: scaleX(0); }
to   { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
.fh-visual > .ways-card.is-playing::after { animation: none; opacity: 0; }
}
.fh-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 22px;
margin: 0;
padding: 0;
list-style: none;
}
.fh-cell {
display: flex;
min-width: 0;
}
.fh-cell .fh-tile {
flex: 1 1 auto;
}
.fh-tile {
display: flex;
flex-direction: column;
min-width: 0;
padding: 26px 28px;
background: #F8F8FB;
border-top: 4px solid transparent;
color: #2B292D;
text-decoration: none;
transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.fh-group--band .fh-tile {
background: #fff;
}
a.fh-tile:hover,
a.fh-tile:focus {
color: #2B292D;
text-decoration: none;
background: #fff;
border-top-color: #00ffff;
box-shadow: 0 10px 34px rgba(0, 0, 0, .09);
}
.fh-tile h3 {
margin: 0 0 10px;
font-family: 'Montserrat', 'Montserrat Fb', 'Montserrat Fb A', sans-serif;
font-size: 19px;
font-weight: 700;
letter-spacing: -0.4px;
line-height: 1.25;
color: #2B292D;
}
.fh-tile p {
margin: 0 0 16px;
font-family: 'Open Sans', 'Open Sans Fb', 'Open Sans Fb A', sans-serif;
font-size: 15px;
font-weight: 400;
line-height: 1.6;
color: rgba(43, 41, 45, .72);
}
.fh-tile p:last-child {
margin-bottom: 0;
}
.fh-tile .fh-more {
margin-top: auto;
}
a.fh-tile:focus-visible,
.fh-toc a:focus-visible,
a.fh-more:focus-visible {
outline: 2px solid #0000ff;
outline-offset: 2px;
}
a.fh-tile:focus:not(:focus-visible),
.fh-toc a:focus:not(:focus-visible),
a.fh-more:focus:not(:focus-visible) {
outline: none;
}
@media (min-width: 768px) {
.fh-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 992px) {
.fh-hero {
padding: 126px 0 64px;
}
.fh-group {
padding: 108px 0;
}
.fh-head {
grid-template-columns: 430px minmax(0, 1fr);
gap: 72px;
margin-bottom: 64px;
}
.fh-visual {
order: 0;
}
.fh-group--reverse .fh-head {
grid-template-columns: minmax(0, 1fr) 430px;
}
.fh-group--reverse .fh-visual {
order: -1;
}
.fh-group--solo .fh-head {
grid-template-columns: minmax(0, 1fr);
}
.fh-group--solo .fh-copy {
max-width: 680px;
}
.fh-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}