/* Floor Plan demo. The company drawn as a floor plan on the page: hairline walls, a dot per person,
   one workflow walking from room to room with the wait at every handoff. */
.fp-h {min-height:2.06em;max-width:26ch;font:400 clamp(2rem,3.8vw,4rem)/1.05 'Fraunces','Fraunces Fallback',Georgia,serif;letter-spacing:-.025em;color:var(--ink)}
.fp-ox {color:var(--oxide)}
.fp button:focus-visible {outline:1px solid var(--oxide);outline-offset:3px}

.fp-stage {display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(2.5rem,6vw,6rem);margin-top:clamp(2rem,3.5vw,3rem);padding-top:clamp(1.8rem,3vw,2.4rem);border-top:1px solid var(--rule);align-items:start}
.fp-plan {margin:0;min-width:0}
.fp-plan svg {display:block;width:100%;height:auto;overflow:visible}

/* The building draws itself */
.fp-shell,.fp-wall {fill:none;stroke:var(--ink);stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--ease)}
.fp-shell {stroke-width:1.6}
.fp-wall {stroke-width:1.2;transition-delay:.3s}
.fp.is-drawn .fp-shell,.fp.is-drawn .fp-wall {stroke-dashoffset:0}
.fp-label text {font:400 14px 'Fraunces','Fraunces Fallback',Georgia,serif;fill:var(--ink);opacity:0;transition:opacity .6s .9s}
.fp-count {font:400 11px 'Hanken Grotesk','Hanken Fallback',Arial,sans-serif;fill:var(--ink-2)}
.fp.is-drawn .fp-label text {opacity:1}
.fp-dots circle {fill:var(--ink-2);opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(0);transition:opacity .3s,transform .4s cubic-bezier(.3,1.6,.5,1);transition-delay:calc(var(--i) * 22ms)}
.fp.is-people .fp-dots circle {opacity:.75;transform:none}
.fp-hot rect {fill:var(--oxide);opacity:0;transition:opacity .8s var(--ease)}
.fp-hot rect.is-on {opacity:.1}

/* The workflow */
.fp-seg path {fill:none;stroke:var(--ink);stroke-width:1.4;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .5s var(--ease)}
.fp-seg text {font:500 12px 'Hanken Grotesk','Hanken Fallback',Arial,sans-serif;fill:var(--ink-2);opacity:0;transition:opacity .3s .35s;paint-order:stroke;stroke:var(--bg,#121719);stroke-width:5px;stroke-linejoin:round}
.fp-seg.is-worst path {stroke:var(--oxide);stroke-width:2}
.fp-seg.is-worst text {fill:var(--oxide)}
.fp-seg.is-on path {stroke-dashoffset:0}
.fp-seg.is-on text {opacity:1}
.fp-mark {opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.4);transition:opacity .3s,transform .45s cubic-bezier(.3,1.6,.5,1)}
.fp-mark.is-on {opacity:1;transform:none}
.fp-mark circle {fill:var(--oxide)}
.fp-mark text {font:500 11px 'Hanken Grotesk','Hanken Fallback',Arial,sans-serif;fill:#fff}

/* Side: where the hours go, then the steps */
.fp-side {min-width:0}
.fp-sub {font-size:.875rem;color:var(--ink-2)}
.fp-wf {display:grid;margin-top:.7rem;border-top:1px solid var(--rule)}
.fp-wf button {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.35rem 1rem;align-items:baseline;width:100%;padding:.7rem 0;font:inherit;text-align:left;color:var(--ink-2);background:none;border:0;border-bottom:1px solid var(--rule);cursor:pointer;transition:color .3s}
.fp-wf button span {font:400 1.15rem/1.25 'Fraunces','Fraunces Fallback',Georgia,serif}
.fp-wf button em {font-style:normal;font-size:.8125rem;font-variant-numeric:tabular-nums}
.fp-wf button b {grid-column:1/-1;height:3px;background:var(--rule)}
.fp-wf button b i {display:block;height:100%;width:var(--v);background:currentColor;transition:background .3s}
.fp-wf button:hover {color:var(--ink)}
.fp-wf button[aria-selected="true"] {color:var(--ink)}
.fp-wf button[aria-selected="true"] b i {background:var(--oxide)}

.fp-steps {list-style:none;margin:1.6rem 0 0;padding:0;counter-reset:none}
.fp-steps li {display:grid;grid-template-columns:1.4rem minmax(0,1fr) auto;gap:.6rem;align-items:baseline;padding:.55rem 0;border-bottom:1px solid var(--rule);opacity:0;transform:translateY(6px);transition:opacity .4s var(--ease),transform .45s var(--ease)}
.fp-steps li.is-on {opacity:1;transform:none}
.fp-n {font-size:.8125rem;color:var(--oxide);font-variant-numeric:tabular-nums}
.fp-st {font-size:.9375rem;line-height:1.35;color:var(--ink)}
.fp-st em {display:block;font-style:normal;font-size:.8125rem;color:var(--ink-2)}
.fp-d {text-align:right;font-size:.875rem;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.fp-d small {display:block;font-size:.75rem;color:var(--ink-2)}
.fp-steps li.is-worst .fp-d small {color:var(--oxide)}

[data-instant] .fp *,.fp[data-instant] * {transition:none!important}

@media(max-width:1000px){
 .fp-stage {grid-template-columns:1fr}
}
@media(max-width:640px){
 .fp-h {font-size:1.7rem}
 .fp-label text {font-size:24px}
 .fp-count {font-size:18px}
 .fp-seg text {font-size:20px}
 .fp-mark text {font-size:15px}
 .fp-mark circle {r:13px}
}