/* ValuFlor — Why ValuFlor page only. Components and tokens live in site.css; this file lays them out. */

/* ── photo hero: full-bleed footage frame, copy at the bottom, always night (plate and fade come from site.css) ── */
.pg-hero{min-height:max(640px,94svh);display:flex;align-items:flex-end;--vfg:#0E0C0A;color:var(--vfink)}
.pg-hero>.wrap{width:100%;padding-bottom:clamp(36px,5vw,64px)}
.pg-hero__row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:30px;align-items:end}
.pg-hero .h1{max-width:16ch;font-size:clamp(2.6rem,6vw,5.6rem)}
.pg-hero .lede{color:var(--vfbody)}
.pg-hero__side{padding-bottom:8px}
.pg-hero__meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.6vw,36px);margin-top:clamp(34px,5vw,56px);padding-top:22px;border-top:1px solid var(--vfline)}
.pg-hero__meta div{font:500 12px/1.5 var(--mono);color:var(--vfmut);letter-spacing:.04em}
.pg-hero__meta b{display:block;font:700 1.05rem/1.2 var(--head);color:var(--vfink);letter-spacing:-.01em;margin-bottom:4px}
@media (max-width:900px){
  .pg-hero__meta{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){.pg-hero__row{grid-template-columns:1fr}.pg-hero__side{display:none}}

/* ── tickers ──────────────────────────────────────────────────────────── */
/* motion.js pushes each ticker ±4% sideways with scroll; the band runs past both edges so no gap opens */
.ticker{margin-inline:-6vw}
.tk-clip{overflow:hidden}
.why-plat{overflow-x:clip}
/* outlined words: the shared rule strokes with currentColor, which is transparent there */
.ticker--outline .ticker__track>span:nth-child(4n+3){-webkit-text-stroke-color:var(--vfink)}

/* ── reasons: sticky stacked cards ───────────────────────────────────── */
.stack__card{position:relative;isolation:isolate}
/* motion.js fades a covered card; a faded card lets the one beneath show through its text, so cards stay opaque
   and recede by scale alone */
.stack--sticky>.stack__card{opacity:1!important}
.stack__top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding-bottom:18px;border-bottom:1px solid var(--vfline)}
.stack__top .eyebrow{color:var(--vfmut);padding-bottom:6px}
.stack__n{transition:color .5s var(--ease-out)}
.stack__card:hover .stack__n,.stack__card:focus-within .stack__n{color:var(--vfacc)}
.stack__h{font:800 clamp(1.8rem,3.4vw,3.1rem)/1.02 var(--head);letter-spacing:-.04em;max-width:16ch}
.stack__body p{font-size:clamp(1rem,1.15vw,1.08rem);color:var(--vfbody);max-width:52ch}
.stack__body .link-arrow{align-self:flex-start;margin-top:auto}
.stack__card:hover{border-color:color-mix(in srgb,var(--vfacc) 55%,var(--vfline))}
.why-truck{object-position:62% 100%}
@media (max-width:700px){.why-truck{object-position:0% 100%}}

/* ── facts bento ─────────────────────────────────────────────────────── */
.why-facts{background:var(--vfband)}
.why-facts .tile .fact__v{color:var(--vfink)}
.why-facts .why-gold{color:var(--vfacct)}
.why-facts .tile:not(.tile--acc){background:var(--vfpanel)}
/* the last photo shares a short row with the text tile; give it a photo's proportions so it never shows as a sliver */
.why-facts .bento .why-facts__last{height:auto;aspect-ratio:16/9}
@media (max-width:900px){.why-facts .bento .why-facts__last{grid-column:span 6}}

/* ── platforms: heading column sticks beside the table ───────────────── */
.why-plat__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.45fr);gap:clamp(28px,5vw,80px);align-items:start}
.why-plat__side{position:sticky;top:calc(var(--hdr-h) + 28px)}
.why-plat__side .h2{max-width:12ch}
.why-plat .plat{margin-top:0}
.why-plat .ticker{margin-top:clamp(8px,2vw,24px)}
@media (max-width:1000px){.why-plat__grid{grid-template-columns:1fr}.why-plat__side{position:static}.why-plat__side .h2{max-width:18ch}}

/* ── products on paper ───────────────────────────────────────────────── */
.why-install .link-arrow{display:inline-flex}

/* ── one client quote: heading left, quote right ─────────────────────── */
.why-quote__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.45fr);gap:clamp(28px,5vw,80px);align-items:start}
.why-quote .quote--lead p{max-width:30ch}
@media (max-width:900px){.why-quote__grid{grid-template-columns:1fr}}