/* A-1 Free quote: the shop at dusk, then the counter inside (markup: v6/scripts/quote.mjs). Loaded after /v6/pages.css on that page only.
   Every moving layer changes only opacity or transform, so the street repaints nothing while you scroll (laptop chips stay smooth); the line art is SVG, sharp at any size.
   --p / --k come from /v6/journey.js. html.still (reduced motion, Pause) and JS off: the night still, door open, every piece on the counter, the street not dimmed. */
/* the visitor's lamp blends normally here: "screen" over this many moving layers doubled the frame cost on a laptop chip */
.pg-free-quote .lamp{mix-blend-mode:normal}
.pg-free-quote.js .lamp{opacity:.7}
.fq-hero{--sc:#D7B48A}
.fq-hero .stage{min-height:100svh;display:flex;align-items:center;background:#0B1022}
.still .fq-hero,html:not(.js) .fq-hero,.still .fq-bring,html:not(.js) .fq-bring{padding:0}
/* the scene box: covers the stage, right- and bottom-aligned; on short wide screens it is capped so the whole sky fits, and the street carries on to the left */
.fq-scene{--W:min(max(100vw,177.78svh),calc((100svh - var(--bar)) * 2));position:absolute;right:0;bottom:0;width:var(--W);height:calc(var(--W) * .5625);pointer-events:none}
.fq-skies,.fq-sky,.fq-stars{position:absolute;inset:0;pointer-events:none}
.fq-sky.dawn{background:linear-gradient(180deg,#141B3A 0%,#3A3C66 30%,#9C6A7E 50%,#E3A07C 62%,#F0BE8E 70%)}
.fq-sky.day{background:linear-gradient(180deg,#6F8DB4 0%,#A9BCD2 32%,#E4DCC8 56%,#F2DDB6 68%)}
.fq-sky.dusk{background:linear-gradient(180deg,#1C2550 0%,#4B3A6C 26%,#B45E6E 46%,#EC9A5E 60%,#F6BE7A 68%)}
.fq-sky.night{background:linear-gradient(180deg,#04061A 0%,#0A1030 40%,#1A2147 62%,#2A2A50 70%)}
.fq-sky.day,.fq-sky.dusk,.fq-sky.night,.fq-stars{opacity:var(--k,1);will-change:opacity}
.fq-stars{background:
  radial-gradient(1.6px 1.6px at 62% 8%,#fff 60%,transparent),radial-gradient(1.2px 1.2px at 71% 18%,#fff 60%,transparent),radial-gradient(1.8px 1.8px at 83% 6%,#fff 60%,transparent),
  radial-gradient(1.2px 1.2px at 90% 22%,#fff 60%,transparent),radial-gradient(1.4px 1.4px at 54% 26%,#fff 60%,transparent),radial-gradient(1.2px 1.2px at 77% 30%,#F6DDB0 60%,transparent),
  radial-gradient(1.6px 1.6px at 96% 12%,#fff 60%,transparent),radial-gradient(1.2px 1.2px at 46% 10%,#fff 60%,transparent),radial-gradient(1.2px 1.2px at 66% 36%,#fff 60%,transparent),
  radial-gradient(1.4px 1.4px at 38% 20%,#fff 60%,transparent),radial-gradient(1.2px 1.2px at 87% 38%,#fff 60%,transparent),radial-gradient(1.6px 1.6px at 58% 4%,#F6DDB0 60%,transparent)}
/* the sun: crosses on an arc (x falls with k, y is a parabola), sets behind our cornice; its colour deepens as it goes down */
.fq-sun{position:absolute;left:0;top:0;width:calc(var(--W) * .34);aspect-ratio:1;margin:calc(var(--W) * -.17) 0 0 calc(var(--W) * -.17);border-radius:50%;
  background:radial-gradient(closest-side,#FFF9EA 0,#FFF4DA 10%,rgba(255,236,200,.55) 13%,rgba(255,226,180,.2) 34%,rgba(255,220,170,0) 100%);
  transform:translate(calc(var(--W) * (.95 - .45 * var(--k,1))),calc(var(--W) * .5625 * (.70 - 1.9 * var(--k,1) * (1 - var(--k,1)))));will-change:transform}
.fq-sun i{position:absolute;inset:0;border-radius:50%;background:radial-gradient(closest-side,#FFD88F 0,#FFB45E 10%,rgba(240,130,70,.5) 13%,rgba(230,110,70,.18) 36%,rgba(230,110,70,0) 100%);opacity:var(--k,1)}
.fq-l{position:absolute;overflow:visible}
.fq-tint,.fq-shop,.fq-up,.fq-nb,.fq-lamp,.fq-refl,.fq-in{opacity:var(--k,1);will-change:opacity}
.fq-tint{opacity:calc(var(--k,0) * .9)}
.fq-tint rect,.fq-tint path{fill:rgba(244,214,170,.15)}
.fq-tint .fall{opacity:calc(1 - var(--k,1))}
.fq-refl{opacity:calc(var(--k,1) * .22)}
/* the drawing */
.fq-hero .g{fill:none;stroke:var(--sc);stroke-opacity:.78;stroke-width:1.6;stroke-linejoin:round}
.fq-hero .gf{fill:none;stroke:var(--sc);stroke-opacity:.36;stroke-width:1.1}
.fq-hero .nb{fill:#0F1429}
.fq-hero .gr{fill:#0B0F21}
.fq-hero .a1{fill:#151C36}
.fq-hero .dn{fill:var(--sc);opacity:.5}
.fq-hero .since{font:500 10px/1 var(--text);letter-spacing:.32em;text-transform:uppercase;fill:var(--sc)}
.fq-hero .sign{fill:#0A0E20;stroke:var(--sc);stroke-opacity:.7;stroke-width:1.4}
.fq-hero .signt{font:400 27px/1 var(--display);text-transform:uppercase;fill:#E6C796}
.fq-hero .signt.lit{fill:#FFF1D2}
.fq-hero .signlit{fill:rgba(255,206,140,.16);stroke:#FFE3B0;stroke-width:1.6}
.fq-hero .awn{fill:#121933;stroke:var(--sc);stroke-width:1.5;stroke-opacity:.85}
.fq-hero .glass{fill:#0C1126}
.fq-hero .dk{fill:#090D1D}
.fq-hero .sheen{fill:none;stroke:#fff;stroke-opacity:.1;stroke-width:2}
.fq-hero .lan{fill:#121933;stroke:var(--sc);stroke-width:1.4}
.fq-hero .lanlit{fill:#FFE8BC}
.fq-hero .dash{fill:none;stroke:var(--sc);stroke-opacity:.28;stroke-width:1.4;stroke-dasharray:28 34}
.fq-hero .mtn{fill:rgba(10,14,32,.3);stroke:var(--sc);stroke-opacity:.34;stroke-width:1.1;stroke-linejoin:round}
.fq-hero .mtl{fill:none;stroke:var(--sc);stroke-opacity:.2;stroke-width:1}
.fq-hero .gd path{fill:none;stroke:#4A2C14;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.fq-hero .gk{fill:none;stroke:#7A4E2A;stroke-width:1.5}
.fq-hero .nl{fill:#E8B678;opacity:.7}
/* the door leaf swings in on its hinge (left edge), in perspective */
.fq-leaf{transform-origin:0 50%;transform:perspective(520px) rotateY(calc(var(--k,1) * 74deg));will-change:transform}
.fq-hero .lf{fill:#17203E;stroke:var(--sc);stroke-width:1.5}
.fq-hero .lfg{fill:#0C1128;stroke:var(--sc);stroke-opacity:.4}
.fq-hero .hdl{fill:none;stroke:#F6DDB0;stroke-width:4;stroke-linecap:round}
/* the end: the street falls dark, the open door and its light on the sidewalk stay (they sit above the dark); nothing washes over the screen */
.fq-dim{position:absolute;left:-100vw;right:-100vw;top:-100vh;bottom:-100vh;background:#0B1022;opacity:calc(var(--k,0) * .86);will-change:opacity;pointer-events:none}
.fq-spill{opacity:calc(var(--k,1) * .9);will-change:opacity}
html:not(.js) .fq-dim,.still .fq-dim{display:none}
.fq-hero .stage::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,10,24,.94) 0%,rgba(7,10,24,.9) 34%,rgba(7,10,24,.55) 50%,rgba(7,10,24,0) 64%);pointer-events:none}
.fq-txt{z-index:1;width:100%;padding-top:var(--bar)}
.js:not(.still) .fq-txt,.js:not(.still) .fq-hero .stage::after{opacity:clamp(0,calc((.97 - var(--p,0)) * 9),1)}
.fq-hero .crumbs ol{margin-bottom:clamp(16px,4vh,56px)}
.fq-hero .eyebrow{margin-bottom:clamp(14px,3vh,28px)}
.fq-hero h1{font-size:clamp(56px,min(9vw,15svh),160px);margin-bottom:clamp(12px,2.4vh,28px)}
.fq-hero .sub{margin-bottom:clamp(12px,2.6vh,32px);max-width:24em}
.fq-steps{list-style:none;margin:0 0 clamp(16px,3.4vh,36px);padding:0;max-width:28em;counter-reset:s}
.fq-steps li{counter-increment:s;position:relative;padding:12px 0 12px 58px;border-top:1px solid rgba(226,194,156,.2);font:400 clamp(16px,1.3vw,19px)/1.45 var(--text);color:#fff;transition:color .6s}
.fq-steps li::before{content:"0" counter(s);position:absolute;left:0;top:10px;width:38px;height:38px;border-radius:50%;border:1px solid rgba(226,194,156,.55);display:grid;place-items:center;font:500 12px/1 var(--text);color:var(--cu-lt);transition:background .6s,color .6s}
.fq-steps li.on::before{background:var(--cu-lt);color:var(--ink)}
.js:not(.still) .fq-steps li:not(.on){color:#A3A8BA}
/* short screens (a laptop at 150%): one step at a time */
@media(min-width:768px) and (max-height:700px){
  .js:not(.still) .fq-steps{position:relative;min-height:4.4em}
  .js:not(.still) .fq-steps li{position:absolute;left:0;right:0;top:0;opacity:0;transition:opacity .6s}
  .js:not(.still) .fq-steps li.cur{opacity:1}
  .fq-hero .crumbs{display:none}
}

/* ---------- inside: the counter ---------- */
.fq-enter{height:24svh;background:linear-gradient(180deg,#0B1022 0%,#11131D 100%)}
.fq-bring{background:#11131D;color:#fff;border-top:0!important;padding-top:0}
.fq-bring .stage{min-height:100svh;display:flex;align-items:center}
.fq-two{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(24px,3.4vw,64px);align-items:center;width:100%;padding-top:var(--bar)}
.fq-bring h2{font-size:clamp(40px,min(4.4vw,10svh),80px);margin-bottom:clamp(16px,3.6vh,40px)}
.fq-list{list-style:none;margin:0;padding:0;counter-reset:s}
.fq-list li{counter-increment:s;position:relative;padding:14px 0 14px 60px;border-top:1px solid rgba(226,194,156,.18);font:400 clamp(17px,1.35vw,21px)/1.45 var(--text);transition:color .6s}
.fq-list li::before{content:"0" counter(s);position:absolute;left:0;top:12px;width:40px;height:40px;border-radius:50%;border:1px solid rgba(226,194,156,.5);display:grid;place-items:center;font:500 12px/1 var(--text);color:var(--cu-lt);transition:background .6s,color .6s}
.fq-list li.opt::before{border-style:dashed}
.fq-list li.on::before{background:var(--cu-lt);color:var(--ink)}
.fq-list li.opt.on::before{background:none;color:var(--cu-lt);border-color:var(--cu-lt)}
.js:not(.still) .fq-list li:not(.on){color:#8F95AA}
.fq-hours{margin:clamp(16px,3vh,32px) 0 0;color:var(--on-ink-2);font-size:16px;transition:opacity .8s}
.js:not(.still) .fq-hours:not(.on){opacity:0}
.fq-art{margin:0}
/* the picture: 3:2, as large as the screen's height allows; every piece is placed in % of it */
.fq-cbox{position:relative;width:min(100%,calc((100svh - var(--bar) - 40px) * 1.5));aspect-ratio:1600/1067;margin:0 auto}
.fq-bg{position:absolute;inset:0;width:100%;height:100%;-webkit-mask-image:radial-gradient(closest-side,#000 66%,transparent);mask-image:radial-gradient(closest-side,#000 66%,transparent)}   /* a still picture: its edges melt into the page */
.fq-p{position:absolute;display:block;max-width:none}
/* the lamp's pool on the tray still swings a little, and settles (a damped pendulum, sampled) */
.fq-pool{position:absolute;left:4%;top:16%;width:62%;height:68%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,216,160,.13),rgba(255,216,160,.05) 55%,rgba(255,216,160,0));will-change:transform}
/* each piece arrives when its line is read: only opacity and transform move (each on its own layer) */
.js:not(.still) .fq-cbox [data-on]:not(.on){opacity:0}
.js:not(.still) .fq-cbox .fq-p{will-change:transform,opacity}
.js:not(.still) .fq-pool.on{animation:fq-pool 7s linear both}
/* set down: lowered by a hand, let go a few millimetres up; it falls (gravity), gives a little on the velvet and lies still. Its shadow gathers under it as it comes down */
.js:not(.still) .fq-ring.on:not(.fq-sh),.js:not(.still) .fq-brac.on:not(.fq-sh),.js:not(.still) .fq-coin.on:not(.fq-sh){animation:fq-set .8s both}
.js:not(.still) .fq-box.on:not(.fq-sh){animation:fq-set 1s both}
.js:not(.still) .fq-ring.fq-sh.on,.js:not(.still) .fq-brac.fq-sh.on,.js:not(.still) .fq-coin.fq-sh.on,.js:not(.still) .fq-box.fq-sh.on{animation:fq-gather .8s both}
/* laid out: a chain touches down from one end to the other, link after link, as it leaves the hand */
.js:not(.still) .fq-neck.on,.js:not(.still) .fq-broke.on{animation:fq-lay 1.3s cubic-bezier(.33,.1,.3,1) both}
.js:not(.still) .fq-broke.on{animation-duration:.9s}
/* slid in: pushed across and let go; friction stops it (constant friction = ease-out quad) */
.js:not(.still) .fq-wafer.on{animation:fq-slide .9s cubic-bezier(.5,1,.89,1) both}
.js:not(.still) .fq-card.on{animation:fq-card 1.1s cubic-bezier(.5,1,.89,1) both}
.fq-card{transform-origin:50% 50%}
@keyframes fq-set{0%{opacity:0;transform:translateY(-26px);animation-timing-function:linear}30%{opacity:1;transform:translateY(-18px);animation-timing-function:cubic-bezier(.55,0,1,.45)}62%{transform:translateY(0);animation-timing-function:cubic-bezier(0,.55,.45,1)}74%{transform:translateY(-1.6px);animation-timing-function:cubic-bezier(.55,0,1,.45)}86%,100%{opacity:1;transform:translateY(0)}}
@keyframes fq-gather{0%{opacity:0;transform:scale(1.08)}30%{opacity:.3;transform:scale(1.06)}62%,100%{opacity:1;transform:scale(1)}}
@keyframes fq-lay{0%{opacity:1;clip-path:inset(-4% 100% -4% 0)}100%{opacity:1;clip-path:inset(-4% 0 -4% 0)}}
@keyframes fq-slide{0%{opacity:0;transform:translateX(42%)}18%{opacity:1}100%{opacity:1;transform:translateX(0)}}
@keyframes fq-card{0%{opacity:0;transform:translate(34%,10%) rotate(5deg)}16%{opacity:1}100%{opacity:1;transform:translate(0,0) rotate(0)}}

/* ---------- phone: the street on top, the words below ---------- */
@media(max-width:767px){
  .fq-hero .stage{align-items:flex-end}
  .fq-skies{bottom:auto;height:calc(var(--bar) + 38svh)}   /* the sky stays above the street; the words sit on the plain ink below */
  .fq-scene{--W:calc(38svh * 1.7778);top:var(--bar);bottom:auto;right:auto;left:calc(50vw - var(--W) * .7)}
  .fq-hero .stage::after{background:linear-gradient(180deg,rgba(11,16,34,0) 0,rgba(11,16,34,0) calc(var(--bar) + 30svh),#0B1022 calc(var(--bar) + 38svh))}
  .fq-txt{padding-top:calc(var(--bar) + 34svh);padding-bottom:calc(var(--mbar) + 16px)}
  .js:not(.still) .fq-hero .crumbs,.js:not(.still) .fq-hero .eyebrow{display:none}
  .fq-hero .cta .btn{min-height:48px}
  .fq-hero.pin{--len:2.4!important}   /* a shorter day on the phone, so the online form comes sooner (Roast Room 2026-10-26) */
  .fq-hero h1{font-size:52px;margin-bottom:8px}
  .fq-hero .sub{font-size:17px;margin-bottom:12px}
  .js:not(.still) .fq-steps{min-height:0;margin-bottom:16px}
  .js:not(.still) .fq-steps li{position:relative;opacity:1;padding:6px 0 6px 52px;font-size:15px;border:0}
  .fq-steps li::before{top:4px;width:34px;height:34px}
  .fq-two{display:flex;flex-direction:column-reverse;gap:8px;padding-top:calc(var(--bar) + 8px);padding-bottom:var(--mbar)}
  .fq-bring .stage{align-items:center}
  .fq-art{width:100%}
  .fq-cbox{width:100%}
  .fq-bring h2{font-size:36px;margin-bottom:8px}
  .js:not(.still) .fq-list{position:relative;min-height:6.2em}
  .js:not(.still) .fq-list li{position:absolute;left:0;right:0;top:0;opacity:0;transition:opacity .6s;border:0}
  .js:not(.still) .fq-list li.cur{opacity:1;color:#fff}
  .fq-list li{font-size:17px}
  .fq-hours{font-size:14px;margin-top:0}
}
@keyframes fq-pool{0%{transform:translateX(-24.36%)}1.19%{transform:translateX(-22.94%)}2.38%{transform:translateX(-20.33%)}3.57%{transform:translateX(-16.76%)}4.76%{transform:translateX(-12.47%)}5.95%{transform:translateX(-7.74%)}7.14%{transform:translateX(-2.87%)}8.33%{transform:translateX(1.86%)}9.52%{transform:translateX(6.19%)}10.71%{transform:translateX(9.9%)}11.9%{transform:translateX(12.83%)}13.1%{transform:translateX(14.87%)}14.29%{transform:translateX(15.95%)}15.48%{transform:translateX(16.08%)}16.67%{transform:translateX(15.31%)}17.86%{transform:translateX(13.74%)}19.05%{transform:translateX(11.5%)}20.24%{transform:translateX(8.76%)}21.43%{transform:translateX(5.71%)}22.62%{transform:translateX(2.52%)}23.81%{transform:translateX(-0.61%)}25%{transform:translateX(-3.52%)}26.19%{transform:translateX(-6.04%)}27.38%{transform:translateX(-8.07%)}28.57%{transform:translateX(-9.53%)}29.76%{transform:translateX(-10.36%)}30.95%{transform:translateX(-10.57%)}32.14%{transform:translateX(-10.18%)}33.33%{transform:translateX(-9.25%)}34.52%{transform:translateX(-7.86%)}35.71%{transform:translateX(-6.12%)}36.9%{transform:translateX(-4.15%)}38.1%{transform:translateX(-2.07%)}39.29%{transform:translateX(0%)}40.48%{transform:translateX(1.94%)}41.67%{transform:translateX(3.65%)}42.86%{transform:translateX(5.05%)}44.05%{transform:translateX(6.08%)}45.24%{transform:translateX(6.72%)}46.43%{transform:translateX(6.93%)}47.62%{transform:translateX(6.75%)}48.81%{transform:translateX(6.21%)}50%{transform:translateX(5.35%)}51.19%{transform:translateX(4.25%)}52.38%{transform:translateX(2.98%)}53.57%{transform:translateX(1.63%)}54.76%{transform:translateX(0.27%)}55.95%{transform:translateX(-1.03%)}57.14%{transform:translateX(-2.18%)}58.33%{transform:translateX(-3.14%)}59.52%{transform:translateX(-3.87%)}60.71%{transform:translateX(-4.34%)}61.9%{transform:translateX(-4.54%)}63.1%{transform:translateX(-4.47%)}64.29%{transform:translateX(-4.16%)}65.48%{transform:translateX(-3.63%)}66.67%{transform:translateX(-2.94%)}67.86%{transform:translateX(-2.13%)}69.05%{transform:translateX(-1.25%)}70.24%{transform:translateX(-0.35%)}71.43%{transform:translateX(0.51%)}72.62%{transform:translateX(1.29%)}73.81%{transform:translateX(1.94%)}75%{transform:translateX(2.45%)}76.19%{transform:translateX(2.8%)}77.38%{transform:translateX(2.96%)}78.57%{transform:translateX(2.95%)}79.76%{transform:translateX(2.78%)}80.95%{transform:translateX(2.46%)}82.14%{transform:translateX(2.02%)}83.33%{transform:translateX(1.5%)}84.52%{transform:translateX(0.93%)}85.71%{transform:translateX(0.35%)}86.9%{transform:translateX(-0.22%)}88.1%{transform:translateX(-0.75%)}89.29%{transform:translateX(-1.2%)}90.48%{transform:translateX(-1.55%)}91.67%{transform:translateX(-1.8%)}92.86%{transform:translateX(-1.93%)}94.05%{transform:translateX(-1.94%)}95.24%{transform:translateX(-1.85%)}96.43%{transform:translateX(-1.66%)}97.62%{transform:translateX(-1.39%)}98.81%{transform:translateX(-1.06%)}100%{transform:translateX(-0.69%)}}