/* ValuFlor — market pages, v2 (/markets/ and the three market pages).
   Builds on the shared components in site.css (.hero-photo, .ticker, .steps, .bento, .tile, .stack, .cta-big, .quote,
   .form-card) and only adds what these pages need. Colour only through the --vf* tokens, plus the fixed night values
   #0E0C0A/#0B0907 for forced-dark surfaces and #1C1108 for text on orange. */

/* ── photo hero: always night, whatever the page theme ────────────────── */
.mk-hero{display:flex;flex-direction:column;justify-content:flex-end;min-height:max(660px,94svh);background:#0E0C0A;color:var(--vfink);border-bottom:0}
.mk-hero>.wrap{width:100%;padding-bottom:clamp(40px,6vw,84px)}
/* the photo sits in its own box: full-bleed behind the copy on wide screens, a band of its own on phones */
.mk-hero__media{position:absolute;inset:0;overflow:hidden}
/* the shared plate and fade follow the page theme; on footage they must stay dark in both themes. The left two
   thirds carry the copy and stay at .78+ so white text clears AA over the brightest sky; the right side keeps
   the photo visible behind the glass panel, which brings its own dark backing. */
.mk-hero .hero-photo__plate{background:
  linear-gradient(180deg,rgba(14,12,10,.74) 0%,rgba(14,12,10,0) 26%),
  linear-gradient(90deg,rgba(14,12,10,.92) 0%,rgba(14,12,10,.8) 38%,rgba(14,12,10,.4) 66%,rgba(14,12,10,.46) 100%)}
.mk-hero .hero-photo__fade{background:linear-gradient(to top,rgba(14,12,10,.95) 0%,rgba(14,12,10,.5) 30%,rgba(14,12,10,0) 56%)}
.mk-hero__grid{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(300px,.78fr);gap:clamp(28px,5vw,84px);align-items:end}
.mk-hero .h1{font-size:clamp(2.9rem,7.2vw,6.8rem);max-width:12.5ch}
.mk-hero .lede{max-width:54ch}
.mk-hero .cta-row{margin-top:34px}
/* phones and tablets: the photo gets its own band at the top at full strength, the copy follows on night
   (the Locations pattern, photo first so the first screen shows it) */
@media (max-width:900px){
  .mk-hero{min-height:0;justify-content:flex-start}
  .mk-hero__media{position:relative;inset:auto;flex:none;width:100%;aspect-ratio:16/10}
  .mk-hero__media::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(14,12,10,.55) 0%,rgba(14,12,10,0) 30%,rgba(14,12,10,0) 62%,#0E0C0A 100%)}
  .mk-hero .hero-photo__plate,.mk-hero .hero-photo__fade{display:none}
  .mk-hero>.page-hero{padding-top:0;margin-top:-18px}
  .mk-hero__grid{grid-template-columns:1fr}
}
@media (max-width:560px){.mk-hero__media{aspect-ratio:5/4}}

/* glass panel over the photo: facts from the page, one row per line */
.mk-glass{position:relative;border-radius:var(--r-l);border:1px solid rgba(255,255,255,.16);background:rgba(14,12,10,.66);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);padding:clamp(20px,2.3vw,30px);overflow:hidden;isolation:isolate;
  box-shadow:0 30px 70px rgba(0,0,0,.35)}
.mk-glass::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--vf-rust),var(--vf-orange),var(--vf-gold))}
.mk-glass__k{display:flex;justify-content:space-between;gap:12px;font:600 10.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--vfacct);
  padding-bottom:16px;border-bottom:1px solid var(--vfline)}
.mk-glass__k span+span{color:var(--vfmut)}
.mk-spec{margin:6px 0 0;display:grid}
.mk-spec>div{position:relative;display:grid;grid-template-columns:minmax(88px,.4fr) 1fr;gap:16px;padding:14px 12px;margin-inline:-12px;border-radius:10px;
  transition:background-color .35s ease,transform .45s var(--ease-out)}
.mk-spec>div+div{border-top:1px solid var(--vfline)}
@media (hover:hover) and (pointer:fine){.mk-spec>div:hover{background:color-mix(in srgb,var(--vfacc) 14%,transparent);transform:translateX(4px)}}
.mk-spec dt{font:600 10px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--vfmut)}
.mk-spec dd{margin:0;font:600 15px/1.42 var(--sans);color:var(--vfink)}

/* markets index: the hero panel is a jump list to the five cards */
.mk-index ol{list-style:none;margin:6px 0 0;padding:0}
.mk-index li+li{border-top:1px solid var(--vfline)}
.mk-index a{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:12px;padding:14px 12px;margin-inline:-12px;border-radius:10px;min-height:48px;
  font:700 clamp(1.02rem,1.4vw,1.2rem)/1.2 var(--head);letter-spacing:-.015em;color:var(--vfink);transition:background-color .35s ease,color .25s ease}
.mk-index a span:first-child{font:600 11px/1 var(--mono);letter-spacing:.1em;color:var(--vfacct)}
.mk-index .arr{font:600 14px/1 var(--mono);color:var(--vfmut);transition:transform .45s var(--ease-out),color .25s ease}
.mk-index a:hover,.mk-index a:focus-visible{background:color-mix(in srgb,var(--vfacc) 16%,transparent);color:var(--vfink)}
.mk-index a:hover .arr,.mk-index a:focus-visible .arr{transform:translateX(5px);color:var(--vfacct)}

/* ── orange ticker under the hero ─────────────────────────────────────── */
/* the band is drawn wider than the screen and clipped by its wrapper, so a sideways push from motion.js
   can never show its ends or add horizontal scroll on a phone */
.mk-tickwrap{overflow:hidden}
.mk-ticker{border-color:rgba(28,17,8,.18);margin-inline:-6vw}
.mk-ticker .ticker__track>i{background:#1C1108}

/* ── process: the steps beside a photo that holds its place ───────────── */
.mk-proc{display:grid;grid-template-columns:minmax(0,1.28fr) minmax(0,1fr);gap:clamp(28px,5vw,84px);align-items:start;margin-top:clamp(36px,4.4vw,60px)}
.mk-proc .steps{margin-top:0}
.mk-proc__media{position:sticky;top:calc(var(--hdr-h) + 28px)}
.mk-proc__media .ph{margin:0;aspect-ratio:4/5}
.mk-proc__media figcaption{top:14px;bottom:auto}
.mk-proc__media .spin{position:absolute;right:clamp(-28px,-2vw,-14px);top:clamp(-34px,-2.4vw,-20px);z-index:3;width:clamp(108px,10vw,140px)}
/* caption plate: label, headline, then the note on its own line under a hairline, all left-aligned */
.mk-badge{position:absolute;left:14px;right:14px;bottom:14px;z-index:3;display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  padding:clamp(16px,1.8vw,22px);border-radius:var(--r-m);background:rgba(14,12,10,.8);border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:var(--vfink)}
.mk-badge .stat__n{font-size:clamp(2.8rem,4.6vw,4.4rem)}
.mk-badge .stat__l{margin-top:0;align-self:stretch;max-width:none;text-align:left;padding-top:11px;border-top:1px solid rgba(255,255,255,.16);color:var(--vfbody)}
.mk-badge__t{font:800 clamp(1.15rem,1.7vw,1.5rem)/1.12 var(--head);letter-spacing:-.025em;max-width:22ch}
.mk-badge__k{font:600 10.5px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--vfacct);margin-bottom:8px}
@media (max-width:900px){
  .mk-proc{grid-template-columns:1fr}
  .mk-proc__media{position:relative;top:auto;order:-1}
  .mk-proc__media .ph{aspect-ratio:16/10}
}
@media (max-width:760px){.mk-proc__media .spin{display:none}}

/* ── bento: photos and facts; rows grow to fit their text instead of clipping it ── */
.mk-bento{margin-top:clamp(36px,4.4vw,60px)}
@media (min-width:561px){.bento.mk-bento{grid-auto-rows:minmax(clamp(132px,13vw,196px),auto)}}
.mk-bento .ph{margin:0}
/* hover zoom: as specific as the reveal rule in site.css that would otherwise hold the photo still */
@media (hover:hover) and (pointer:fine){.mk-bento .ph:hover img,.mk-proc__media .ph:hover img,.mk-say .ph:hover img{transform:scale(1.07)}}
.mk-bento .ph img{position:absolute;inset:0}
.mk-tile{gap:22px;transition:border-color .35s ease}
.mk-tile:hover,.mk-tile:focus-within{border-color:color-mix(in srgb,var(--vfacc) 70%,var(--vfline))}
.mk-tile__top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.mk-tile__n{font:800 clamp(2.6rem,4.4vw,4.2rem)/.8 var(--head);letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1.5px var(--vfacc);
  transition:color .5s var(--ease-out),transform .6s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .mk-tile:hover .mk-tile__n{color:var(--vfacc);transform:translateY(-4px)}
  .tile--acc:hover .mk-tile__n{color:#1C1108}
}
.tile--acc .mk-tile__n{-webkit-text-stroke-color:#1C1108}
.mk-tile h3{font:800 clamp(1.35rem,2.1vw,1.85rem)/1.06 var(--head);letter-spacing:-.03em}
.mk-tile p{margin-top:12px;font-size:15px;line-height:1.55;color:var(--vfbody);max-width:44ch}
.mk-tile .fact__v{margin-top:10px}
.mk-tile .stat__n{font-size:clamp(3.2rem,6vw,5.6rem)}
.mk-tile__big{font:800 clamp(3rem,5.6vw,5.4rem)/.88 var(--head);letter-spacing:-.055em;color:#1C1108}
.tile--acc.mk-tile h3,.tile--acc.mk-tile .fact__v{color:#1C1108}
.tile--acc.mk-tile p{color:#1C1108}
.tile--acc .fact__k{color:#1C1108}
.mk-list{list-style:none;margin:12px 0 0;padding:0;display:grid}
.mk-list li{display:flex;align-items:baseline;gap:12px;padding:9px 0;border-top:1px solid var(--vfline);font:700 clamp(1.02rem,1.5vw,1.22rem)/1.25 var(--head);letter-spacing:-.015em;color:var(--vfink)}
.mk-list li::before{content:"";width:8px;height:8px;flex:none;background:var(--vfacc);transform:rotate(45deg) translateY(-2px)}
.tile--acc .mk-list li{color:#1C1108;border-color:rgba(28,17,8,.22)}
.tile--acc .mk-list li::before{background:#1C1108}
.mk-logo{display:block;height:46px;width:auto;border-radius:8px;background:var(--vflogoband);padding:7px 11px}
/* paper theme: the flipped bento band is night; use the night band tone so it reads apart from the hero footage */
[data-theme="light"] .mk-sec.theme-flip{background:var(--vfband)}

/* ── one client quote beside a photo; the section follows the page theme, so it is always the opposite of the
   flipped bento band above it. The spiral sits whole in the empty top-right of the head, behind the cards. ── */
.mk-reviews{position:relative;overflow:hidden;isolation:isolate}
.mk-reviews .spiral{z-index:-1;right:clamp(16px,4vw,64px);top:clamp(40px,5vw,80px);width:min(500px,36vw);opacity:.3}
@media (max-width:760px){.mk-reviews .spiral{right:-18%;top:18px;width:78vw;opacity:.2}}
.mk-say{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(14px,1.8vw,22px);margin-top:clamp(36px,4.4vw,56px);align-items:stretch}
.mk-say .ph{margin:0;min-height:clamp(320px,30vw,440px)}
.mk-say .ph img{position:absolute;inset:0}
.mk-say__q{display:flex}
.mk-say__q .quote{flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:28px}
.mk-say__q .quote footer{margin-top:0}
/* a long quote stays at reading size: the measure is capped at 34ch, the type steps down from the lead size */
.mk-quote--long p{font-size:clamp(1.12rem,1.55vw,1.45rem);line-height:1.38;letter-spacing:-.015em;max-width:34ch}
@media (max-width:900px){.mk-say{grid-template-columns:1fr}.mk-say .ph{min-height:0;aspect-ratio:16/10}}

/* ── inquiry: photo panel beside the form card, on the orange slab ────── */
.mk-inq{border-bottom:0}
.mk-inq__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:clamp(14px,1.6vw,20px);align-items:stretch}
.mk-inq__panel{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:30px;min-height:500px;
  padding:clamp(26px,3.2vw,46px);border-radius:var(--r-l);overflow:hidden;isolation:isolate;background:#0E0C0A}
.mk-inq__panel>img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.mk-inq__panel::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(14,12,10,.5) 0%,rgba(14,12,10,.08) 22%,rgba(14,12,10,.35) 42%,rgba(14,12,10,.9) 70%,rgba(14,12,10,.96) 100%)}
.mk-inq__panel>img{transition:transform 1.4s var(--ease-out)}
/* the truck photo: keep the truck and the person in the open top half of the panel */
.mk-inq__panel>img.mk-inq__truck{object-position:72% 78%}
@media (hover:hover) and (pointer:fine){.mk-inq .mk-inq__panel:hover>img{transform:scale(1.06)}}
.mk-inq__cap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 12px}
/* both caption pills carry their own dark backing so they read over the brightest part of the photo */
.mk-inq__cap .eyebrow,.mk-inq__cap .mono-note{padding:8px 13px;border-radius:999px;background:rgba(14,12,10,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.mk-inq__cap .mono-note{font-size:11.5px;line-height:1.3;color:var(--vfink)}
.mk-form__head{margin-bottom:clamp(24px,2.6vw,34px)}
.mk-form__head .h2{max-width:18ch;margin-top:14px}
.mk-terr{margin:0;display:grid;border-top:1px solid var(--vfline)}
.mk-terr>div{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:14px 0;border-bottom:1px solid var(--vfline);
  transition:background-color .35s ease}
.mk-terr dt{transition:transform .45s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.mk-terr>div:hover dt{transform:translateX(10px)}.mk-terr>div:hover{background:linear-gradient(90deg,color-mix(in srgb,var(--vfacc) 16%,transparent),transparent 70%)}}
.mk-terr dt{font:700 clamp(1rem,1.3vw,1.12rem)/1.3 var(--head);letter-spacing:-.01em;color:var(--vfink)}
.mk-terr dd{margin:0;text-align:right;font:600 10.5px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--vfacct)}
.mk-inq .form-card{position:relative;margin-top:0;display:flex;flex-direction:column;justify-content:center;overflow:hidden;isolation:isolate;
  padding:clamp(24px,3.4vw,48px);box-shadow:var(--vflift)}
.mk-inq .fields{grid-template-columns:repeat(2,minmax(0,1fr))}
.mk-inq .fields>.field:last-child:nth-child(odd){grid-column:1/-1}
.mk-inq .field input{min-height:52px}
.mk-form__alt{margin-top:22px;padding-top:18px;border-top:1px solid var(--vfline);font:600 11.5px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--vfmut)}
.mk-form__alt a{display:inline-block;padding-block:12px;margin-block:-12px;color:var(--vfink)}
@media (pointer:coarse),(max-width:700px){.mk-hero .link-arrow,.mk-form__alt a{min-height:44px;display:inline-flex;align-items:center}}
@media (max-width:900px){
  .mk-inq__grid{grid-template-columns:1fr}
  /* phones and tablets: the photo is a band at the top of the panel and the list sits below it on solid night,
     so no line of the list runs over the photo */
  .mk-inq__panel{--ph:clamp(200px,52vw,320px);min-height:0;gap:0}
  .mk-inq__panel>img{height:var(--ph);bottom:auto}
  .mk-inq__panel::before{background:linear-gradient(180deg,rgba(14,12,10,.35) 0px,rgba(14,12,10,0) 90px,rgba(14,12,10,.2) calc(var(--ph) * .62),#0E0C0A var(--ph))}
  .mk-terr{margin-top:calc(var(--ph) - 96px)}
}
@media (max-width:560px){.mk-inq .fields{grid-template-columns:1fr}}
.lead__actions .btn{padding-inline:26px}

/* ── markets index: sticky stacked cards ──────────────────────────────── */
.mk-stack{margin-top:clamp(36px,4.4vw,60px)}
/* site.css makes the cards sticky only on wide screens without html.rm (its rule is more specific and wins there);
   everywhere else they still need a positioned box for the glow */
.mk-stack .stack__card{position:relative;isolation:isolate;min-height:clamp(400px,36vw,500px)}
.mk-stack .stack__card.theme-orange{background:var(--vfg)}
.mk-stack .stack__card.theme-flip{background:var(--vfpanel)}
.mk-stack .stack__body{justify-content:flex-start}
.mk-stack__top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.mk-stack__top .eyebrow{margin-top:6px}
.mk-stack .stack__body h3{font:800 clamp(2rem,3.9vw,3.7rem)/.98 var(--head);letter-spacing:-.045em;max-width:13ch}
.mk-stack .stack__body p{font-size:clamp(1rem,1.2vw,1.12rem);color:var(--vfbody);max-width:46ch}
.mk-truck{object-position:82% 70%}
.mk-tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.mk-tags li{font:600 10.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;padding:9px 12px;border:1px solid var(--vfline2);border-radius:999px;color:var(--vfink);
  transition:border-color .3s ease,background-color .3s ease}
.stack__card:hover .mk-tags li{border-color:var(--vfacc)}
.theme-orange .stack__n{-webkit-text-stroke-color:#1C1108}
.mk-stack .stack__media .ph img{transition:transform 1.2s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.mk-stack .stack__card:hover .stack__media .ph img{transform:scale(1.07)}}
.mk-stack .stack__card:focus-within .stack__media .ph img{transform:scale(1.07)}
@media (min-width:761px){.mk-stack .stack__card:nth-child(even) .stack__media{order:-1}}
@media (max-width:760px){.mk-stack .stack__card{min-height:0}}

/* touch: the small "Send another" button comes out under 44px tall in site.css */
@media (pointer:coarse){.lead__done .btn--xs{padding-block:14px}}