/* ValuFlor — Our work 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 .hero-photo__img{object-position:50% 70%}
.pg-hero__row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:30px;align-items:end}
.pg-hero .h1{max-width:15ch;font-size:clamp(2.6rem,5.6vw,5.2rem)}
.pg-hero .lede{max-width:62ch}
.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}
/* 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)}

/* ── gallery: numbered captions ──────────────────────────────────────── */
.hgal .split{align-items:flex-end}
.work-gal__sub{margin-top:0;max-width:42ch}
/* the caption pill is always dark: the number keeps the pill's light text for contrast, the orange rule carries the accent */
.hgal__item figcaption b{font-weight:700;color:inherit;padding-right:9px;margin-right:1px;border-right:2px solid var(--vfacc)}
.hgal__track:focus-visible{outline-offset:-3px}

/* ── product range: photos and sample boards on one grid ─────────────── */
.work-range{background:var(--vfband)}
.range{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(12px,1.4vw,18px)}
.range>*{min-width:0}
.range__photo{grid-column:1 / span 6;grid-row:1;min-height:320px}
.range>.prods:not(.prods--after){grid-column:7 / span 6;grid-row:1;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:0}
.range>.prods--after{grid-column:1 / -1;grid-row:2;margin-top:0}
.range__note{grid-column:1 / span 5;grid-row:3;min-height:clamp(280px,28vw,400px);gap:22px}
.range__photo2{grid-column:6 / span 7;grid-row:3}
.range .ph{height:100%}
.range__quote{font:800 clamp(1.6rem,2.8vw,2.6rem)/1.04 var(--head);letter-spacing:-.035em;color:#1C1108;max-width:16ch}
.range__link{align-self:flex-start;color:#1C1108}
.range__link:hover{color:#1C1108}
.range__link:focus-visible{outline-color:#1C1108}
@media (max-width:900px){
  .range__photo{grid-column:1 / -1;min-height:0;aspect-ratio:16/9}
  .range>.prods:not(.prods--after){grid-column:1 / -1;grid-row:2}
  .range>.prods--after{grid-row:3}
  .range__note{grid-column:1 / -1;grid-row:4;min-height:0}
  .range__photo2{grid-column:1 / -1;grid-row:5;aspect-ratio:16/9}
}

/* ── market cards: the whole card is the link's hit area ─────────────── */
.mk{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,18px)}
.mk__card{min-height:clamp(340px,30vw,420px)}
.mk__top{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;padding-bottom:16px;border-bottom:1px solid var(--vfline)}
.mk__top .eyebrow{color:var(--vfmut);padding-bottom:6px}
.mk__n{font:800 clamp(2.6rem,4.4vw,4rem)/.8 var(--head);letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1.5px var(--vfacc);transition:color .5s var(--ease-out)}
.mk__card:hover .mk__n,.mk__card:focus-within .mk__n{color:var(--vfacc)}
.mk__card p{font-size:15.5px}
.mk__go{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:auto;padding-top:18px;border-top:1px solid var(--vfline);
  font:600 11.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--vfink)}
.mk__go:hover{color:var(--vfacct)}
.mk__go::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
/* keyboard focus rings the whole card where :has() exists, and the link itself everywhere else */
@supports selector(:has(*)){
  .mk__go:focus-visible{outline:0}
  .mk__card:has(.mk__go:focus-visible){outline:2px solid var(--vfgoldt);outline-offset:3px}
}
.mk__card:hover .go,.mk__card:focus-within .go{background:var(--vfacc);border-color:var(--vfacc);color:var(--vfonacc)}
.mk__card:hover .go svg,.mk__card:focus-within .go svg{transform:rotate(-45deg)}
.mk__card:active{transform:translateY(-4px) scale(.99)}
@media (max-width:900px){.mk{grid-template-columns:1fr}.mk__card{min-height:0}}

/* ── logos: the two marquees stacked full width, as on the home page ── */
.work-logos{background:var(--vfband)}

/* ── one client quote: heading left, quote right ─────────────────────── */
.work-quote__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.45fr);gap:clamp(28px,5vw,80px);align-items:start}
.work-quote .quote--lead p{font-size:clamp(1.2rem,1.9vw,1.6rem);line-height:1.32;max-width:44ch}
@media (max-width:900px){.work-quote__grid{grid-template-columns:1fr}}