/* FODL VOICES — client testimonial marquee, directly below the Featured Projects grid.
   Structure taken from superside.com's testimonial band: two full-bleed rows of quote
   cards drifting in opposite directions, edges dissolving into the page. Everything
   else is ours — Superside runs cream cards on #f6f6ef with photo avatars and real
   client logos; this is cinema black with hairline cards, Funnel Display / Geist type
   and monogram avatars, so no foreign typeface or borrowed asset enters the page.
   Card copy uses the site's body token (Geist 500 / 1rem / 1.7 / -.03em / #dcdcdc @ 80%),
   the same one .fpr-sub, .fcta-paragraph and .fpw-copy use.
   Motion: pure CSS translate on a repeated group; the inline script (fvo block at the
   end of index.html) only clones the group until it covers the viewport and pins the
   shift/duration so the loop is seamless and both rows share one px/sec speed. */

.fvo-section{background-color:#0A0A0A;position:relative;z-index:1;overflow:hidden}

/* --- title block: the site's own (.section-text-box.for-titles + .heading-h2 + the
   [ ] labels link), taking the same dark-field treatment .fodl-services-title takes --- */
.fvo-section .heading-h2{color:var(--_theme---neutral-colors--primary)}
/* the wipe tiles must match the section, or the load animation flashes a grid */
.fvo-section .loader-block{background-color:#0A0A0A}
/* the template's 3px of exposed roll-copy under the label glares on black */
.fvo-section .labels-block{padding-bottom:0}
/* the other title blocks carry a 126px .custom-space plus a 118px column gap above the
   heading. They sit under full-bleed sections; this one sits under the projects grid,
   which already ends on 110px of its own padding, so the lead-in is dropped from the
   markup and the section takes a plain 5em instead (~384px of black above the heading
   became ~190px). */
.fvo-section .padding-section-v{padding-top:5em}

/* --- rows: full-bleed, outside the container gutter --- */
/* the site sets its headings ~140px above the content they title (services 140,
   featured projects 170); the title block only carries 1.875em below it, so the band
   makes up the rest */
.fvo-rows{grid-row-gap:.25rem;flex-flow:column;display:flex;position:relative;padding-top:5em;padding-bottom:6em}
/* the row clips the marquee horizontally, which also clipped the top of a card as it
   lifted on hover; the vertical padding is the headroom for that lift (the row gap is
   dropped by the same amount, so the two rows still sit 1.25rem apart) */
.fvo-row{overflow:hidden;position:relative;padding-top:8px;padding-bottom:8px}
.fvo-track{--fvo-shift:50%;width:max-content;display:flex;animation:fvo-marquee 80s linear infinite;will-change:transform}
.fvo-row-b .fvo-track{animation-direction:reverse}
/* hovering a row holds it still so a card can actually be read (and clicked into) */
.fvo-row:hover .fvo-track,.fvo-row:focus-within .fvo-track{animation-play-state:paused}
@keyframes fvo-marquee{from{transform:translateX(0)}to{transform:translateX(calc(-1*var(--fvo-shift)))}}
/* the trailing padding is what keeps the seam gap identical to the inner gaps, so
   translating by exactly one group width lands the copy in the original's place */
.fvo-group{--fvo-gap:1.25rem;grid-column-gap:var(--fvo-gap);flex:none;padding-right:var(--fvo-gap);display:flex}

/* --- the page eats the row ends instead of clipping cards mid-word --- */
.fvo-fade{z-index:2;pointer-events:none;width:min(14vw,180px);position:absolute;top:0;bottom:0}
.fvo-fade.is-left{background-image:linear-gradient(90deg,#0A0A0A 12%,#0a0a0a00);left:0}
.fvo-fade.is-right{background-image:linear-gradient(-90deg,#0A0A0A 12%,#0a0a0a00);right:0}

/* --- card --- */
.fvo-card{background-color:#dcdcdc08;border:1px solid #dcdcdc24;border-radius:12px;flex-flow:column;width:min(24rem,80vw);min-height:16.5rem;padding:1.6rem 1.6rem 1.5rem;display:flex;transition:border-color .3s,background-color .3s,transform .3s}
.fvo-card:hover{background-color:#dcdcdc0f;border-color:#eeb60359;transform:translateY(-3px)}
.fvo-head{grid-column-gap:.85rem;align-items:center;margin-bottom:1.15rem;display:flex}
/* monogram stands in for superside's headshots — no invented faces on the page */
.fvo-avatar{color:#dcdcdccc;background-color:#dcdcdc14;border:1px solid #dcdcdc2e;border-radius:50%;flex:none;justify-content:center;align-items:center;width:2.6rem;height:2.6rem;font-family:"Funnel Display",sans-serif;font-size:.85rem;font-weight:800;letter-spacing:.02em;display:flex;transition:border-color .3s,color .3s}
.fvo-card:hover .fvo-avatar{color:#EEB603;border-color:#eeb60366}
.fvo-name{color:#f0f0f0;font-family:Geist,sans-serif;font-size:.95rem;font-weight:600;letter-spacing:-.015em;line-height:1.3}
.fvo-role{color:#dcdcdc80;font-family:Geist,sans-serif;font-size:.8rem;font-weight:500;letter-spacing:-.01em;line-height:1.4;margin-top:.15rem}
/* the template styles every blockquote as an italic serif pull-quote with a rule down
   the left; this is body copy in a card, so all of that is reset */
.fvo-quote{color:#dcdcdccc;border:0;margin:0;padding:0;font-style:normal;font-family:Geist,sans-serif;font-size:1rem;font-weight:500;letter-spacing:-.03em;line-height:1.7}
/* wordmarks are set in our own display face rather than dropped-in client logos */
.fvo-logo{color:#dcdcdc80;margin-top:auto;padding-top:1.5rem;font-family:"Funnel Display",sans-serif;font-size:.88rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;line-height:1;transition:color .3s}
.fvo-card:hover .fvo-logo{color:#dcdcdc}

/* --- entrance (script adds .is-in once the band scrolls into view) --- */
.fvo-rows{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.fvo-rows.is-in{opacity:1;transform:none}

@media screen and (max-width:991px){
.fvo-rows{padding-top:4em;padding-bottom:4.5em}
.fvo-card{width:min(21rem,82vw);min-height:15rem;padding:1.4rem}
.fvo-fade{width:min(18vw,90px)}
}
@media screen and (max-width:479px){
.fvo-card{width:min(19rem,84vw);min-height:14.5rem}
.fvo-quote{font-size:.95rem}
}

/* --- reduced motion: no drift; each row becomes a plain swipeable rail and the
   duplicate group is dropped so the quotes are not read out twice --- */
@media (prefers-reduced-motion:reduce){
.fvo-track{animation:none}
.fvo-row{overflow-x:auto;scrollbar-width:none}
.fvo-row::-webkit-scrollbar{display:none}
.fvo-group[aria-hidden="true"]{display:none}
.fvo-rows{opacity:1;transform:none;transition:none}
}