.home-hero {
position: relative; height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
height: calc(100svh - var(--wp-admin--admin-bar--height, 0px)); min-height: 480px;
overflow: hidden;
background: var(--color-graphite);
color: var(--color-on-dark);
}
.home-hero__image,
.home-hero__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
} .home-hero__video {
opacity: 0;
transition: opacity var(--duration-slow) var(--ease-out);
}
.home-hero__video.is-playing {
opacity: 1;
}
.home-hero::before,
.home-hero::after {
content: '';
position: absolute;
left: 0;
right: 0;
z-index: 1;
pointer-events: none;
}
.home-hero::before {
top: 0;
height: 30%;
background: linear-gradient(var(--overlay-strong), var(--overlay-none));
}
.home-hero::after {
bottom: 0;
height: 25%;
background: linear-gradient(var(--overlay-none), var(--overlay-soft));
} .home-hero__toggle {
position: absolute;
right: calc(var(--container-padding) - 12px); bottom: var(--space-m);
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--touch-target);
height: var(--touch-target);
padding: 0;
border: 0;
border-radius: var(--radius);
background: none;
color: inherit;
cursor: pointer;
}
.home-hero__toggle[hidden] {
display: none;
}
.home-hero__icon {
width: 20px;
height: 20px;
} .home-hero__icon--play,
.home-hero__toggle.is-paused .home-hero__icon--pause {
display: none;
}
.home-hero__toggle.is-paused .home-hero__icon--play {
display: block;
} .home-hero__scroll {
position: absolute;
left: 50%;
bottom: 0;
z-index: 2;
width: var(--touch-target);
height: 72px;
transform: translateX(-50%);
overflow: hidden;
}
.home-hero__scroll::before,
.home-hero__scroll::after {
content: '';
position: absolute;
left: 50%;
width: var(--border-width);
}
.home-hero__scroll::before {
top: 0;
bottom: 0;
background: var(--color-on-dark);
opacity: 0.35;
}
.home-hero__scroll::after {
top: -40%;
height: 40%;
background: var(--color-on-dark);
animation: luchi-scroll-cue 2.4s var(--ease-out) infinite;
}
@keyframes luchi-scroll-cue {
from { transform: translateY(0); }
to   { transform: translateY(350%); }
} .home-manifesto__eyebrow {
margin-bottom: var(--space-m);
}
.home-manifesto__quote {
max-width: 15em;
margin: 0;
color: var(--color-heading);
}
.home-manifesto__body {
max-width: 36rem;
margin-top: var(--space-l);
}
.home-manifesto__body .text-lead {
margin-bottom: var(--space-m);
}
@media (min-width: 1200px) {
.home-manifesto__body {
margin-top: var(--space-xl);
margin-left: auto;
}
} .home-trittico {
padding-top: 0;
}
.home-trittico__grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-xl);
margin: 0;
padding: 0;
list-style: none;
}
@media (min-width: 768px) {
.home-trittico__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-m);
}
}
@media (min-width: 1200px) {
.home-trittico__grid {
gap: var(--space-l);
} .home-trittico__grid .card__media {
aspect-ratio: 4 / 3;
}
} .home-metodo__title {
margin-bottom: var(--space-l);
}
.home-metodo__list {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-l);
margin: 0 0 var(--space-l);
padding: 0;
list-style: none;
}
.home-metodo__item {
padding-top: var(--space-m);
border-top: var(--border-width) solid var(--color-steel);
}
.home-metodo__item .label {
margin-bottom: var(--space-s);
}
.home-metodo__item h3 {
margin-bottom: var(--space-s);
}
.home-metodo__item p:last-child {
margin: 0;
}
@media (min-width: 768px) {
.home-metodo__list {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-l);
}
}
@media (min-width: 1200px) {
.home-metodo__title {
margin-bottom: var(--space-xl);
}
.home-metodo__list {
gap: var(--space-xl);
margin-bottom: var(--space-xl);
}
}