/* Home page — index.html */
@font-face {
font-family: "Cheva Display";
src: url("../fonts/ChevaDisplay-Regular.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Rancho Camino";
src: url("../fonts/RanchoCamino-Regular.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* ------------------------------------------------------------------
Dual layout — desktop document snap / mobile nested snap-stage
Desktop: html scroll + proximity snap (hero, combined, process).
Mobile: snap-stage (100dvh mandatory snap) — hero through footer.
------------------------------------------------------------------ */
@media (min-width: 768px) {
.home-snap-layout--mobile {
display: none !important;
}
}
@media (max-width: 767px) {
.home-snap-layout--desktop {
display: none !important;
}
html.page-home-scroll {
scroll-snap-type: none;
-webkit-scroll-snap-type: none;
}
}
@media (min-width: 768px) {
html.page-home-scroll {
scroll-snap-type: y proximity;
scroll-behavior: auto;
scroll-padding-top: var(--nav-height);
}
}
html.page-home-scroll {
scroll-behavior: auto;
}
html.page-home-scroll body.page-home {
overflow-x: clip;
min-height: 100%;
}
body.page-home main {
flex: 0 0 auto;
overflow: visible;
}
body.page-home .site-footer {
flex: 0 0 auto;
}
/* Desktop snap slides — full viewport height; content clears fixed nav via scroll-padding + inner pad */
@media (min-width: 768px) {
body.page-home .home-snap-layout--desktop .snap-track > .home-snap {
box-sizing: border-box;
scroll-snap-align: start;
scroll-snap-stop: normal;
min-height: 100dvh;
min-height: 100svh;
}
body.page-home .home-snap-layout--desktop .snap-track > .home-snap--hero {
height: 100dvh;
height: 100svh;
}
body.page-home .home-snap-layout--desktop .home-snap--process {
scroll-snap-align: start;
scroll-snap-stop: normal;
min-height: 100dvh;
min-height: 100svh;
}
body.page-home .home-snap-layout--desktop .snap-track .home-snap-group .home-snap-group__pane,
body.page-home .home-snap-layout--desktop .snap-track .home-snap-group .home-snap__story,
body.page-home .home-snap-layout--desktop .snap-track .home-snap-group .home-snap__usps,
body.page-home .home-snap-layout--desktop .snap-track .home-snap-group .home-usps {
scroll-snap-align: none;
}
body.page-home .home-snap-layout--desktop .showcase,
body.page-home .home-snap-layout--desktop .page--quote,
body.page-home .home-snap-layout--desktop .page--quote > * {
scroll-snap-align: none;
}
}
/* Mobile — snap-stage mandatory snap; all sections as full-height tiles */
@media (max-width: 767px) {
body.page-home .home-snap-layout--mobile {
--snap-content-inset-top: clamp(0.75rem, 2.5vh, 1.25rem);
--snap-content-inset-bottom: clamp(1rem, 3vh, 1.5rem);
/* Full-bleed slides sit under fixed nav; pad content by nav + modest inset */
--snap-content-pad-top: calc(var(--nav-height) + var(--snap-content-inset-top));
/* USPs green slide — tighter top pad so copy sits higher while clearing nav */
--snap-usps-pad-top: calc(var(--nav-height) + clamp(0.25rem, 0.8vh, 0.5rem));
/* Combined pony-up + footer tile — fit in 100svh; materials-like flex + safe-area */
/* Wavy divider overlaps upward; modest gap below curve only (no nav-height stack) */
--snap-signup-footer-pad-top: clamp(1rem, 3vw, 1.75rem);
--snap-signup-footer-pad-bottom: clamp(2rem, 5vw, 2.5rem);
--snap-signup-footer-footer-pad-top: clamp(2rem, 5vw, 2.5rem);
}
body.page-home .home-snap-layout--mobile .snap-stage {
display: block;
position: relative;
z-index: 0;
height: 100dvh;
height: 100svh;
min-height: -webkit-fill-available;
overflow-x: hidden;
overflow-y: auto;
scroll-snap-type: y mandatory;
-webkit-scroll-snap-type: y mandatory;
scroll-padding-top: var(--nav-height);
scroll-behavior: auto;
overscroll-behavior-y: contain;
-webkit-overflow-scrolling: touch;
}
body.page-home .home-snap-layout--mobile .snap-stage > .home-snap {
box-sizing: border-box;
position: relative;
isolation: isolate;
flex: none;
height: 100%;
min-height: 100%;
max-height: none;
overflow: hidden;
scroll-snap-align: start;
-webkit-scroll-snap-align: start;
scroll-snap-stop: always;
}
body.page-home .home-snap-layout--mobile .snap-stage > .home-snap--hero {
background-color: var(--black);
}
body.page-home .home-snap-layout--mobile .home-snap--story,
body.page-home .home-snap-layout--mobile .home-snap--usps-slide,
body.page-home .home-snap-layout--mobile .home-snap--process,
body.page-home .home-snap-layout--mobile .home-snap--showcase,
body.page-home .home-snap-layout--mobile .home-snap--cta,
body.page-home .home-snap-layout--mobile .home-snap--signup-footer {
display: flex;
flex-direction: column;
overflow: hidden;
}
body.page-home .home-snap-layout--mobile .home-snap--process {
justify-content: flex-start;
}
body.page-home .home-snap-layout--mobile .home-snap--usps-slide {
justify-content: center;
}
body.page-home .home-snap-layout--mobile .home-snap--story {
background-color: var(--lavender);
justify-content: flex-start;
}
body.page-home .home-snap-layout--mobile .home-snap--usps-slide {
background-color: var(--em2-green);
}
body.page-home .home-snap-layout--mobile .home-snap--showcase {
justify-content: flex-start;
background-color: var(--lavender);
overflow: visible;
}
body.page-home .home-snap-layout--mobile .home-snap--cta {
justify-content: flex-start;
background-color: var(--em2-green);
overflow: visible;
}
body.page-home .home-snap-layout--mobile .home-snap--signup-footer {
justify-content: flex-start;
background-color: var(--black);
overflow: visible;
}
body.page-home .home-snap-layout--mobile .home-snap--story .home-snap__story {
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: flex-start;
min-height: 0;
overflow: hidden;
}
body.page-home .home-snap-layout--mobile .home-snap--usps-slide .home-snap__usps {
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 0;
overflow: hidden;
}
body.page-home .home-snap-layout--mobile .home-snap--usps-slide .home-snap__usps .container {
flex: 0 1 auto;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 0;
}
body.page-home .home-snap-layout--mobile .home-snap--story .home-snap__story {
background-color: var(--lavender);
padding-top: var(--snap-content-pad-top);
padding-bottom: var(--snap-content-inset-bottom);
width: 100%;
}
body.page-home .home-snap-layout--mobile .home-snap--story .home-snap__story.color-band {
padding-top: var(--snap-content-pad-top);
padding-bottom: var(--snap-content-inset-bottom);
}
body.page-home .home-snap-layout--mobile .home-snap--usps-slide .home-snap__usps {
background-color: var(--em2-green);
position: relative;
padding-top: var(--snap-usps-pad-top);
padding-bottom: var(--snap-content-inset-bottom);
overflow: visible;
}
body.page-home .home-snap-layout--mobile .home-snap--usps-slide .home-snap__usps.color-band {
padding-top: var(--snap-usps-pad-top);
padding-bottom: var(--snap-content-inset-bottom);
}
/* Story → USPs: green zigzag on USPs top edge, overlaps story (no duplicate, no lavender gap) */
body.page-home .home-snap-layout--mobile .home-snap--usps-slide {
overflow: visible;
}
body.page-home .home-snap-layout--mobile .home-snap__usps-divider {
position: absolute;
top: 0;
left: 0;
width: 100%;
transform: translateY(-100%);
z-index: 3;
color: var(--em2-green);
line-height: 0;
pointer-events: none;
}
body.page-home .home-snap-layout--mobile .home-snap--showcase.showcase {
padding: 0;
margin: 0;
}
body.page-home .home-snap-layout--mobile .home-snap--showcase .showcase__inner {
flex: 0 1 auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: clamp(0.85rem, 2.5vh, 1.15rem);
width: 100%;
padding:
var(--snap-content-pad-top)
clamp(1.25rem, 5vw, 2rem)
var(--snap-content-inset-bottom);
}
body.page-home .home-snap-layout--mobile .home-snap--showcase .showcase__actions {
display: flex;
justify-content: center;
width: 100%;
flex: 0 0 auto;
}
body.page-home .home-snap-layout--mobile .home-snap--showcase .showcase__actions .btn--primary {
display: block;
width: 100%;
text-align: center;
background: var(--blue);
color: var(--neon-yellow);
border: 2px solid var(--blue);
box-shadow: none;
}
body.page-home .home-snap-layout--mobile .home-snap--showcase .showcase__actions .btn--primary:hover:not(:disabled) {
background: var(--neon-yellow);
color: var(--blue);
border-color: var(--neon-yellow);
box-shadow: none;
}
body.page-home .home-snap-layout--mobile .home-snap--showcase .showcase__actions .btn--primary:focus-visible {
outline: 2px solid var(--neon-yellow);
outline-offset: 3px;
}
body.page-home .home-snap-layout--mobile .home-snap--showcase .showcase__actions .btn--primary:hover:focus-visible,
body.page-home .home-snap-layout--mobile .home-snap--showcase .showcase__actions .btn--primary:focus-visible:hover {
outline-color: var(--blue);
}
body.page-home .home-snap-layout--mobile .home-snap--cta .page--quote {
flex: 1 1 auto;
display: flex;
flex-direction: column;
min-height: 0;
width: 100%;
overflow: visible;
position: relative;
}
body.page-home .home-snap-layout--mobile .home-snap--cta .page--quote .cta-band--em2-green {
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
overflow: visible;
min-height: 0;
padding-top: var(--snap-content-pad-top);
padding-bottom: calc(var(--snap-content-inset-bottom) + 3.5rem);
}
body.page-home .home-snap-layout--mobile .home-snap--cta .cta-band__inner {
flex: 0 1 auto;
}
body.page-home .home-snap-layout--mobile .home-snap--signup-footer {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
min-height: 0;
}
body.page-home .home-snap-layout--mobile .home-snap--signup-footer .page--quote {
flex: 0 0 auto;
display: flex;
flex-direction: column;
min-height: 0;
width: 100%;
overflow: visible;
position: relative;
}
body.page-home .home-snap-layout--mobile .home-snap--signup-footer .page--quote .quote-signup {
flex: 0 0 auto;
display: flex;
flex-direction: column;
justify-content: flex-start;
position: relative;
overflow: visible;
min-height: 0;
padding: var(--snap-signup-footer-pad-top) 0 var(--snap-signup-footer-pad-bottom);
}
body.page-home .home-snap-layout--mobile .home-snap--signup-footer .quote-signup__inner {
flex: 0 0 auto;
min-height: 0;
}
body.page-home .home-snap-layout--mobile .home-snap--signup-footer .site-footer {
flex: 0 0 auto;
width: 100%;
margin-top: 0;
padding-top: var(--snap-signup-footer-footer-pad-top);
padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
}
/* Stage --top dividers overlap upward into the section above */
body.page-home .home-snap-layout--mobile .home-snap--showcase,
body.page-home .home-snap-layout--mobile .home-snap--cta .page--quote .cta-band,
body.page-home .home-snap-layout--mobile .home-snap--signup-footer .page--quote .quote-signup {
position: relative;
overflow: visible;
}
body.page-home .home-snap-layout--mobile .home-snap--showcase .section-divider--top,
body.page-home .home-snap-layout--mobile .home-snap--cta .page--quote .section-divider--top,
body.page-home .home-snap-layout--mobile .home-snap--signup-footer .page--quote .section-divider--top {
position: absolute;
top: 0;
bottom: auto;
left: 0;
width: 100%;
transform: translateY(-100%);
z-index: 3;
}
body.page-home .home-snap-layout--mobile .home-snap--cta .page--quote .cta-band .section-divider--wavy svg,
body.page-home .home-snap-layout--mobile .home-snap--signup-footer .page--quote .quote-signup .section-divider--wavy svg {
height: max(3.25rem, calc(100vw * 80 / 600));
min-height: 3.25rem;
}
/* Hide duplicate document footer — lives in snap-stage on mobile */
body.page-home > .site-footer {
display: none;
}
}
body.page-home .site-footer {
scroll-snap-align: none;
}
body.page-home .home-snap--hero {
--hero-ticker-top: clamp(56%, 61vh, 65%);
display: flex;
flex-direction: column;
justify-content: flex-start;
position: relative;
min-height: 100dvh;
min-height: 100svh;
height: 100dvh;
height: 100svh;
background: var(--black);
overflow-x: visible;
overflow-y: visible;
}
body.page-home .home-snap--hero .hero {
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: center;
max-height: var(--hero-ticker-top);
min-height: 0;
width: 100%;
overflow: visible;
box-sizing: border-box;
}
body.page-home .home-snap--hero .hero .container {
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
min-height: 0;
}
body.page-home .home-snap--combined,
body.page-home .home-snap-group {
display: flex;
flex-direction: column;
min-height: 100dvh;
min-height: 100svh;
height: 100dvh;
height: 100svh;
overflow: hidden;
}
body.page-home .home-snap-group .home-snap-group__pane {
flex: 1 1 50%;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 0;
overflow: hidden;
}
body.page-home .home-snap-group .home-snap-group__pane--usps {
position: relative;
overflow: visible;
}
body.page-home .home-snap__story {
flex: 1 1 50%;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 0;
overflow-y: auto;
padding-block: clamp(1.25rem, 3vw, 2rem);
}
body.page-home .home-snap__story.color-band {
padding-block: clamp(1.25rem, 3vw, 2rem);
}
body.page-home .home-snap__usps,
body.page-home .home-usps {
flex: 1 1 50%;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
min-height: 0;
background-color: var(--em2-green);
color: var(--white);
}
body.page-home .home-snap__usps .container,
body.page-home .home-usps .container {
width: 100%;
padding-inline: clamp(1.75rem, 5vw, 3rem);
}
body.page-home .home-snap__usps.color-band {
padding-block: clamp(1.25rem, 3vw, 2rem);
}
body.page-home .home-snap--combined .section-divider--em2-green,
body.page-home .home-snap-layout--mobile .home-snap__usps-divider {
color: var(--em2-green);
}
/* Desktop short height — story + USPs as separate full-viewport snap tiles */
@media (min-width: 768px) and (max-height: 1000px) {
body.page-home .home-snap-layout--desktop .home-snap-group {
display: contents;
height: auto;
min-height: 0;
overflow: visible;
}
body.page-home .home-snap-layout--desktop .snap-track .home-snap-group > .home-snap-group__pane {
scroll-snap-align: start;
scroll-snap-stop: normal;
min-height: 100dvh;
min-height: 100svh;
height: 100svh;
}
body.page-home .home-snap-layout--desktop .home-snap-group__pane {
display: flex;
flex-direction: column;
box-sizing: border-box;
overflow: hidden;
}
body.page-home .home-snap-layout--desktop .home-snap-group__pane--story {
justify-content: flex-start;
background-color: var(--lavender);
padding-top: clamp(1rem, 2.5vh, 1.5rem);
padding-bottom: clamp(1rem, 2.5vh, 1.5rem);
}
body.page-home .home-snap-layout--desktop .home-snap-group__pane--story .home-snap__story {
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 0;
overflow: hidden;
padding-block: 0;
}
body.page-home .home-snap-layout--desktop .home-snap-group__pane--story .home-snap__story.color-band {
padding-block: 0;
}
body.page-home .home-snap-layout--desktop .home-snap-group__pane--usps {
justify-content: center;
position: relative;
overflow: visible;
background-color: var(--em2-green);
padding-top: clamp(1.25rem, 3vh, 1.75rem);
padding-bottom: clamp(1rem, 2.5vh, 1.5rem);
}
body.page-home .home-snap-layout--desktop .home-snap-group__pane--usps .home-snap__usps {
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 0;
padding-block: 0;
}
body.page-home .home-snap-layout--desktop .home-snap-group__pane--usps .home-snap__usps-divider {
position: absolute;
top: 0;
left: 0;
width: 100%;
/* +1px overlap seals sub-pixel gap vs lavender story pane when snap tiles split */
transform: translateY(calc(-100% + 1px));
z-index: 3;
color: var(--em2-green);
line-height: 0;
pointer-events: none;
}
}
body.page-home .home-snap--process {
display: flex;
flex-direction: column;
justify-content: center;
height: auto;
overflow: visible;
}
body.page-home .home-snap--process .container {
width: 100%;
max-width: var(--max);
margin-inline: auto;
padding-inline: clamp(1.25rem, 4vw, 2rem);
}
.process__content {
width: 100%;
}
@media (prefers-reduced-motion: reduce) {
html.page-home-scroll {
scroll-snap-type: none;
scroll-behavior: auto;
}
body.page-home .home-snap-layout--desktop .snap-track > .home-snap,
body.page-home .home-snap-layout--desktop .home-snap--process {
min-height: 0;
height: auto;
}
body.page-home .home-snap--hero {
height: auto;
min-height: 0;
}
body.page-home .home-snap-layout--mobile .snap-stage {
scroll-snap-type: none;
-webkit-scroll-snap-type: none;
}
body.page-home .home-snap-layout--mobile .snap-stage > .home-snap {
scroll-snap-align: none;
height: auto;
min-height: 0;
}
body.page-home .home-snap--combined,
body.page-home .home-snap-group {
height: auto;
min-height: 0;
}
body.page-home .home-snap-group .home-snap-group__pane {
overflow-y: visible;
}
}
/* Homepage: transparent over hero until scroll */
.site-nav--homepage {
background: transparent;
}
.site-nav--homepage.site-nav--scrolled {
background: var(--black);
}
/* Homepage hero extends under transparent nav */
body.page-home {
--font-psychedelic: "Shrikhand", "Cooper Black", "Arial Black", serif;
padding-top: 0;
}
body.page-home .hero {
padding-top: calc(var(--nav-height) + clamp(3.75rem, 9vw, 7rem));
}
body.page-home .home-snap--hero .hero {
padding-top: calc(var(--nav-height) + clamp(0.5rem, 2vh, 1.25rem));
padding-bottom: clamp(0.75rem, 2vh, 1.5rem);
}
@media (max-width: 480px) {
body.page-home {
padding-top: 0;
}
}
/* ------------------------------------------------------------------
Hero — bold black band
------------------------------------------------------------------ */
body.page-home .hero {
position: relative;
isolation: isolate;
overflow: visible;
width: 100%;
padding: clamp(3.75rem, 9vw, 7rem) 0 clamp(3.25rem, 7.5vw, 5.75rem);
text-align: center;
background: var(--black);
color: var(--white);
}
.hero .container {
position: relative;
z-index: 1;
}
.hero__sparkles,
.sparkle-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
.hero__sparkle,
.sparkle-bg__dot {
position: absolute;
display: block;
border-radius: 50%;
background: var(--white);
box-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
animation: hero-sparkle-twinkle var(--sparkle-dur, 3s) ease-in-out infinite alternate;
animation-delay: var(--sparkle-delay, 0s);
}
.hero__sparkle--1 { top: 8%; left: 6%; width: 3px; height: 3px; opacity: 0.9; --sparkle-dur: 2.8s; --sparkle-delay: 0.1s; background: var(--white); }
.hero__sparkle--2 { top: 14%; left: 22%; width: 2px; height: 2px; opacity: 0.7; --sparkle-dur: 3.4s; --sparkle-delay: 0.6s; background: rgba(234, 255, 0, 0.85); box-shadow: 0 0 8px rgba(234, 255, 0, 0.5); }
.hero__sparkle--3 { top: 6%; left: 41%; width: 2.5px; height: 2.5px; opacity: 0.8; --sparkle-dur: 2.2s; --sparkle-delay: 1.2s; }
.hero__sparkle--4 { top: 18%; left: 58%; width: 2px; height: 2px; opacity: 0.65; --sparkle-dur: 4.1s; --sparkle-delay: 0.3s; background: var(--lavender); box-shadow: 0 0 6px rgba(200, 182, 255, 0.5); }
.hero__sparkle--5 { top: 11%; left: 78%; width: 3px; height: 3px; opacity: 0.95; --sparkle-dur: 3.1s; --sparkle-delay: 1.8s; }
.hero__sparkle--6 { top: 22%; left: 91%; width: 2px; height: 2px; opacity: 0.75; --sparkle-dur: 2.6s; --sparkle-delay: 0.9s; background: rgba(234, 255, 0, 0.8); box-shadow: 0 0 7px rgba(234, 255, 0, 0.45); }
.hero__sparkle--7 { top: 31%; left: 3%; width: 2px; height: 2px; opacity: 0.6; --sparkle-dur: 3.8s; --sparkle-delay: 2.1s; }
.hero__sparkle--8 { top: 38%; left: 15%; width: 2.5px; height: 2.5px; opacity: 0.85; --sparkle-dur: 2.9s; --sparkle-delay: 0.4s; background: rgba(26, 75, 255, 0.9); box-shadow: 0 0 8px rgba(26, 75, 255, 0.4); }
.hero__sparkle--9 { top: 44%; left: 33%; width: 2px; height: 2px; opacity: 0.7; --sparkle-dur: 4.3s; --sparkle-delay: 1.5s; }
.hero__sparkle--10 { top: 52%; left: 52%; width: 3px; height: 3px; opacity: 0.9; --sparkle-dur: 2.4s; --sparkle-delay: 0.7s; background: var(--white); }
.hero__sparkle--11 { top: 47%; left: 68%; width: 2px; height: 2px; opacity: 0.55; --sparkle-dur: 3.6s; --sparkle-delay: 2.4s; background: var(--lavender); box-shadow: 0 0 5px rgba(200, 182, 255, 0.45); }
.hero__sparkle--12 { top: 58%; left: 84%; width: 2.5px; height: 2.5px; opacity: 0.8; --sparkle-dur: 2.7s; --sparkle-delay: 1.1s; }
.hero__sparkle--13 { top: 63%; left: 11%; width: 2px; height: 2px; opacity: 0.65; --sparkle-dur: 3.9s; --sparkle-delay: 0.2s; background: rgba(234, 255, 0, 0.75); box-shadow: 0 0 6px rgba(234, 255, 0, 0.4); }
.hero__sparkle--14 { top: 71%; left: 27%; width: 3px; height: 3px; opacity: 0.85; --sparkle-dur: 2.5s; --sparkle-delay: 1.7s; }
.hero__sparkle--15 { top: 76%; left: 46%; width: 2px; height: 2px; opacity: 0.7; --sparkle-dur: 4.0s; --sparkle-delay: 0.8s; }
.hero__sparkle--16 { top: 69%; left: 61%; width: 2.5px; height: 2.5px; opacity: 0.75; --sparkle-dur: 3.2s; --sparkle-delay: 2.0s; background: var(--white); }
.hero__sparkle--17 { top: 82%; left: 73%; width: 2px; height: 2px; opacity: 0.6; --sparkle-dur: 2.3s; --sparkle-delay: 1.3s; background: rgba(234, 255, 0, 0.85); box-shadow: 0 0 7px rgba(234, 255, 0, 0.35); }
.hero__sparkle--18 { top: 88%; left: 88%; width: 3px; height: 3px; opacity: 0.9; --sparkle-dur: 3.5s; --sparkle-delay: 0.5s; }
.hero__sparkle--19 { top: 28%; left: 72%; width: 2px; height: 2px; opacity: 0.5; --sparkle-dur: 4.5s; --sparkle-delay: 2.6s; }
.hero__sparkle--20 { top: 85%; left: 4%; width: 2px; height: 2px; opacity: 0.7; --sparkle-dur: 3.0s; --sparkle-delay: 1.9s; background: var(--lavender); box-shadow: 0 0 5px rgba(200, 182, 255, 0.4); }
.hero__sparkle--21 { top: 35%; left: 88%; width: 2.5px; height: 2.5px; opacity: 0.8; --sparkle-dur: 2.1s; --sparkle-delay: 0.15s; }
.hero__sparkle--22 { top: 56%; left: 38%; width: 2px; height: 2px; opacity: 0.55; --sparkle-dur: 3.7s; --sparkle-delay: 2.2s; background: rgba(234, 255, 0, 0.7); box-shadow: 0 0 6px rgba(234, 255, 0, 0.35); }
.hero__sparkle--23 { top: 92%; left: 35%; width: 2px; height: 2px; opacity: 0.65; --sparkle-dur: 4.2s; --sparkle-delay: 1.0s; }
.hero__sparkle--24 { top: 4%; left: 65%; width: 2.5px; height: 2.5px; opacity: 0.75; --sparkle-dur: 2.8s; --sparkle-delay: 1.6s; background: var(--white); }
@keyframes hero-sparkle-twinkle {
0% {
opacity: 0.25;
transform: scale(0.7);
}
50% {
opacity: 1;
transform: scale(1.15);
}
100% {
opacity: 0.4;
transform: scale(0.85);
}
}
/* Star clusters flanking headline — paste user SVG inside each wrapper */
.hero__headline-wrap {
position: relative;
display: inline-block;
max-width: 100%;
padding-inline: clamp(0.5rem, 3vw, 1.25rem);
overflow: visible;
}
.hero__star-cluster {
position: absolute;
width: clamp(3rem, 7.5vw, 4.5rem);
height: clamp(2rem, 4.75vw, 2.875rem);
pointer-events: none;
overflow: visible;
}
.hero__star-cluster svg {
display: block;
width: 100%;
height: 100%;
overflow: visible;
}
/* Upper left — above headline, left side */
.hero__star-cluster--top {
bottom: calc(100% + 0.15rem);
left: 0;
transform: translateX(clamp(-1.75rem, -10vw, -0.5rem));
}
/* Bottom right — below headline, right side */
.hero__star-cluster--bottom {
top: calc(100% + 0.15rem);
right: 0;
transform: translateX(clamp(0.5rem, 10vw, 1.75rem));
}
@media (prefers-reduced-motion: reduce) {
.hero__sparkle,
.sparkle-bg__dot {
animation: none !important;
opacity: 0.85;
}
.process__step,
.process__step::after {
transform: none !important;
}
.process__step {
margin-top: 0 !important;
}
}
.hero__title {
margin: 0 0 1.75rem;
font-size: clamp(3.5rem, 11vw, 7.5rem);
line-height: 0.92;
color: var(--lavender);
text-transform: lowercase;
white-space: nowrap;
overflow: visible;
}
.hero__title--animate .hero__title-word {
display: inline-block;
overflow: visible;
padding-inline: 0.08em;
opacity: 0;
transform: translateY(0.4em) rotate(var(--word-wobble, 0deg)) scale(0.9);
animation: hero-title-write 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
animation-delay: calc(0.12s + var(--word-index) * 0.24s);
}
@keyframes hero-title-write {
0% {
opacity: 0;
transform: translateY(0.4em) rotate(var(--word-wobble, 0deg)) scale(0.9);
}
55% {
opacity: 1;
transform: translateY(-0.06em) rotate(calc(var(--word-wobble, 0deg) * -0.25)) scale(1.03);
}
100% {
opacity: 1;
transform: translateY(0) rotate(0deg) scale(1);
}
}
@media (prefers-reduced-motion: reduce) {
.hero__title--animate .hero__title-word {
opacity: 1;
transform: none;
animation: none;
}
}
.hero__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.75rem;
}
.hero__actions .btn--primary {
background: var(--blue);
color: var(--neon-yellow);
border: 2px solid var(--blue);
box-shadow: 0 8px 24px var(--blue-glow);
}
.hero__actions .btn--primary:hover:not(:disabled) {
background: var(--neon-yellow);
color: var(--blue);
border-color: var(--neon-yellow);
box-shadow: 0 10px 32px rgba(234, 255, 0, 0.22);
}
.hero__actions .btn--primary:focus-visible {
outline: 2px solid var(--neon-yellow);
outline-offset: 3px;
}
.hero__actions .btn--primary:hover:focus-visible,
.hero__actions .btn--primary:focus-visible:hover {
outline-color: var(--blue);
}
.hero__title-br {
display: none;
}
@media (min-width: 900px) {
.hero__title {
font-size: clamp(8.75rem, 11vw, 11.5rem);
}
}
/* ------------------------------------------------------------------
Ticker — marquee band
------------------------------------------------------------------ */
body.page-home .ticker {
overflow: hidden;
width: 100%;
padding: 1rem 0;
background: var(--neon-yellow);
color: var(--blue);
flex-shrink: 0;
}
body.page-home .home-snap--hero .ticker-clip {
position: absolute;
left: -6%;
right: -6%;
top: var(--hero-ticker-top);
z-index: 3;
width: auto;
margin: 0;
padding-block: 1.1rem;
overflow: visible;
background: transparent;
transform: rotate(-3deg);
transform-origin: center center;
}
body.page-home .home-snap--hero .ticker--tilted {
position: relative;
z-index: 1;
flex-shrink: 0;
align-self: stretch;
width: 100%;
margin-inline: 0;
margin-bottom: 0;
padding-block: 1.1rem;
overflow: hidden;
transform: none;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}
.ticker--tilted {
position: relative;
z-index: 3;
flex-shrink: 0;
width: 118%;
margin-left: -9%;
margin-bottom: -0.35rem;
transform: rotate(-4.5deg);
transform-origin: center center;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}
.ticker__track {
display: flex;
width: max-content;
animation: ticker-scroll 28s linear infinite;
}
.ticker__content {
display: flex;
flex-shrink: 0;
align-items: center;
gap: 0;
padding-right: 0;
}
.ticker__item {
font-size: clamp(2rem, 4.5vw, 2.75rem);
line-height: 1;
white-space: nowrap;
}
.ticker__sep {
display: inline-flex;
align-items: center;
gap: 0.15em;
padding-inline: 2rem;
font-family: var(--font-body);
font-weight: 700;
line-height: 1;
opacity: 0.85;
}
.ticker__plus {
font-size: 1.05em;
line-height: 1;
}
@keyframes ticker-scroll {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
@media (prefers-reduced-motion: reduce) {
.ticker__track {
animation: none;
width: 100%;
justify-content: center;
}
.ticker__content + .ticker__content {
display: none;
}
}
@media (min-width: 900px) {
.ticker__item {
font-size: 3.25rem;
}
}
@media (max-width: 767px) {
/* Mobile homepage nav — always black over hero */
body.page-home .site-nav--homepage {
background: var(--black);
}
body.page-home .home-snap-layout--mobile .snap-stage > .home-snap--hero {
--hero-ticker-top: clamp(64%, 70vh, 76%);
height: 100dvh;
height: 100svh;
min-height: 100dvh;
min-height: 100svh;
max-height: none;
overflow: visible;
background-color: var(--black);
}
body.page-home .home-snap-layout--mobile .snap-stage > .home-snap--story,
body.page-home .home-snap-layout--mobile .snap-stage > .home-snap--usps-slide,
body.page-home .home-snap-layout--mobile .snap-stage > .home-snap--process,
body.page-home .home-snap-layout--mobile .snap-stage > .home-snap--showcase,
body.page-home .home-snap-layout--mobile .snap-stage > .home-snap--cta {
height: 100%;
min-height: 100%;
max-height: none;
overflow: hidden;
overflow-y: hidden;
}
body.page-home .home-snap-layout--mobile .snap-stage > .home-snap--signup-footer {
height: auto;
min-height: 100svh;
max-height: none;
overflow: visible;
}
body.page-home .home-snap-layout--mobile .snap-stage > .home-snap--usps-slide,
body.page-home .home-snap-layout--mobile .snap-stage > .home-snap--showcase,
body.page-home .home-snap-layout--mobile .snap-stage > .home-snap--cta,
body.page-home .home-snap-layout--mobile .snap-stage > .home-snap--signup-footer {
overflow: visible;
}
body.page-home .home-snap-layout--mobile .home-snap--process {
justify-content: flex-start;
padding-block: 0;
}
body.page-home .home-snap-layout--mobile .home-snap--process.process {
padding: 0;
}
body.page-home .home-snap-layout--mobile .home-snap--process .container {
padding-top: var(--snap-content-pad-top);
padding-bottom: var(--snap-content-inset-bottom);
}
body.page-home .home-snap-layout--mobile .home-snap--hero .hero {
justify-content: flex-start;
padding-top: var(--nav-height);
padding-bottom: clamp(1rem, 3vh, 1.5rem);
}
body.page-home .home-snap-layout--mobile .home-snap--hero .hero .container {
flex: 0 0 auto;
justify-content: flex-start;
padding-top: clamp(3.25rem, 10vh, 5rem);
padding-bottom: clamp(0.75rem, 2.5vh, 1.25rem);
}
body.page-home .home-snap-layout--mobile .home-snap--usps-slide .home-usps__copy {
transform: translateY(-2.75rem);
}
body.page-home .hero__headline-wrap {
overflow: visible;
padding-inline: clamp(0.85rem, 5vw, 1.5rem);
}
body.page-home .hero__title {
font-size: clamp(5.5rem, 19.5vw, 7.25rem);
white-space: normal;
overflow: visible;
}
body.page-home .hero__actions .btn--outline:hover:not(:disabled) {
background: var(--neon-yellow);
color: var(--blue);
border-color: var(--neon-yellow);
box-shadow: 0 10px 32px rgba(234, 255, 0, 0.22);
}
body.page-home .hero__actions .btn--outline:focus-visible {
outline: 2px solid var(--neon-yellow);
outline-offset: 3px;
}
body.page-home .hero__actions .btn--outline:hover:focus-visible,
body.page-home .hero__actions .btn--outline:focus-visible:hover {
outline-color: var(--blue);
}
body.page-home .hero__title-word:first-child {
text-transform: none;
}
body.page-home .hero__title-br {
display: block;
}
body.page-home .home-snap--process .process__header {
text-align: left;
}
body.page-home .home-snap--process .process__title {
font-family: "Pirata One", "UnifrakturMaguntia", serif;
font-weight: 400;
font-synthesis: none;
letter-spacing: 0.04em;
font-size: clamp(4rem, 15vw, 5.85rem);
}
body.page-home .home-snap--process .process__step-num,
body.page-home .home-snap--process .process__step-title {
font-size: 1.25rem;
}
body.page-home .home-snap-layout--mobile .home-snap--process .process__steps {
position: relative;
gap: 0;
width: min(100%, 20.5rem);
margin-inline: auto;
padding: 2.2rem 2.5rem;
border-radius: var(--radius);
background: var(--white);
box-shadow: var(--card-shadow);
isolation: isolate;
overflow: visible;
}
body.page-home .home-snap-layout--mobile .home-snap--process .process__steps::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
pointer-events: none;
transform: translate(10px, 10px);
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 100 100'%3E%3Crect x='2.5' y='2.5' width='95' height='95' rx='12' ry='12' fill='none' stroke='%231a4bff' stroke-width='5' stroke-dasharray='13 8 6 14 10 7 11 9 8 12' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
body.page-home .home-snap-layout--mobile .home-snap--process .process__step {
max-width: 100%;
width: 100%;
box-sizing: border-box;
padding: 0;
margin: 0;
background: transparent;
box-shadow: none;
border-radius: 0;
}
body.page-home .home-snap-layout--mobile .home-snap--process .process__step::after {
display: none;
}
body.page-home .home-snap-layout--mobile .home-snap--process .process__step:not(:last-child) {
padding-bottom: 1.15rem;
margin-bottom: 1.15rem;
}
body.page-home .home-snap-layout--mobile .home-snap--process .process__header {
margin-bottom: 1.25rem;
padding-top: 0;
}
/* Showcase → green CTA: seal lavender bleed through wavy divider SVG gaps */
body.page-home .home-snap-layout--mobile .home-snap--showcase {
margin-bottom: -2px;
}
body.page-home .home-snap-layout--mobile .home-snap--showcase .showcase__image-frame {
width: 100%;
max-width: 100%;
transform: translateY(-1rem);
}
body.page-home .home-snap-layout--mobile .home-snap--showcase::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 4px;
background: var(--em2-green);
z-index: 2;
pointer-events: none;
}
body.page-home .home-snap-layout--mobile .home-snap--cta .page--quote > .cta-band.cta-band--em2-green {
margin-top: -3px;
z-index: 1;
}
body.page-home .home-snap-layout--mobile .home-snap--cta .page--quote .cta-band .section-divider--wavy {
background-color: var(--em2-green);
}
body.page-home .home-snap-layout--mobile .home-snap--cta .page--quote .cta-band .section-divider--wavy svg {
background-color: var(--em2-green);
}
body.page-home .home-snap-layout--mobile .home-snap--cta .page--quote .cta-band.cta-band--em2-green::before {
content: "";
position: absolute;
top: -6px;
left: 0;
width: 100%;
height: 8px;
background: var(--em2-green);
z-index: 4;
pointer-events: none;
}
body.page-home .home-snap-layout--mobile .home-snap--cta .page--quote .cta-band .section-divider--top {
z-index: 3;
}
body.page-home .home-snap-layout--mobile .home-snap--cta .page--quote .cta-band__title {
font-size: clamp(2.5rem, 9vw, 4.5rem);
}
/* Mobile home — unified snap-stage body / lede / step copy */
body.page-home .home-snap-layout--mobile .color-band__text,
body.page-home .home-snap-layout--mobile .home-usps__lede,
body.page-home .home-snap-layout--mobile .process__step-text {
font-size: 1.0625rem;
line-height: 1.6;
}
}
/* ------------------------------------------------------------------
Hero scroll hint — bounce arrow on first snap
------------------------------------------------------------------ */
.home-scroll-hint {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
left: 50%;
z-index: 99;
margin: 0;
width: 2.75rem;
height: 2.75rem;
padding: 0;
border: none;
border-radius: 999px;
background: var(--white);
color: var(--blue);
cursor: pointer;
pointer-events: auto;
transform: translateX(-50%);
transition: opacity 0.35s ease, visibility 0.35s ease;
animation: home-scroll-hint-bounce 2s ease-in-out infinite;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.home-scroll-hint__icon {
width: 1.35rem;
height: 1.35rem;
filter: none;
}
.home-scroll-hint--hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
animation: none;
}
@keyframes home-scroll-hint-bounce {
0%, 100% {
transform: translateX(-50%) translateY(0);
}
50% {
transform: translateX(-50%) translateY(0.5rem);
}
}
@media (max-width: 767px) {
body.page-home .home-scroll-hint {
position: fixed !important;
z-index: 99 !important;
}
}
@media (prefers-reduced-motion: reduce) {
.home-scroll-hint {
animation: none;
}
}
/* ------------------------------------------------------------------
Color bands — full-width flat blocks
------------------------------------------------------------------ */
body.page-home .color-band {
width: 100%;
padding: clamp(2.5rem, 6vw, 4rem) 0;
}
@media (max-width: 767px) {
body.page-home .home-snap-layout--mobile .home-snap--story .home-snap__story.color-band {
padding-top: var(--snap-content-pad-top);
padding-bottom: var(--snap-content-inset-bottom);
}
body.page-home .home-snap-layout--mobile .home-snap--usps-slide .home-snap__usps.color-band {
padding-top: var(--snap-usps-pad-top);
padding-bottom: var(--snap-content-inset-bottom);
}
}
.color-band--lavender {
background: var(--lavender);
color: var(--ink);
}
.color-band--blue {
background: var(--blue);
color: var(--white);
}
.color-band--yellow {
background: var(--neon-yellow);
color: var(--ink);
}
.color-band--green {
background: var(--neon-green);
color: var(--ink);
}
.color-band--em2-green,
body.page-home .home-snap__usps.color-band--em2-green,
body.page-home .home-usps.color-band--em2-green {
background-color: var(--em2-green);
color: var(--white);
}
.color-band--orange {
background: var(--neon-orange);
color: var(--white);
}
.color-band--black {
position: relative;
background: var(--black);
color: var(--white);
}
.color-band__eyebrow {
margin: 0 0 0.5rem;
font-family: var(--font-body);
font-size: 0.75rem;
font-weight: 900;
letter-spacing: 0.14em;
text-transform: uppercase;
opacity: 0.85;
}
.color-band__eyebrow--pill {
display: inline-block;
margin-bottom: 0.85rem;
padding: 0.45rem 1rem;
border-radius: 999px;
background: var(--blue);
color: var(--neon-yellow);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.12em;
opacity: 1;
}
.color-band--lavender .color-band__eyebrow:not(.color-band__eyebrow--pill) {
color: var(--neon-yellow);
opacity: 1;
}
.color-band__title {
margin: 0 0 1rem;
font-size: clamp(2.75rem, 6vw, 4rem);
line-height: 0.95;
text-transform: lowercase;
}
.color-band__text {
margin: 0 0 1.25rem;
max-width: none;
font-size: 1.0625rem;
}
.color-band--lavender .color-band__text {
max-width: none;
}
.color-band--blue .color-band__text,
.color-band--orange .color-band__text,
.color-band--black .color-band__text {
color: rgba(255, 255, 255, 0.92);
}
.color-band--lavender .color-band__text,
.color-band--yellow .color-band__text,
.color-band--green .color-band__text {
color: var(--ink-soft);
}
.home-snap--combined .color-band__text,
.home-snap-group .color-band__text {
margin-bottom: clamp(0.75rem, 2vw, 1rem);
}
.home-snap--combined .color-band__title,
.home-snap-group .color-band__title {
margin-bottom: clamp(1rem, 2.5vw, 1.5rem);
}
@media (max-width: 767px) {
.home-snap--combined .color-band__text,
.home-snap-group .color-band__text {
font-size: 0.9375rem;
line-height: 1.55;
}
}
.color-band__text:last-child {
margin-bottom: 0;
}
/* Home — unified body copy: Why I design */
.color-band--lavender .color-band__text {
font-size: 1.0625rem;
line-height: 1.65;
}
@media (min-width: 900px) {
.color-band__title {
font-size: clamp(4rem, 5vw, 5rem);
}
.color-band--lavender .color-band__text {
font-size: 1.3125rem;
}
}
/* ------------------------------------------------------------------
Split rows — alternating text + image
------------------------------------------------------------------ */
.split-row {
display: grid;
gap: 2rem;
align-items: center;
}
@media (min-width: 768px) {
.split-row {
grid-template-columns: 1fr 1fr;
gap: 3rem;
}
.split-row--reverse .split-row__copy {
order: 2;
}
.split-row--reverse .split-row__media {
order: 1;
}
}
.split-row__media {
margin: 0;
}
.split-row__media img {
width: 100%;
max-width: 26rem;
margin-inline: auto;
border-radius: var(--radius);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
}
.split-row__title {
margin: 0 0 0.75rem;
font-size: clamp(2.5rem, 5vw, 3.5rem);
line-height: 0.95;
text-transform: lowercase;
}
.split-row__text {
margin: 0 0 1.25rem;
color: inherit;
opacity: 0.9;
}
.split-row__text:last-of-type {
margin-bottom: 1.5rem;
}
@media (min-width: 900px) {
.split-row__title {
font-size: clamp(3.5rem, 4vw, 4.25rem);
}
}
/* ------------------------------------------------------------------
Showcase — lilac band + framed featured image
------------------------------------------------------------------ */
body.page-home .showcase {
position: relative;
width: 100%;
padding: clamp(4rem, 9vw, 6.5rem) 0;
margin: 0;
background: var(--lavender);
}
body.page-home .showcase .section-divider--lavender {
color: var(--lavender);
}
body.page-home .page--quote .quote-signup .section-divider--pink {
color: var(--pink-closer);
}
.color-band--black:has(+ .process) {
padding-bottom: calc(clamp(2.5rem, 6vw, 4rem) + var(--angular-divider-offset));
}
.showcase__inner {
display: flex;
justify-content: center;
}
@media (min-width: 768px) {
body.page-home .home-snap-layout--desktop .showcase .showcase__inner {
flex-direction: row;
align-items: center;
gap: clamp(2rem, 4vw, 3.5rem);
flex-wrap: wrap;
}
body.page-home .home-snap-layout--desktop .showcase .showcase__media {
flex: 0 1 auto;
min-width: 0;
}
body.page-home .home-snap-layout--desktop .showcase .showcase__actions {
flex: 0 0 auto;
}
body.page-home .home-snap-layout--desktop .showcase .showcase__actions .btn--primary {
background: var(--blue);
color: var(--neon-yellow);
border: 2px solid var(--blue);
box-shadow: none;
transform: none;
}
body.page-home .home-snap-layout--desktop .showcase .showcase__actions .btn--primary:hover:not(:disabled),
body.page-home .home-snap-layout--desktop .showcase .showcase__actions .btn--primary:focus-visible:not(:disabled) {
background: var(--neon-yellow);
color: var(--blue);
border-color: var(--neon-yellow);
box-shadow: none;
transform: none;
}
}
.showcase__media {
margin: 0;
}
.showcase__image-frame {
width: min(100%, 52rem);
max-width: 100%;
border: 3px solid var(--black);
border-radius: var(--radius);
box-shadow: clamp(-12px, -2vw, -8px) clamp(10px, 2vw, 14px) 0 var(--black);
overflow: hidden;
background: var(--black);
line-height: 0;
}
.showcase__image-frame img {
display: block;
width: 100%;
height: auto;
border-radius: 0;
box-shadow: none;
}
/* ------------------------------------------------------------------
Home USP — single headline + subtext (green band)
------------------------------------------------------------------ */
.color-band--black .container {
text-align: left;
}
.home-usps__copy {
width: 100%;
max-width: min(92vw, 80rem);
margin-inline: auto;
text-align: left;
}
.home-usps__lede {
margin: 0;
font-family: var(--font-body);
font-size: clamp(1rem, 2.75vw, 1.25rem);
font-weight: 400;
line-height: 1.45;
color: var(--white);
}
.home-usps__callout {
margin: clamp(1.25rem, 3.5vw, 2rem) 0 0;
font-family: "Shrikhand", "Cooper Black", serif;
font-weight: 400;
font-synthesis: none;
font-size: clamp(2rem, 8vw, 4.2rem);
line-height: 1.12;
color: var(--neon-yellow);
overflow-wrap: break-word;
}
.home-usps__callout-line {
display: block;
}
.home-usps__uc {
text-transform: none;
}
@media (min-width: 768px) {
.home-snap__usps .container,
.home-usps .container {
max-width: none;
width: 100%;
padding-inline: clamp(2.5rem, 8vw, 5.5rem);
}
.home-usps__callout {
font-size: clamp(2.2rem, 6.8vw, 4.4rem);
}
.home-snap--process .process__header {
text-align: center;
}
.home-snap--process .process__steps {
gap: 2.75rem 3.75rem;
width: 100%;
max-width: 100%;
}
}
@media (min-width: 900px) {
.home-usps__lede {
font-size: 1.375rem;
}
.home-usps__callout {
font-size: clamp(2.6rem, 5.2vw, 4.6rem);
}
.home-snap--process .process__steps {
gap: 3rem 4.5rem;
}
}
.color-band--black .color-band__title {
margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
font-family: var(--font-body);
font-weight: 800;
letter-spacing: -0.02em;
transform: rotate(-2.5deg);
transform-origin: left center;
}
/* ------------------------------------------------------------------
Home — process steps on color band
------------------------------------------------------------------ */
body.page-home .process {
width: 100%;
padding: clamp(2.5rem, 6vw, 4rem) 0;
background: var(--lavender);
overflow: visible;
}
body.page-home .home-snap--process.process {
background-color: var(--white);
background-image:
linear-gradient(45deg, var(--mint-checker) 25%, transparent 25%),
linear-gradient(-45deg, var(--mint-checker) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, var(--mint-checker) 75%),
linear-gradient(-45deg, transparent 75%, var(--mint-checker) 75%);
background-size: var(--checker-size) var(--checker-size);
background-position:
0 0,
0 calc(var(--checker-size) / 2),
calc(var(--checker-size) / 2) calc(var(--checker-size) / -2),
calc(var(--checker-size) / -2) 0;
padding-bottom: calc(clamp(2.5rem, 6vw, 4rem) + var(--cta-band-offset));
}
.home-snap--process .process__title {
font-family: "Pirata One", "UnifrakturMaguntia", serif;
font-weight: 400;
font-synthesis: none;
letter-spacing: 0.04em;
font-size: clamp(2.25rem, 5vw, 3.25rem);
}
.process__header {
margin-bottom: 2rem;
text-align: left;
}
.process__title {
margin: 0 0 0.5rem;
font-size: clamp(2.5rem, 5vw, 3.5rem);
line-height: 1;
color: var(--blue);
text-transform: lowercase;
}
.process__steps {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2rem;
margin: 0;
padding-block: 0.75rem 1rem;
padding-inline: 0;
list-style: none;
}
@media (min-width: 768px) {
.process__steps {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: start;
gap: 2.75rem 3.75rem;
padding-block: 0.75rem 1.25rem;
padding-inline: 0;
}
}
@media (min-width: 900px) {
.process__steps {
gap: 3rem 4.5rem;
}
}
.process__step {
position: relative;
width: 100%;
max-width: 17.5rem;
padding: 2.5rem 2.75rem;
border-radius: var(--radius);
background: var(--white);
box-shadow: var(--card-shadow);
isolation: isolate;
overflow: visible;
}
@media (min-width: 768px) {
.process__step {
max-width: none;
}
.home-snap--process .process__step {
width: 100%;
max-width: 100%;
}
}
.process__step::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
pointer-events: none;
transform: translate(10px, 10px);
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 100 100'%3E%3Crect x='2.5' y='2.5' width='95' height='95' rx='12' ry='12' fill='none' stroke='%231a4bff' stroke-width='5' stroke-dasharray='13 8 6 14 10 7 11 9 8 12' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.process__step:nth-child(2)::after {
transform: translate(-10px, -10px);
}
.process__step-heading {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.35rem 0.45rem;
margin: 0 0 0.5rem;
font: inherit;
}
.process__step-num,
.process__step-title {
display: inline;
margin: 0;
font-family: var(--font-body);
font-size: 1.125rem;
font-weight: 900;
line-height: 1.2;
color: var(--black);
letter-spacing: 0;
}
.process__step-text {
margin: 0;
font-size: 1.0625rem;
line-height: 1.65;
color: var(--ink-soft);
}
.process__step-text a {
position: relative;
display: inline;
color: var(--blue);
font-weight: 700;
text-decoration: none;
}
.process__step-text a::after {
content: "";
position: absolute;
left: 0;
bottom: calc(-1 * var(--link-underline-offset));
width: 100%;
height: var(--link-underline-thickness);
background-color: currentColor;
transform: scaleX(0);
transform-origin: left center;
transition: transform var(--link-underline-duration) ease;
pointer-events: none;
}
.process__step-text a:hover,
.process__step-text a:focus-visible {
color: var(--blue);
}
.process__step-text a:hover::after,
.process__step-text a:focus-visible::after {
transform: scaleX(1);
}
@media (min-width: 768px) {
.process__step-num,
.process__step-title {
font-size: 1.4375rem;
}
}
@media (min-width: 900px) {
.process__title {
font-size: clamp(3.5rem, 4vw, 4.25rem);
}
.process__step-num,
.process__step-title {
font-size: 1.5625rem;
}
.process__step-text {
font-size: 1.3125rem;
}
}
/* TEMP: Inter bold headings — revert to Bohemy if needed */
.color-band--lavender .color-band__title {
font-family: var(--font-body);
font-weight: 800;
font-synthesis: none;
}
.color-band--lavender .color-band__title {
margin-bottom: 1.75rem;
font-size: clamp(2rem, 4.5vw, 2.875rem);
line-height: 1.15;
}
.process__title {
font-size: clamp(1.875rem, 4vw, 2.625rem);
}
.color-band--black .color-band__title {
font-size: clamp(2.25rem, 5vw, 3.25rem);
}
@media (min-width: 900px) {
.color-band--lavender .color-band__title {
font-size: clamp(2.5rem, 3.25vw, 3.125rem);
}
.process__title {
font-size: clamp(2.25rem, 3vw, 2.875rem);
}
.color-band--black .color-band__title {
font-size: clamp(3rem, 3.75vw, 3.75rem);
}
.home-snap--process .process__title {
font-size: clamp(3.5rem, 5.5vw, 5rem);
}
}
/* Home CTA — EM2 green + Rancho Camino */
body.page-home .cta-band.cta-band--em2-green {
background-color: var(--em2-green);
color: var(--white);
padding-top: clamp(4.5rem, 10vw, 7rem);
padding-bottom: clamp(4.5rem, 10vw, 7rem);
}
body.page-home .page--quote .cta-band.cta-band--em2-green:has(+ .quote-signup) {
padding-bottom: calc(clamp(4.5rem, 10vw, 7rem) + var(--cta-band-offset));
}
body.page-home .cta-band.cta-band--em2-green .section-divider--em2-green {
color: var(--em2-green);
}
body.page-home .cta-band.cta-band--em2-green .section-divider--wavy svg {
height: clamp(3.5rem, 7vw, 5.5rem);
}
body.page-home .cta-band.cta-band--em2-green .cta-band__title {
font-family: "Rancho Camino", "Segoe Script", cursive;
font-weight: 400;
font-style: normal;
font-synthesis: none;
font-size: clamp(3.25rem, 10vw, 6.5rem);
line-height: 0.95;
color: var(--neon-yellow);
}
body.page-home .cta-band.cta-band--em2-green .cta-band__text {
font-family: var(--font-body);
font-size: clamp(1.125rem, 2.5vw, 1.375rem);
line-height: 1.4;
color: rgba(255, 255, 255, 0.92);
}
body.page-home .cta-band.cta-band--em2-green .btn--yellow {
background: var(--neon-yellow);
color: var(--em2-green);
border-color: transparent;
}
body.page-home .cta-band.cta-band--em2-green .btn--outline {
background: transparent;
color: var(--white);
border-color: var(--white);
}
body.page-home .page--quote .cta-band.cta-band--em2-green .cta-band__actions .btn--yellow:hover,
body.page-home .page--quote .cta-band.cta-band--em2-green .cta-band__actions .btn--yellow:focus-visible,
body.page-home .page--quote .cta-band.cta-band--em2-green .cta-band__actions .btn--yellow:active,
body.page-home .page--quote .cta-band.cta-band--em2-green .cta-band__actions .btn--outline:hover,
body.page-home .page--quote .cta-band.cta-band--em2-green .cta-band__actions .btn--outline:focus-visible,
body.page-home .page--quote .cta-band.cta-band--em2-green .cta-band__actions .btn--outline:active,
body.page-home .cta-band.cta-band--em2-green .btn--yellow:hover,
body.page-home .cta-band.cta-band--em2-green .btn--yellow:focus-visible,
body.page-home .cta-band.cta-band--em2-green .btn--yellow:active,
body.page-home .cta-band.cta-band--em2-green .btn--outline:hover,
body.page-home .cta-band.cta-band--em2-green .btn--outline:focus-visible,
body.page-home .cta-band.cta-band--em2-green .btn--outline:active {
background: var(--lavender);
color: var(--white);
border-color: var(--lavender);
box-shadow: none;
}
body.page-home .cta-band.cta-band--em2-green a:not(.btn) {
color: var(--white);
}
body.page-home .cta-band.cta-band--em2-green a:not(.btn):hover {
color: var(--neon-yellow);
}
@media (min-width: 900px) {
body.page-home .cta-band.cta-band--em2-green .cta-band__title {
font-size: clamp(5.5rem, 8vw, 7.5rem);
}
}
/* Home story headline — Cheva Display (lavender snap) */
.home-snap__story.color-band--lavender {
color: var(--blue);
}
.home-snap__story.color-band--lavender .color-band__title,
.home-snap__story.color-band--lavender .color-band__text {
color: var(--blue);
}
.home-snap__story.color-band--lavender .color-band__eyebrow--pill {
background: var(--neon-yellow);
color: var(--blue);
font-size: clamp(0.9375rem, 2.75vw, 1.1875rem);
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 0.65rem 1.5rem;
margin-bottom: 1rem;
}
.home-snap__story.color-band--lavender .color-band__title {
font-family: "Cheva Display", "Shrikhand", cursive;
font-weight: 400;
font-synthesis: none;
font-size: clamp(2.75rem, 6vw, 3.75rem);
}
@media (min-width: 900px) {
.home-snap__story.color-band--lavender .color-band__title {
font-size: clamp(3.5rem, 4.5vw, 4.75rem);
}
}