/* ValuFlor — floor planner page only. A night hero over a floor-level photo with the planner as the tool
   in it, then the four steps on paper beside sticky photos. The closing call to action is the shared {{> cta}}. */

/* ── night hero ───────────────────────────────────────────────────────── */
.fp{position:relative;background:#0B0907;overflow:hidden;isolation:isolate}
.fp__bg{position:absolute;left:0;right:0;top:0;height:clamp(560px,86vh,880px);overflow:hidden;z-index:-1}
.fp__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.fp__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(11,9,7,.84) 0%,rgba(11,9,7,.55) 50%,rgba(11,9,7,.3) 100%),
             linear-gradient(180deg,rgba(11,9,7,.4) 0%,rgba(11,9,7,.58) 45%,rgba(11,9,7,.94) 82%,#0B0907 100%)}
.fp__in{padding-top:calc(var(--hdr-h) + clamp(34px,6vw,84px));padding-bottom:clamp(64px,8vw,120px)}
.fp__h1{max-width:16ch}
.fp__intro{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,4vw,64px);align-items:end;margin-top:clamp(22px,3vw,36px)}
.fp__intro .lede{margin-top:0;color:#E2D9CD;max-width:60ch}
.fp__chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
.fp__chip{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:14px;min-width:132px;min-height:118px;padding:16px 16px 14px;overflow:hidden;isolation:isolate;
  border-radius:var(--r-m);border:1px solid rgba(255,255,255,.14);background:rgba(20,17,14,.6);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  transition:transform .45s var(--ease-out),border-color .25s ease,box-shadow .45s ease}
.fp__chip:hover{transform:translateY(-4px);border-color:var(--vfacc);box-shadow:var(--vflift)}
.fp__chip-n{font:800 clamp(2.2rem,3.6vw,3rem)/.9 var(--head);letter-spacing:-.05em;color:#F7F2EA}
.fp__chip-l{font:600 10px/1.35 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#BDB2A3}
.fp__chip--acc{background:var(--vfacc);border-color:var(--vfacc)}
.fp__chip--acc .fp__chip-n,.fp__chip--acc .fp__chip-l{color:#1C1108}
@media (max-width:900px){.fp__intro{grid-template-columns:1fr}}
@media (max-width:700px){.fp__chip-l{font-size:12px;letter-spacing:.1em}}
@media (max-width:480px){.fp__chip{min-width:0;min-height:104px;padding:13px 12px 12px}.fp__chip-l{letter-spacing:.06em}}

/* the planner: big, dark, with an orange glow at its edge */
.fp__tool{margin-top:clamp(36px,4.4vw,60px);border-radius:var(--r-l);
  box-shadow:0 0 0 1px rgba(225,137,66,.28),0 50px 120px -50px rgba(225,137,66,.4),0 30px 80px -30px rgba(0,0,0,.8)}
.fp .embed--planner{aspect-ratio:auto;height:clamp(620px,86svh,880px);min-height:0;border-color:#3A322A}
.fp .embed__idle{gap:22px}
.fp .embed__idle>.tex{position:absolute}
.fp .embed__idle svg.plan{opacity:.6}
/* below 900px the planner opens only on a tap (site.js): a compact placeholder until then, full height once loaded */
@media (max-width:899px){
  .fp .embed--planner{height:auto;aspect-ratio:16/10;min-height:340px}
  .fp .embed--planner.is-loaded{aspect-ratio:auto;height:min(86svh,760px)}
}
@media (max-width:700px){.fp .embed--planner{aspect-ratio:4/3}}
.fp #plan-note{margin-top:16px}
.fp__foot{display:flex;flex-wrap:wrap;gap:6px 26px;margin-top:18px}
.fp__foot span{display:inline-flex;align-items:center;gap:26px}
.fp__foot span+span::before{content:"";width:6px;height:6px;margin-left:-16px;margin-right:-10px;background:var(--vfacc);transform:rotate(45deg)}

/* ── how it works (paper) ─────────────────────────────────────────────── */
.fp-how{border-bottom:0}
.fp-how__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,6vw,96px);align-items:start}
.fp-how .steps{margin-top:36px}
.fp-how__media{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.4vw,18px)}
html:not(.rm) .fp-how__media{position:sticky;top:calc(var(--hdr-h) + 28px)}
.fp-how__ph{margin:0;grid-column:1/-1;aspect-ratio:4/3}
.fp-how__ph--b{grid-column:auto;aspect-ratio:1}
.fp-how__ph--b img{object-position:12% 60%}   /* the plank close-up: the end of the board run, away from the window glare */
.fp-how__stat{aspect-ratio:1}
.fp-how__stat-t{font:800 clamp(1.3rem,2vw,1.8rem)/1.08 var(--head);letter-spacing:-.03em;color:#1C1108}
@media (max-width:900px){
  .fp-how__grid{grid-template-columns:1fr}
  html:not(.rm) .fp-how__media{position:static}
}
@media (max-width:480px){.fp-how__ph--b,.fp-how__stat{aspect-ratio:auto;min-height:170px}}