/* A-1 inner pages: the Home gold-thread world (concept 3), one scroll story per page.
   Type: Fraunces (light, large, copper italics) for headlines and statements only; Geist for every reading line and label. Same tokens as site/v6/styles.css.
   Motion is driven by --p / --k from /v6/journey.js. Without JS, with reduced motion or after Pause (html.still) every scene shows its finished still. */
@font-face{font-family:Fraunces;font-weight:300 700;font-style:normal;font-display:swap;src:url(/fonts/fraunces-latin-opsz-normal.woff2) format("woff2")}
@font-face{font-family:Fraunces;font-weight:300 700;font-style:italic;font-display:swap;src:url(/fonts/fraunces-latin-opsz-italic.woff2) format("woff2")}
@font-face{font-family:Geist;font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/geist-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Geist;font-weight:500;font-style:normal;font-display:swap;src:url(/fonts/geist-latin-500-normal.woff2) format("woff2")}
:root{--ink:#0E1325;--ink-2:#151B31;--ink-3:#2A324F;--bone:#F2ECE2;--bone-2:#E8DFD1;
  --on-ink:#FFFFFF;--on-ink-2:#D5D9E6;--on-bone:#151A2C;--on-bone-2:#41455A;
  --cu:#BE9472;--cu-lt:#E2C29C;--cu-dk:#7E512D;--gold-hi:#F6DDB0;
  --display:Fraunces,"Iowan Old Style",Georgia,serif;--text:Geist,"Helvetica Neue",Arial,sans-serif;
  --g:20px;--max:1280px;--bar:72px;--mbar:0px;--ease:cubic-bezier(.22,.61,.2,1)}
@media(min-width:1100px){:root{--g:64px}}
@media(max-width:767px){:root{--mbar:68px;--bar:64px}}
*{box-sizing:border-box}
html{background:var(--ink);overflow-x:clip;scroll-padding:calc(var(--bar) + 12px) 0 calc(var(--mbar) + 12px)}
body{margin:0;background:var(--ink);color:var(--on-ink);font:400 18px/1.6 var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;padding-bottom:var(--mbar)}
a{color:inherit}
:focus-visible{outline:2px solid var(--cu-lt);outline-offset:3px}
.bone :focus-visible{outline-color:var(--cu-dk)}
::selection{background:var(--cu);color:var(--ink)}
.skip{position:absolute;left:-999px;top:8px;background:#fff;color:#000;padding:10px 14px;z-index:99}
.skip:focus{left:8px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--g);position:relative}
.narrow{max-width:980px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
svg{overflow:visible}

/* ---------- header: Menu · mark · Pause Call (as Home) ---------- */
.bar{position:fixed;top:0;left:0;right:0;z-index:30;background:rgba(14,19,37,.94);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid rgba(226,194,156,.14)}
.bar .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:var(--bar)}
.menulink,.callbtn,.pause{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;font:500 12px/1 var(--text);letter-spacing:.2em;text-transform:uppercase;color:#fff;text-decoration:none}
.menulink{justify-self:start}
.mark{display:block;line-height:0}
.mark img{height:40px;width:auto;display:block}
.right{justify-self:end;display:flex;gap:8px;align-items:center}
.callbtn,.pause{padding:0 18px;border:1px solid rgba(226,194,156,.5);border-radius:999px;background:none;cursor:pointer}
.pause{color:var(--on-ink-2);border-color:rgba(255,255,255,.26)}
.callbtn:hover{background:var(--cu-lt);color:var(--ink)}
.pause:hover{color:#fff;border-color:var(--cu-lt)}
@media(max-width:767px){.callbtn{display:none}.mark img{height:34px}}

/* ---------- sections ---------- */
.sc{position:relative;padding:clamp(96px,14vh,168px) 0;overflow:clip}
.ink{background:var(--ink);color:var(--on-ink)}
.bone{background:var(--bone);color:var(--on-bone)}
.ink+.ink{border-top:1px solid rgba(226,194,156,.10)}
h1,h2{font-family:var(--display);font-weight:300;font-optical-sizing:auto;margin:0}
h1{font-size:clamp(64px,11vw,196px);line-height:.9;letter-spacing:-.045em;margin:0 0 28px}
h2{font-size:clamp(40px,5.4vw,92px);line-height:1;letter-spacing:-.035em;margin:0 0 40px}
.statement{font:300 clamp(40px,6.6vw,120px)/.98 var(--display);letter-spacing:-.04em;max-width:13em}
.statement.sm{font-size:clamp(32px,4.4vw,72px);line-height:1.04;max-width:16em}
.bone .statement{color:var(--on-bone)}
.own .statement{font-style:italic;color:var(--cu-dk);font-size:clamp(56px,10vw,180px)}
.eyebrow{display:flex;gap:12px;margin:0 0 28px;font:500 12px/1 var(--text);letter-spacing:.32em;text-transform:uppercase;color:var(--cu-lt)}
.bone .eyebrow{color:var(--cu-dk)}
.sub{font:400 clamp(19px,1.6vw,24px)/1.5 var(--text);max-width:30em;color:var(--on-ink-2);margin:0 0 36px}
.bone .sub{color:var(--on-bone-2)}
.detail{max-width:34em;font-size:clamp(17px,1.4vw,20px);color:var(--on-bone-2);margin:32px 0 0}
.ill{position:absolute;right:var(--g);bottom:18px;margin:0;font:500 11px/1 var(--text);letter-spacing:.24em;text-transform:uppercase;color:var(--on-ink-2);opacity:.85}
.bone .ill{color:var(--on-bone-2)}
figure{margin:0;position:relative}
.art .ill{right:0;bottom:-6px}

/* buttons */
.cta{display:flex;flex-wrap:wrap;gap:12px}
/* the online quote request: a small link under the two buttons (Roast Room 2026-10-26) */
/* the online quote request, the same on every page and the Home (the owner, 2026-10-27: "common quality throughout"): a quiet third action in the
   headline serif, italic, in gold leaf, a small drawn arrow, and a gold hairline under it that fades at both ends and brightens and runs out on hover */
.qlink{margin:16px 0 0;line-height:1}
.qlink .lnk{position:relative;display:inline-flex;align-items:center;gap:14px;min-height:44px;margin:0;padding:0 2px;font:italic 400 19px/1 var(--display);letter-spacing:.01em;color:var(--cu-lt);text-decoration:none;transition:color .5s var(--ease)}
.qlink .lnk::before{content:"";position:absolute;left:0;right:0;bottom:7px;height:1px;background:linear-gradient(90deg,rgba(226,194,156,0),rgba(226,194,156,.5) 18%,rgba(226,194,156,.5) 82%,rgba(226,194,156,0));transform-origin:0 50%;transition:background .5s var(--ease)}
.qlink .lnk::after{content:"";flex:0 0 auto;width:26px;height:10px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 10'%3E%3Cpath d='M0 5h24.5M20 1l4.5 4L20 9' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 10'%3E%3Cpath d='M0 5h24.5M20 1l4.5 4L20 9' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .5s var(--ease)}
.qlink .lnk:hover,.qlink .lnk:focus-visible{color:var(--gold-hi)}
.qlink .lnk:hover::before,.qlink .lnk:focus-visible::before{background:linear-gradient(90deg,rgba(246,221,176,0),var(--gold-hi) 12%,var(--gold-hi) 88%,rgba(246,221,176,0))}
.qlink .lnk:hover::after,.qlink .lnk:focus-visible::after{transform:translateX(5px)}
.bone .qlink .lnk{color:var(--cu-dk)}.bone .qlink .lnk:hover,.bone .qlink .lnk:focus-visible{color:var(--on-bone)}
@media(prefers-reduced-motion:reduce){.qlink .lnk,.qlink .lnk::after{transition:none}}
.close .qlink{text-align:center}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 30px;border-radius:999px;font:500 16px/1 var(--text);text-decoration:none;white-space:nowrap;color:#fff;border:1px solid rgba(226,194,156,.6);transition:background .4s,border-color .4s}
.btn:hover,.btn:focus-visible{background:rgba(226,194,156,.14);border-color:var(--cu-lt)}
.btn.primary{background:linear-gradient(180deg,#EACDA6,#C99A6E);border-color:transparent;color:var(--ink)}
.bone .btn{color:var(--on-bone);border-color:var(--cu-dk)}
.bone .btn.primary{color:var(--ink)}
.lnk{color:var(--cu-lt);text-underline-offset:4px}
.bone .lnk{color:var(--cu-dk)}

/* gold strokes: one look for every drawn line */
.draw{fill:none;stroke:var(--cu-lt);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:calc(1 - var(--k,1));filter:drop-shadow(0 0 6px rgba(246,221,176,.45))}
.bone .draw{stroke:var(--cu);filter:none}
.guide{fill:none;stroke:rgba(226,194,156,.16);stroke-width:1.2}

/* ---------- hero ---------- */
.hero{min-height:min(100svh,1000px);display:flex;align-items:flex-end;padding:calc(var(--bar) + 40px) 0 clamp(64px,10vh,120px)}
.hero .wrap{width:100%}
.hthread{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hthread .draw{stroke-width:2;stroke-dashoffset:0;animation:draw 3.2s var(--ease) .2s both}
.hero.ink::after{content:"";position:absolute;inset:auto 0 0;height:40%;background:radial-gradient(60% 100% at 70% 100%,rgba(190,148,114,.12),transparent);pointer-events:none}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.crumbs ol{list-style:none;margin:0 0 clamp(40px,8vh,96px);padding:0;display:flex;flex-wrap:wrap;gap:8px;font-size:14px;color:var(--on-ink-2)}
.bone .crumbs ol{color:var(--on-bone-2)}
.crumbs li+li::before{content:"/";margin-right:8px;opacity:.6}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.hero .wrap>*{animation:rise 1.4s var(--ease) both}
.hero .wrap>:nth-child(3){animation-delay:.08s}.hero .wrap>:nth-child(4){animation-delay:.16s}.hero .wrap>:nth-child(5){animation-delay:.24s}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* ---------- pinned scenes ---------- */
[data-pin],[data-view],[data-through]{--p:1}
.js:not(.still) .pin{height:calc(var(--len,3) * 100svh);padding:0}
.js:not(.still) .pin>.stage{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center;padding-top:var(--bar)}
.pin>.stage{width:100%}
.still .pin,.pin:not(.js .pin){padding:clamp(96px,14vh,168px) 0}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,6vw,120px);align-items:center;width:100%}
.art svg{width:100%;height:auto;display:block}
/* steps that light up one by one (dimmed text stays above 4.5:1) */
.ride{list-style:none;margin:0;padding:0;counter-reset:s}
.ride li{counter-increment:s;position:relative;padding:18px 0 18px 64px;border-top:1px solid rgba(226,194,156,.18);font:400 clamp(17px,1.35vw,21px)/1.45 var(--text);transition:color .5s,opacity .5s}
.ride li::before{content:"0" counter(s);position:absolute;left:0;top:16px;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);letter-spacing:.06em;color:var(--cu-lt);transition:background .5s,color .5s}
.js:not(.still) .ride li:not(.on){color:#9A9FB2}
.ride li.on::before{background:var(--cu-lt);color:var(--ink);border-color:var(--cu-lt)}
.ride li.cur{color:#fff}

/* Pawn loans: the round trip */
.trip .art{max-width:min(78vh,620px);justify-self:end;width:100%}
.loopart .big{stroke-width:3}
.loopart .st{fill:var(--ink);stroke:rgba(226,194,156,.6);stroke-width:2;transition:fill .5s,stroke .5s}
.loopart .st.on{fill:var(--cu-lt);stroke:var(--gold-hi)}
/* the wheel becomes the logo (pages.mjs logoWheel): each group copies its own progress into a named variable, so a piece inside can use them all */
.loopart g{transition:opacity .9s cubic-bezier(.25,.6,.2,1),transform .9s cubic-bezier(.25,.6,.2,1)}
.loopart .loop1{opacity:calc(1 - var(--k,1))}
.loopart .inner{transform-origin:400px 400px;opacity:var(--k,1);transform:scale(calc(.94 + .06 * var(--k,1)))}
.loopart .ln{fill:none;stroke:var(--gold-hi);stroke-width:1.2;opacity:.55}
.loopart .fl{fill:var(--cu-lt);fill-rule:evenodd;filter:drop-shadow(0 0 8px rgba(246,221,176,.35))}
.loopart .arrows{opacity:clamp(0,calc(var(--k,1) * 6),1)}
.loopart .spin{transform-origin:400px 400px;transform:rotate(calc(var(--k,1) * 360deg))}
.loopart .arc,.loopart .head{fill:none;stroke:var(--cu-lt);stroke-width:17;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 0 8px rgba(246,221,176,.3))}
.loopart .arc{stroke-linecap:round}
.loopart .seat{--a:var(--k,1)}.loopart .item{--b:var(--k,1)}.loopart .cash{--b:var(--k,1)}.loopart .back{--c:var(--k,1)}
.loopart .seat .back{opacity:calc(var(--a) * (1 - .7 * var(--b) + .7 * var(--c)))}
.loopart .cashin{--d:var(--k,1)}
.loopart .cash .back{opacity:calc(var(--d) * (.3 + .7 * var(--b) - .45 * var(--c)))}
.loopart .cash.on .back{opacity:1}
.loopart .bub{fill:none;stroke:var(--cu-lt);stroke-width:17;stroke-linejoin:round;filter:drop-shadow(0 0 8px rgba(246,221,176,.3))}
.loopart .trav{transform-origin:400px 400px;transform:rotate(calc(var(--k,1) * 270deg));fill:none;stroke:var(--gold-hi);stroke-width:4;filter:drop-shadow(0 0 10px rgba(246,221,176,.8))}
.loopart .trav circle{fill:var(--ink)}
.loopart .trav.on{opacity:0}
.still .loopart g{transition:none}
.term-t{margin:18px auto 0;max-width:30em;text-align:center;font:400 clamp(14px,1.1vw,17px)/1.45 var(--text);color:var(--on-ink-2);transition:opacity .6s}
.js:not(.still) .term-t:not(.on){opacity:0}

/* the knot and You keep ownership */
.knot{display:block;width:100%;height:clamp(80px,14vw,200px);margin:0 0 24px}
.trio{list-style:none;margin:72px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,64px)}
.trio li{border-top:1px solid rgba(126,81,45,.35);padding-top:22px;font-size:17px;color:var(--on-bone-2)}
.ic{display:block;width:52px;height:52px;margin:0 0 18px;fill:none;stroke:var(--cu-dk);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ink .ic{stroke:var(--cu-lt)}

/* What we lend on: two doors */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px);margin:0 0 56px}
.door{display:flex;flex-direction:column;justify-content:space-between;min-height:clamp(220px,28vw,360px);padding:clamp(24px,3vw,44px);border:1px solid rgba(226,194,156,.28);border-radius:4px;text-decoration:none;background:linear-gradient(160deg,rgba(226,194,156,.07),transparent 60%);transition:border-color .5s,background .5s,transform .6s var(--ease)}
.door span{font:300 clamp(30px,3.4vw,56px)/1.05 var(--display);letter-spacing:-.025em}
.door span::after{content:" \2192";font:400 .5em/1 var(--text);color:var(--cu-lt)}
.door:hover,.door:focus-visible{border-color:var(--cu-lt);background:linear-gradient(160deg,rgba(226,194,156,.16),transparent 70%);transform:translateY(-4px)}
.door .ic{width:72px;height:72px}
.no{list-style:none;margin:0;padding:0;max-width:44em}
.no li{position:relative;padding:10px 0 10px 40px;font-size:16px;color:var(--on-ink-2)}
.bone .no li{color:var(--on-bone-2)}
.nos{margin-top:24px;padding-top:16px;border-top:1px dashed rgba(190,148,114,.3)}
.notag{font:500 11px/1 var(--text);letter-spacing:.22em;text-transform:uppercase;margin:0 0 6px!important;color:var(--on-ink-2)}
.bone .notag{color:var(--on-bone-2)}
.no li{display:flex;gap:14px;align-items:flex-start;padding-left:0}
.no .nomark{flex:0 0 22px;width:22px;height:22px;margin-top:2px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;opacity:.9}
.no .nomark circle{stroke-dasharray:1.6 3.1}
.no .nomark path{stroke-width:1.5}
/* the visitor's lamp (the searchlight): one warm pool over the whole page, following the hand; screen blend lifts the navy and barely touches the bone */
.lamp{position:fixed;left:0;top:0;z-index:5;width:min(1000px,120vw);height:min(1000px,120vw);margin:calc(min(1000px,120vw) / -2) 0 0 calc(min(1000px,120vw) / -2);transform:translate(var(--lx,72vw),var(--ly,34vh));transition:transform 1.4s cubic-bezier(.2,.7,.2,1),opacity 1.2s;background:radial-gradient(closest-side,rgba(246,214,170,.20),rgba(233,190,140,.07) 45%,rgba(233,190,140,0));mix-blend-mode:screen;pointer-events:none;will-change:transform;opacity:0}
.js .lamp{opacity:1}
.still .lamp,.still .eyelets::before{transition:none}
@media (prefers-reduced-motion:reduce){.lamp{transition:none}}

/* What to bring: tags hanging from the thread */
.tagline{display:block;width:100%;height:60px;margin:0 0 -6px}
.tags{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:clamp(14px,2vw,28px)}
.tags li{position:relative;margin-top:44px;padding:28px 22px 24px;background:#FBF7F0;border:1px solid rgba(126,81,45,.28);border-radius:4px 4px 18px 4px;font-size:17px;line-height:1.5;color:var(--on-bone);box-shadow:0 18px 40px -26px rgba(21,26,44,.35)}
.tags li::before{content:"";position:absolute;left:28px;top:-44px;width:1px;height:44px;background:var(--cu)}
.tags li::after{content:"";position:absolute;left:23px;top:10px;width:9px;height:9px;border-radius:50%;border:1.5px solid var(--cu)}
.ink .tags li{background:rgba(255,255,255,.04);border-color:rgba(226,194,156,.3);color:var(--on-ink);box-shadow:none}
.ink .tags li::before{background:var(--cu-lt)}

/* reveal */
.js:not(.still) .rv{opacity:0;transform:translateY(18px);transition:opacity 1.6s var(--ease),transform 1.8s var(--ease)}
.js:not(.still) .rv.in{opacity:1;transform:none}
.js:not(.still) .rv:focus-within,.js:not(.still) .rv:focus-visible{opacity:1;transform:none;transition:none}
.js:not(.still) .rv:nth-child(2){transition-delay:.35s}.js:not(.still) .rv:nth-child(3){transition-delay:.7s}.js:not(.still) .rv:nth-child(4){transition-delay:1.05s}

/* FAQ */
.faq{border-top:1px solid rgba(226,194,156,.22)}
.bone .faq{border-color:rgba(126,81,45,.3)}
.faq details{border-bottom:1px solid rgba(226,194,156,.22);position:relative}
.bone .faq details{border-color:rgba(126,81,45,.3)}
.faq summary{list-style:none;cursor:pointer;padding:24px 56px 24px 0;font:300 clamp(22px,2.2vw,34px)/1.2 var(--display);letter-spacing:-.015em;position:relative;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:18px;height:18px;margin-top:-9px;background:linear-gradient(currentColor,currentColor) center/18px 1px no-repeat,linear-gradient(currentColor,currentColor) center/1px 18px no-repeat;color:var(--cu-lt);transition:transform .5s var(--ease)}
.bone .faq summary::after{color:var(--cu-dk)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{font-style:italic}
.faq details p{margin:0 0 20px;max-width:38em;font-size:18px;color:var(--on-ink-2)}
.bone .faq details p{color:var(--on-bone-2)}
.faq .loop{display:block;width:120px;height:40px;margin:-14px 0 20px}
.faq .loop path{fill:none;stroke:var(--cu-lt);stroke-width:2;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:0}
.bone .faq .loop path{stroke:var(--cu)}
.js:not(.still) .faq details[open] .loop path{animation:draw 1.2s var(--ease) both}
.faq.num{counter-reset:q}
.faq.num summary{padding-left:72px;counter-increment:q}
.faq.num summary::before{content:counter(q,decimal-leading-zero);position:absolute;left:0;top:30px;font:500 12px/1 var(--text);letter-spacing:.2em;color:var(--cu-dk)}
.faq.num .loop,.faq.num details p{margin-left:72px}

/* closing: the thread ends as a pin at the door */
.close{text-align:center}
.close .wrap{display:flex;flex-direction:column;align-items:center}
.pinline{width:min(400px,80vw);height:auto;margin:0 0 24px}
.close .mapfig{width:min(100%,880px,(100svh - var(--bar) - 56px) * 1000 / 660);margin:0 0 32px}
@media(max-width:767px){.close .mapfig{width:min(100%,(100svh - var(--bar) - var(--mbar) - 40px) * .8)}}
.pinline .pin,.routeart .pin{fill:var(--cu-lt);stroke:none;filter:drop-shadow(0 0 12px rgba(246,221,176,.7))}
.addr{font:300 clamp(34px,4.6vw,76px)/1.04 var(--display);letter-spacing:-.03em;font-style:normal;margin:0 0 20px;max-width:14em}
.hours{margin:0 0 36px;color:var(--on-ink-2)}
.close .cta{justify-content:center}

/* footer and phone bar */
.foot{background:#0A0E1C;color:var(--on-ink-2);padding:72px 0 56px;font-size:15px}
.pages ul{list-style:none;margin:0 0 40px;padding:0;display:flex;flex-wrap:wrap;gap:6px 28px}
.pages a{display:inline-flex;min-height:44px;align-items:center;font:300 22px/1.2 var(--display);color:#fff;text-decoration:none}
.pages a:hover,.pages a[aria-current]{font-style:italic;color:var(--cu-lt)}
.foot .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:4px 40px}
.foot p{margin:0 0 10px}
.foot p.sig{margin:0 0 18px;font:400 italic clamp(18px,1.5vw,22px)/1.3 var(--display);color:var(--gold-hi)}
/* footer "Find us" (T193): the profiles as beads on the gold thread; plain names, no logos */
.findus{margin:0 0 36px}
.findus .fh{margin:0 0 6px;font:500 12px/1 var(--text);letter-spacing:.18em;text-transform:uppercase;color:var(--cu-lt)}
.findus ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
.findus li{position:relative;padding:16px 28px 0 0}
.findus li::before{content:"";position:absolute;left:4px;right:0;top:8px;height:1px;background:linear-gradient(90deg,rgba(226,194,156,.7),rgba(190,148,114,.3))}
.findus li:last-child::before{right:28px}
.findus li::after{content:"";position:absolute;left:0;top:4px;width:9px;height:9px;border-radius:50%;background:#0A0E1C;border:1px solid var(--cu-lt);transition:background .3s,box-shadow .3s}
.findus li:hover::after,.findus li:focus-within::after{background:var(--gold-hi);box-shadow:0 0 14px rgba(246,221,176,.85)}
.findus a{display:inline-flex;align-items:center;min-height:44px;font:300 20px/1.2 var(--display);color:#fff;text-decoration:none}
.findus a:hover,.findus a:focus-visible{font-style:italic;color:var(--cu-lt)}
@media(prefers-reduced-motion:reduce){.findus li::after{transition:none}}
.mbar{display:none}
@media(max-width:767px){
  .mbar{display:grid;grid-template-columns:1fr 1.4fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(10,14,28,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid rgba(226,194,156,.2)}
  .mbar a{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:999px;font:500 15px/1 var(--text);text-decoration:none;color:#fff;border:1px solid rgba(226,194,156,.55)}
  .mbar .b{background:linear-gradient(180deg,#EACDA6,#C99A6E);color:var(--ink);border-color:transparent}
}

/* ---------- Gold: three golds ---------- */
.rings{aspect-ratio:1;max-width:min(76vh,600px);justify-self:end;width:100%}
.rg{position:absolute;inset:0;opacity:var(--k,1)}
.rg svg{width:100%;height:100%}
.ringart .spin{transform:rotate(calc(var(--p) * 200deg))}
.ringart .hl{fill:none;stroke:rgba(255,255,255,.18);stroke-width:1}
.golds .stage::before{content:"";position:absolute;right:-10%;top:10%;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(243,210,122,.18),transparent);pointer-events:none}
.metal{font:300 clamp(30px,3.6vw,60px)/1.12 var(--display);letter-spacing:-.025em;max-width:13em;margin:0}
.metal span{transition:color .6s,font-style .6s}
.js:not(.still) .metal span.cur{font-style:italic}
.metal .m-yellow.on{color:#F3D27A}.metal .m-white.on{color:#ECEAE4}.metal .m-rose.on{color:#F0B49C}
.still .rings,.rings:not(.js .rings){aspect-ratio:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.still .rg,.rings:not(.js .rings) .rg{position:static;opacity:1}
.chainart{width:100%;height:auto;display:block;margin:0 0 48px}
.chainart .lk{fill:none;stroke:#B98A3E;stroke-width:12}
.chainart .lk.e{fill:#C9A050;stroke:none}
.chainart .cl{transform:translateX(calc((1 - var(--p)) * -60px))}
.chainart .cr{transform:translateX(calc((1 - var(--p)) * 60px))}
.chainart .mend{stroke:var(--cu-dk);stroke-width:10;filter:none}
.chain .ill{position:static;display:block;text-align:right;margin:-36px 0 40px}
.gemart{max-width:min(70vh,520px);margin:0 auto}
.gemart .girdle{fill:none;stroke:rgba(226,194,156,.6);stroke-width:2}
.gemart .f{fill:rgba(255,255,255,.02);stroke:rgba(226,194,156,.55);stroke-width:1;transition:fill .8s}
.gemart .f.on{fill:rgba(246,221,176,.10)}
.gemart .f.star.on{fill:rgba(255,255,255,.22)}
.gemart .f.table.on{fill:rgba(246,221,176,.16)}
.js:not(.still) .gemart .f.on:nth-child(5n){animation:glint 4.6s ease-in-out infinite}
.js:not(.still) .gemart .f.on:nth-child(7n+2){animation:glint 5.8s ease-in-out 1.2s infinite}
@keyframes glint{0%,100%{fill:rgba(246,221,176,.10)}50%{fill:rgba(255,255,255,.55)}}
.gemart .prongs{stroke:#C9A050;stroke-width:12;stroke-linecap:round}
.gem .no{margin-top:40px}
/* eyelets: the four steps on the thread */
.eyelets{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,48px);position:relative;counter-reset:s}
.eyelets::before{content:"";position:absolute;left:0;right:0;top:20px;height:2px;background:linear-gradient(90deg,var(--cu-dk),var(--cu-lt),var(--gold-hi),var(--cu));transform-origin:left;transform:scaleX(clamp(0,calc((var(--p) - .25) / .75),1));transition:transform 1.2s cubic-bezier(.25,.6,.2,1)}
.eyelets li{counter-increment:s;position:relative;padding-top:68px;font-size:17px;line-height:1.5;color:var(--on-ink-2)}
.eyelets li::before{content:"0" counter(s);position:absolute;left:0;top:0;width:42px;height:42px;border-radius:50%;background:var(--ink);border:2px solid var(--cu-lt);display:grid;place-items:center;font:500 12px/1 var(--text);color:var(--cu-lt)}
.term-l{margin:56px 0 0;font:300 clamp(24px,2.4vw,38px)/1.2 var(--display);letter-spacing:-.02em}

/* ---------- Watches: the movement ---------- */
.movement .art{max-width:min(80vh,640px);justify-self:end;width:100%}
.watchline .art{max-width:min(70vh,520px);justify-self:end;width:100%}
.watchline h2 a{color:inherit;text-decoration-color:var(--cu);text-underline-offset:.18em}
.dialart{position:relative;width:100%;aspect-ratio:1;transition:opacity .6s var(--ease)}.dialart>*{position:absolute;inset:0;width:100%;height:100%;display:block;transform-origin:50% 50%}
.dialart .hh,.dialart .mh,.dialart .sh{will-change:transform}   /* only the hands move: three small layers; the face is one still picture */
.js:not(.still) .dialart.wait{opacity:0}
/* the brand names as gold leaf on the bezel (drawn only by v6/scripts/dial-ring.mjs, which bakes them into the dial picture): a lit gradient, a hair of shadow, drawn at full precision so they stay sharp at any size */
.dialart text{font:600 13.5px/1 var(--text);letter-spacing:.09em;text-transform:uppercase;fill:url(#leaf);text-rendering:geometricPrecision;paint-order:stroke;stroke:rgba(10,14,28,.55);stroke-width:.6px;filter:drop-shadow(0 0 3px rgba(246,214,170,.25))}
.dialart .hh{transform:rotate(calc(300deg + var(--p) * 120deg))}
.dialart .mh{transform:rotate(calc(60deg + var(--p) * 1440deg))}
.dialart .sh{animation:hand 60s linear infinite}
.still .dialart .sh{animation:none;transform:rotate(42deg)}
@keyframes hand{to{transform:rotate(360deg)}}
.crownline{position:absolute;left:96%;top:0;width:40%;height:100%;pointer-events:none}
.brands{font:300 italic clamp(22px,2vw,32px)/1.4 var(--display);color:var(--on-ink-2);max-width:20em;margin:0 0 32px}
.fine{font-size:14px;color:var(--on-ink-2);margin:20px 0 0}
.boxart{width:100%;max-width:640px;margin-left:auto;overflow:visible}
.boxart .stitch{stroke-width:.9;stroke-dasharray:3 4;opacity:.55}
.boxart path,.boxart ellipse,.boxart rect{fill:none;stroke:var(--cu-dk);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.boxart .fine{stroke-width:1;opacity:.6}
.boxart .fillb{fill:var(--bone);stroke:none}
.boxart .gold{stroke:var(--cu);stroke-width:1.8}
.boxart .shade{fill:rgba(126,81,45,.08);stroke:none}
.boxart .cush{fill:rgba(126,81,45,.07)}
.boxart .sat{fill:rgba(126,81,45,.05);stroke-width:1}
.boxart .clasp{stroke:var(--cu)}
.boxart .glint{stroke:var(--cu);stroke-width:1.4;opacity:0;transition:opacity 1.2s .6s}
/* the hinge: the lid folds about its back edge; a lid lets go, swings a hair past its rest and settles (the overshoot in the curve) */
.boxart .lidshut,.boxart .lidopen{transition:transform 1.3s cubic-bezier(.3,1.35,.5,1)}
.boxart .lidshut{transform-origin:260px 164px;transform:scaleY(1)}
.boxart .lidopen{transform-origin:260px 166px;transform:scaleY(0)}
.boxart .bx.on .lidshut{transform:scaleY(0)}
.boxart .bx.on .lidopen{transform:scaleY(1)}
.boxart .bx.on .glint{opacity:1}
/* the ID and the papers slide onto the counter and stop (friction: a fast start, a soft stop) */
.boxart .idc,.boxart .pap{opacity:0;transition:opacity .6s,transform 1.4s cubic-bezier(.2,.75,.25,1)}
.boxart .idc{transform:translateX(70px)}.boxart .pap{transform:translateX(-70px)}
.boxart .idc.on,.boxart .pap.on{opacity:1;transform:none}
.reads li{transition:color .6s}
.reads li{color:var(--on-bone-2);border-left:2px solid transparent;padding-left:12px;transition:color .6s,border-color .8s}
.reads li.on{color:var(--on-bone);border-left-color:var(--cu)}
.still .boxart *{transition:none!important}
.list{list-style:none;margin:0;padding:0}
.list li{padding:16px 0;border-top:1px solid rgba(126,81,45,.3);font-size:19px}
.ink .list li{border-color:rgba(226,194,156,.2)}

/* ---------- We buy: one line ---------- */
.oneline .stage{flex-direction:column;align-items:stretch;justify-content:center}
.oneline h2{margin-bottom:24px}
.track{overflow:hidden;width:100%}
.trackin{position:relative;height:clamp(260px,52svh,620px);aspect-ratio:4/1;transform:translateX(calc(var(--p) * (100vw - 100%)))}
.lineart{position:absolute;inset:0;width:100%;height:100%}
.lineart .draw{stroke-width:3.2}
.lineart .base{stroke:var(--cu);stroke-width:1.6}
.objs{list-style:none;margin:0;padding:0;position:absolute;left:0;right:0;bottom:-8px;display:grid;grid-template-columns:repeat(4,1fr);text-align:center}
.objs a{display:inline-flex;align-items:center;min-height:44px;font:300 clamp(24px,2.4vw,40px)/1 var(--display);text-decoration:none;transition:opacity .6s,color .4s}
.objs a:hover{color:var(--cu-lt);font-style:italic}
.js:not(.still) .objs li:not(.on) a{opacity:.55}
.oneline .ill{position:static;text-align:right;margin-top:24px}
.still .trackin,.trackin:not(.js .trackin){transform:none;width:100%;height:auto}
.still .track .lineart{position:static;height:auto}
.still .objs{position:static}

/* ---------- Store: the window ---------- */
.storefront .stage{min-height:100svh;display:flex;align-items:flex-end}
.storefront .shopart{position:absolute;inset:0;width:100%;height:100%}
.storefront .shopart.tall{display:none}
.storefront .wrap{width:100%;padding-bottom:clamp(40px,8vh,96px);z-index:1}
.storefront .stage::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,19,37,.94) 0%,rgba(14,19,37,.9) 44%,rgba(14,19,37,.6) 58%,rgba(14,19,37,0) 76%);pointer-events:none}
.storefront .ill{bottom:auto;top:calc(var(--bar) + 16px)}
.shopart .night{fill:#0B1022;opacity:var(--k,1)}
.shopart .stars{fill:#fff;opacity:var(--k,1)}
.shopart .bldg{fill:#141A30;stroke:rgba(226,194,156,.35);stroke-width:2}
.shopart .ln,.shopart .door,.shopart .street{fill:none;stroke:rgba(226,194,156,.55);stroke-width:2.4}
.shopart .sign{fill:#0E1325;stroke:rgba(226,194,156,.4);stroke-width:2}
.shopart .win{fill:#0B1022}
.shopart .winlit,.shopart .doorlit{opacity:calc(var(--k,1) * .92)}
.shopart .refl{opacity:calc(var(--k,1) * .25)}
.shopart .goods{opacity:var(--k,1)}
.shopart .goods path,.shopart .gd{fill:none;stroke:#5A3519;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.shopart .lampglow{opacity:var(--k,1)}
.shopart .lamph,.shopart .knob{fill:var(--gold-hi)}
.shopart .awn{stroke-width:4}
/* Directions: the walk */
.walk .addr{display:block;margin:0 0 40px}
/* the map: real blocks, lanes, the SkyTrain guideway, street names with a halo in the page colour */
.mapfig{width:min(100%,1000px,(100svh - var(--bar) - 56px) * 1000 / 660);aspect-ratio:1000/660;position:relative}
.mapfig .routeart{width:100%;height:100%;overflow:hidden;border-radius:14px;--map-bg:var(--bone);--blk:rgba(126,81,45,.06);--edge:rgba(126,81,45,.22);--lane:rgba(126,81,45,.14);--lbl:var(--on-bone-2);--rail:var(--cu-dk)}
.ink .mapfig .routeart{--map-bg:var(--ink);--blk:rgba(226,194,156,.04);--edge:rgba(226,194,156,.16);--lane:rgba(226,194,156,.09);--lbl:rgba(213,217,230,.78);--rail:var(--cu)}
@media(max-width:767px){.mapfig{width:min(100%,(100svh - var(--bar) - var(--mbar) - 40px) * .8);aspect-ratio:4/5}}
.routeart .blk{fill:var(--blk);stroke:var(--edge);stroke-width:1.2}
.routeart .lane{fill:none;stroke:var(--lane);stroke-width:5}
.routeart .rail{fill:none;stroke:var(--rail);stroke-width:2;opacity:.75}
.routeart .ties{fill:none;stroke:var(--rail);stroke-width:14;stroke-dasharray:2 9;opacity:.4}
.routeart .stnb{fill:var(--map-bg);stroke:var(--rail);stroke-width:2}
.routeart .sn{fill:var(--lbl);font:500 17px/1 var(--text);letter-spacing:.12em;text-transform:uppercase;text-anchor:middle;paint-order:stroke;stroke:var(--map-bg);stroke-width:5px;stroke-linejoin:round}
.routeart .stl{text-anchor:start;font-size:16px;letter-spacing:.01em;text-transform:none;fill:var(--cu-dk)}
.ink .routeart .stl{fill:var(--cu-lt)}
.routeart .shop{text-anchor:end;font:400 30px/1 var(--display);letter-spacing:0;text-transform:none;fill:var(--cu-dk)}
.ink .routeart .shop{fill:var(--gold-hi)}
.routeart .north{fill:var(--lbl)}
.routeart .stn{fill:none;stroke:var(--cu-dk);stroke-width:3}
.routeart .stn.in{fill:var(--cu-dk)}
.ink .routeart .stn{stroke:var(--cu-lt)}.ink .routeart .stn.in{fill:var(--cu-lt)}
.routeart .draw{stroke-width:5}
.routeart .pin .hole{fill:var(--map-bg)}
/* the pin is dropped, not faded: it falls under gravity, lands on its point, bounces once (restitution about .3) and settles */
.routeart .pin{transform-box:fill-box;transform-origin:50% 100%}
.js:not(.still) .routeart .pin:not(.on){opacity:0;transform:translateY(-70px)}
.js:not(.still) .routeart .pin.on{animation:pindrop .78s both}
@keyframes pindrop{0%{opacity:1;transform:translateY(-70px);animation-timing-function:cubic-bezier(.55,0,1,.45)}62%{transform:translateY(0) scaleY(.94);animation-timing-function:cubic-bezier(0,.55,.45,1)}81%{transform:translateY(-6px) scaleY(1);animation-timing-function:cubic-bezier(.55,0,1,.45)}100%{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.js .routeart .pin{animation:none!important;opacity:1!important;transform:none!important}}
.bone .routeart .pin{fill:var(--cu-dk);filter:none}
.walk .tags{margin:24px 0 32px}
/* the map is one link (to the shop in maps). Its plaque hangs at the door under the pin; pointing at the map walks the route again in light */
.mapfig .routeart{background:var(--map-bg)}
.ink .mapfig .routeart{background:rgba(11,15,30,.94);box-shadow:0 0 0 1px rgba(226,194,156,.16),0 30px 80px -30px rgba(0,0,0,.8)}
.maplink{position:absolute;inset:0;display:block;border-radius:14px;color:inherit;text-decoration:none;--px:40.7%;--py:79.4%}
.maplink:focus-visible{outline:2px solid var(--gold-hi);outline-offset:4px}
.plaque{position:absolute;left:calc(var(--px) - 12px);top:calc(var(--py) + 12px);transform:translateX(-100%);display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
  padding:11px 16px 11px 18px;border-radius:999px;border:1px solid rgba(226,194,156,.55);background:rgba(14,19,37,.92);color:var(--gold-hi);
  font:500 13px/1 var(--text);letter-spacing:.16em;text-transform:uppercase;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.plaque::before{content:"";position:absolute;right:-12px;top:-12px;width:12px;height:12px;border-top:1.5px solid rgba(226,194,156,.55);border-right:1.5px solid rgba(226,194,156,.55);border-top-right-radius:10px}
.plaque .ext{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.maplink:hover .plaque,.maplink:focus-visible .plaque{background:linear-gradient(180deg,#F6DDB0,#C98E5A);color:#1A1208;border-color:transparent}
.routeart .trace{fill:none;stroke:var(--gold-hi);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.maplink:hover .trace,.maplink:focus-visible .trace{animation:retrace 1.5s cubic-bezier(.45,0,.25,1) both}
@keyframes retrace{0%{stroke-dashoffset:1;opacity:1}85%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:.85}}
.bone .plaque{background:var(--bone);color:var(--cu-dk);border-color:rgba(126,81,45,.5)}
@media(prefers-reduced-motion:reduce){.maplink:hover .trace,.maplink:focus-visible .trace{animation:none;stroke-dashoffset:0;opacity:.85}}
@media(max-width:767px){.maplink{--px:32.4%}.plaque{left:calc(var(--px) + 18px);top:calc(var(--py) - 40px);transform:none;padding:10px 13px 10px 15px;font-size:12px;letter-spacing:.12em}.plaque::before{display:none}}
.bigcall a{font:300 clamp(44px,7vw,120px)/1 var(--display);letter-spacing:-.04em;text-decoration:none;color:var(--gold-hi)}
.bigcall a:hover{font-style:italic}

/* ---------- Free quote: the door ---------- */
.come .art{justify-self:center;width:min(420px,80%)}
.doorway{position:relative;aspect-ratio:3/5;border-radius:999px 999px 0 0;border:2px solid rgba(226,194,156,.6);overflow:hidden;perspective:1400px;background:#05070F}
.doorway .light{position:absolute;inset:0;background:radial-gradient(80% 70% at 50% 85%,#FFE3B0,#E0A866 45%,#6B3E1E 100%);opacity:calc(.15 + var(--p) * .85)}
.doorway .leaf{position:absolute;inset:0;transform-origin:left center;transform:rotateY(calc(var(--p) * -76deg));background:linear-gradient(90deg,#1A2140,#121831);border-right:1px solid rgba(226,194,156,.4);box-shadow:inset 0 0 0 14px #141A33,inset 0 0 0 15px rgba(226,194,156,.25)}
.doorway .leaf i{position:absolute;left:18%;right:18%;border:1px solid rgba(226,194,156,.25)}
.doorway .leaf i:first-child{top:16%;height:34%;border-radius:999px 999px 0 0}
.doorway .leaf i:nth-child(2){top:58%;height:30%}
.doorway .leaf b{position:absolute;right:12%;top:52%;width:10px;height:44px;border-radius:6px;background:linear-gradient(180deg,var(--gold-hi),var(--cu))}
.spill{position:absolute;left:50%;bottom:0;width:min(900px,90vw);height:28vh;transform:translateX(-10%);background:radial-gradient(50% 100% at 50% 0%,rgba(255,227,176,.28),transparent);clip-path:polygon(38% 0,62% 0,100% 100%,0 100%);opacity:var(--p);pointer-events:none}
.come .art{position:relative}
.come .art .spill{left:50%;transform:translateX(-50%);bottom:-28vh}
.come .ride{margin:8px 0 36px;max-width:30em}
.come h1{font-size:clamp(60px,9vw,160px)}
.idart{max-width:460px}
.idart rect,.idart circle,.idart path:not(.draw){fill:none;stroke:var(--cu-dk);stroke-width:2.4;stroke-linecap:round}
.idsec .art{justify-self:start}

/* ---------- Privacy: the seal ---------- */
.seal .wrap{display:grid;place-items:center}
.sealart{width:min(600px,86vw);height:auto;grid-area:1/1}
.sealart .dots{fill:none;stroke:rgba(226,194,156,.35);stroke-width:2;stroke-dasharray:2 10}
.seal .in{grid-area:1/1;text-align:center;max-width:min(400px,62vw)}
.seal h2{font-size:clamp(20px,1.6vw,24px);font-family:var(--text);font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--cu-lt);margin:0 0 20px}
.seal .statement.sm{font-size:clamp(26px,3vw,44px);margin:0 auto}
.plainsec p{color:var(--on-bone-2);max-width:32em}
.plainsec h2{font-size:clamp(34px,3.6vw,56px)}
.plainsec .two{align-items:start;row-gap:clamp(48px,7vw,96px)}

/* ---------- phone: its own composition ---------- */
@media(max-width:767px){
  h1{font-size:clamp(56px,17vw,84px)}
  h2{font-size:clamp(36px,10vw,48px);margin-bottom:28px}
  .sc{padding:88px 0}
  .hero{min-height:88svh}
  .two{grid-template-columns:1fr;gap:28px}
  .sub{font-size:18px}
  .btn{min-height:52px;padding:0 24px}
  .trio{grid-template-columns:1fr;margin-top:48px}
  .doors{grid-template-columns:1fr}
  .door{min-height:180px}
  .eyelets{grid-template-columns:1fr;gap:24px;padding-left:64px}
  .eyelets::before{left:20px;right:auto;top:0;bottom:0;width:2px;height:auto;transform:scaleY(clamp(0,calc((var(--p) - .25) / .75),1));transform-origin:top;transition:transform 1.2s cubic-bezier(.25,.6,.2,1)}
  .eyelets li{padding-top:8px}
  .eyelets li::before{left:-64px}
  .tagline{display:none}
  .tags{border-left:2px solid var(--cu);padding-left:24px;gap:14px}
  .tags li{margin-top:0}
  .tags li::before{left:-24px;top:30px;width:24px;height:1px}
  .tags li::after{left:6px;top:25px}
  .tags li{padding-left:28px}
  /* pinned stages on the phone: art on top, words below, only the current step shows */
  .js:not(.still) .pin>.stage{align-items:flex-start;padding-top:calc(var(--bar) + 12px);padding-bottom:var(--mbar)}
  .trip .two,.golds .two,.movement .two{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:16px}
  .trip .art{width:min(72vw,40svh);align-self:center}
  .js:not(.still) .trip .ride{position:relative;min-height:9.5em}
  .js:not(.still) .trip .ride li,.js:not(.still) .come .ride li{position:absolute;left:0;right:0;top:0;opacity:0;transition:opacity .5s;border:0}
  .js:not(.still) .trip .ride li.cur,.js:not(.still) .come .ride li.cur{opacity:1;color:#fff}
  .trip h2,.golds h2,.movement h2{font-size:30px;margin-bottom:12px}
  .term-t{font-size:13px;margin-top:10px}
  .rings{width:min(64vw,36svh);align-self:center}
  .metal{font-size:28px}
  .movement .art{width:min(84vw,44svh);align-self:center}
  .crownline{display:none}
  .js:not(.still) .movement .brands{font-size:17px;margin-bottom:12px}
  .js:not(.still) .movement .no,.js:not(.still) .movement .fine{display:none}
  .trackin{height:34svh}
  .objs a{font-size:20px}
  .storefront .stage::after{background:linear-gradient(0deg,#0B1022 0%,#0B1022 42%,rgba(11,16,34,0) 56%)}
  .storefront .shopart.wide{display:none}
  .storefront .shopart.tall{display:block;height:50svh;top:var(--bar);bottom:auto}
  .storefront .stage{background:#0B1022}
  .storefront .sub{font-size:17px;margin-bottom:24px}
  .storefront .storefront .ill,.storefront .ill{top:calc(var(--bar) + 8px)}
  .come .two{display:flex;flex-direction:column}
  .come .art{width:46vw;order:-1}
  .js:not(.still) .come .crumbs,.js:not(.still) .come .eyebrow{display:none}
  .js:not(.still) .come h1{font-size:52px;margin-bottom:8px}
  .js:not(.still) .come .sub{margin-bottom:8px}
  .js:not(.still) .come .ride{position:relative;min-height:6.5em;margin:0 0 8px}
  .come .ride li{padding-left:56px}
  .js:not(.still) .come .cta{display:none}
  .faq.num summary{padding-left:48px}
  .faq.num .loop,.faq.num details p{margin-left:48px}
  .qs .rail{left:10px}
  .addr{font-size:34px}
  .bigcall a{font-size:44px}
  .ill{font-size:10px}
}
@media(max-width:767px) and (max-height:700px){.js:not(.still) .trip .ride{min-height:8em}.trip .art{width:min(64vw,34svh)}}

/* reduced motion / Pause: stills only, no loops */
.still .hthread .draw,.still .hero .wrap>*{animation:none}
.still *{scroll-behavior:auto}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------- the Home signature, carried in: gold italic word, motes of gold dust ---------- */
h1 em{font-style:italic;font-weight:300;background:linear-gradient(100deg,#C99A6E 0%,#F6DDB0 22%,#D4A877 40%,#C99A6E 60%,#F6DDB0 80%,#C99A6E 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 9s linear infinite;padding-right:.06em}
.bone h1 em{background-image:linear-gradient(100deg,#7E512D 0%,#B07A48 25%,#6A4323 45%,#7E512D 60%,#A06C3C 80%,#7E512D 100%)}
@keyframes sheen{to{background-position:-250% 0}}
.motes{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.motes i{position:absolute;width:4px;height:4px;border-radius:50%;background:#F6DDB0;box-shadow:0 0 10px 2px rgba(246,221,176,.55);opacity:0;animation:mote 14s linear infinite}
.bone .motes i{background:#B07A48;box-shadow:0 0 8px rgba(176,122,72,.4)}
.motes i:nth-child(1){left:62%;top:70%;animation-delay:0s}.motes i:nth-child(2){left:78%;top:40%;animation-delay:-2s}
.motes i:nth-child(3){left:88%;top:80%;animation-delay:-4s}.motes i:nth-child(4){left:54%;top:30%;animation-delay:-6s;width:3px;height:3px}
.motes i:nth-child(5){left:70%;top:90%;animation-delay:-8s}.motes i:nth-child(6){left:94%;top:20%;animation-delay:-10s;width:2px;height:2px}
.motes i:nth-child(7){left:40%;top:85%;animation-delay:-12s;width:3px;height:3px}.motes i:nth-child(8){left:82%;top:60%;animation-delay:-1s;width:2px;height:2px}
.motes i:nth-child(9){left:66%;top:15%;animation-delay:-3s}.motes i:nth-child(10){left:30%;top:60%;animation-delay:-5s;width:2px;height:2px}
.motes i:nth-child(11){left:58%;top:52%;animation-delay:-7s;width:2px;height:2px}.motes i:nth-child(12){left:90%;top:50%;animation-delay:-9s;width:3px;height:3px}
.motes i:nth-child(13){left:74%;top:24%;animation-delay:-11s}.motes i:nth-child(14){left:48%;top:76%;animation-delay:-13s;width:2px;height:2px}
@keyframes mote{0%{opacity:0;translate:0 0}15%{opacity:.9}70%{opacity:.6}100%{opacity:0;translate:-40px -160px}}
.still .motes i,.still h1 em{animation:none}
.still .motes i{opacity:.5}
@media(max-width:767px){.two>.txt{width:100%;align-self:stretch}.trip .two,.golds .two,.movement .two{align-items:stretch}}
@media(max-width:767px){
  .js:not(.still) .storefront .stage{align-items:flex-end;padding-bottom:calc(var(--mbar) + 8px)}
  .storefront .crumbs{display:none}
  .storefront .wrap{padding-bottom:24px}
  .storefront h1{margin-bottom:12px}
}
@media(max-width:767px){
  .storefront .shopart.tall{height:42svh}
  .storefront .ill{top:calc(var(--bar) + 42svh + 6px)}
}
.pause[hidden]{display:none}

/* ---------- 404 (T192): the thread stops short; every page one tap away ---------- */
.nf .hthread{opacity:.9}
.nf .fray{fill:var(--gold-hi);stroke:none;filter:drop-shadow(0 0 10px rgba(246,221,176,.8));transform-box:fill-box;transform-origin:center;animation:fray-in .6s 3s both,fray 2.4s 3.6s ease-in-out infinite}
@keyframes fray{50%{opacity:.35;transform:scale(.7)}}@keyframes fray-in{from{opacity:0}}
.still .nf .fray{animation:none}
.nfp{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));column-gap:40px;max-width:980px}
.nfp a{display:block;padding:14px 0;font:300 clamp(22px,2.2vw,30px)/1.2 var(--display);color:var(--on-ink);text-decoration:none;border-bottom:1px solid rgba(226,194,156,.22);transition:color .3s,border-color .3s}
.nfp a:hover,.nfp a:focus-visible{color:var(--cu-lt);border-color:var(--cu-lt)}
@media(max-width:767px){.nf .hthread{opacity:.4}.nfp{margin-top:28px}.nfp a{font-size:22px;padding:12px 0}}


/* ===== accepted AI pictures in the heroes (each labelled Illustration) ===== */
.hero>.ill{position:absolute;top:calc(var(--bar) + 16px);bottom:auto;right:var(--g);z-index:2}
.hbg,.hpic{margin:0;pointer-events:none}
.hbg img,.hpic img{display:block;width:100%;height:100%;object-fit:cover}
.hero>.wrap{position:relative;z-index:1}
/* Pawn loans: the gold thread on velvet fills the hero; a navy wash keeps the words readable */
.hbg{position:absolute;inset:0}
.hbg img{object-position:70% 50%}
.hbg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,15,30,.86) 0%,rgba(11,15,30,.55) 45%,rgba(11,15,30,.05) 80%),linear-gradient(0deg,rgba(11,15,30,.8) 0%,rgba(11,15,30,0) 55%)}
/* Gold and Watches: a tall picture beside the words, its edges fading into the page */
.hpic{position:absolute;right:var(--g);top:calc(var(--bar) + 48px);bottom:clamp(48px,8vh,96px);width:min(42vw,620px);-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%)}
.withpic .wrap>*{max-width:min(54%,640px)}
.withpic .wrap>.crumbs{max-width:none}
@media(max-width:767px){
  .hbg img{object-position:62% 50%}
  .hbg::after{background:linear-gradient(0deg,rgba(11,15,30,.92) 0%,rgba(11,15,30,.6) 50%,rgba(11,15,30,.15) 100%)}
  .hero.withpic{flex-direction:column;align-items:stretch;justify-content:flex-end}
  .hpic{position:relative;inset:auto;width:auto;height:32svh;margin:0 var(--g) 4px}
  .withpic .wrap>*{max-width:none}
}

/* ---------- Store: The Counter (static: the shelf index is a row of lit cases; one quiet line of search and selects; dark cases with the photo filling them) ---------- */
.counter{padding:96px 0 88px;background:radial-gradient(120% 60% at 50% 0,#1B2442 0,#0E1325 60%)}
.chead{display:grid;grid-template-columns:auto 1fr;align-items:end;gap:12px 56px;margin:0 0 40px;padding-bottom:28px;border-bottom:1px solid rgba(226,194,156,.22)}
.counter h2{font:300 clamp(44px,5.4vw,88px)/.95 var(--display);letter-spacing:-.035em;margin:0}
.counter .sub{max-width:30em;justify-self:end;text-align:right;color:var(--on-ink-2);margin:0 0 6px;font-size:17px}
.finder[hidden],.lot[hidden],.none[hidden],.clear[hidden]{display:none}
/* the shelf index: each case shows a real photo from that shelf, its name in gold and how many items it holds */
.counter .cases{list-style:none;margin:0 0 28px;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.case{position:relative;display:block;width:100%;aspect-ratio:16/10;padding:0;border:0;border-radius:6px;overflow:hidden;cursor:pointer;background:#0A0E1C;color:#fff;text-align:left;font:inherit;
  box-shadow:inset 0 0 0 1px rgba(226,194,156,.22)}
.case img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62}
.case::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,14,28,0) 30%,rgba(10,14,28,.92) 100%);pointer-events:none}
.case .mosaic{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:1px;background:rgba(226,194,156,.25)}
.case .mosaic img{position:static;width:100%;height:100%;min-height:0}
.case .lbl{position:absolute;left:16px;right:14px;bottom:13px;z-index:1;display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.case .t{font:400 italic clamp(18px,1.45vw,23px)/1.1 var(--display);color:var(--cu-lt)}
.case .n{font:500 12px/1 var(--text);letter-spacing:.14em;color:var(--on-ink-2)}
.case:hover img{opacity:.8}
.case[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--gold-hi),0 18px 40px -20px rgba(246,221,176,.35)}
.case[aria-pressed="true"] img{opacity:.85}
.case[aria-pressed="true"] .t{color:var(--gold-hi)}
.case.dim{opacity:.4}
/* one quiet line: search on the left, the three selects as engraved labels */
.fbar{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:0;border-top:1px solid rgba(226,194,156,.22);border-bottom:1px solid rgba(226,194,156,.22)}
.fbar>*{min-height:64px;display:flex;align-items:center;padding:0 22px;border-left:1px solid rgba(226,194,156,.14)}
.fbar>:first-child{border-left:0;padding-left:4px}
.search{gap:14px}
.search svg{flex:none;width:20px;height:20px;fill:none;stroke:var(--cu-lt);stroke-width:1.6}
.search input{flex:1;min-width:0;height:44px;border:0;background:none;color:#fff;font:400 18px/1 var(--text);outline:none}
.search input::placeholder{color:#9AA0B8}
.search:focus-within{box-shadow:inset 0 -2px 0 var(--cu-lt)}
.pick{position:relative;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px}
.pick span{font:500 11px/1 var(--text);letter-spacing:.2em;text-transform:uppercase;color:var(--cu)}
.pick select{appearance:none;-webkit-appearance:none;width:100%;min-height:28px;padding:0 22px 0 0;border:0;background:none;color:#fff;font:400 16px/1.2 var(--text);cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--cu-lt) 50%),linear-gradient(135deg,var(--cu-lt) 50%,transparent 50%);background-position:calc(100% - 7px) 55%,100% 55%;background-size:7px 7px;background-repeat:no-repeat}
.pick select option{background:#0E1325;color:#fff}
.pick:focus-within{box-shadow:inset 0 -2px 0 var(--cu-lt)}
.tally{display:flex;align-items:baseline;gap:22px;flex-wrap:wrap;margin:22px 0 34px}
.count{margin:0;font:300 italic 22px/1 var(--display);color:var(--cu-lt)}
.count .k{font-style:normal;color:var(--gold-hi)}
.tally .clear{background:none;border:0;padding:0;min-height:44px;font:400 15px var(--text);color:#fff;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.tally .fine{margin:0 0 0 auto;font-size:14px;color:var(--on-ink-2)}
.none{margin:0 0 40px;font-size:18px;color:var(--on-ink-2)}
/* the lots: dark cases, the photo fills the case (no bars), the second photo shows on hover */
.lots{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 22px}
.lot{content-visibility:auto;contain-intrinsic-size:auto 470px;display:flex;flex-direction:column;gap:12px}
.lot .rsv{align-self:flex-start;margin-top:auto;font:500 12px/1 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--cu-lt);text-decoration:none;padding:12px 0 8px;border-bottom:1px solid rgba(226,194,156,.35)}
.lot .rsv:hover,.lot .rsv:focus-visible{color:var(--gold-hi);border-bottom-color:var(--gold-hi)}
/* item page: Reserve this item (T258) */
.reserve{margin:40px 0;padding:32px;border:1px solid rgba(226,194,156,.28);border-radius:16px;background:rgba(255,255,255,.025);scroll-margin-top:calc(var(--bar) + 16px)}
.reserve h2{margin:0 0 8px;font:400 clamp(28px,3vw,40px)/1.1 var(--display);color:var(--gold-hi)}
.reserve>p{margin:0 0 20px;color:var(--on-ink-2)}
.rs-f{margin:0 0 14px;display:flex;flex-direction:column;gap:6px}
.rs-f label{font-size:14px;color:var(--on-ink-2)}
.rs-f input[type=text],.rs-f input[type=tel],.rs-f input[type=email]{font:inherit;color:var(--on-ink);background:rgba(14,19,37,.7);border:1px solid rgba(226,194,156,.3);border-radius:10px;padding:12px 14px;min-height:48px}
.rs-f input:focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px}
.rs-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 14px}
.rs-f input{box-sizing:border-box;width:100%;min-width:0}
.rs-check{flex-direction:row;align-items:flex-start;gap:10px}.rs-check input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--cu-lt);flex:none}
.reserve .iq-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.rs-msg{min-height:1.4em;margin:0 0 8px;color:#F3B9A0}
.rs-done{padding:8px 0 4px}.rs-done h3{margin:0 0 6px;font:400 26px/1.2 var(--display);color:var(--gold-hi)}.rs-done p{margin:0 0 6px}
.rs-payh{margin:28px 0 10px;font:500 13px/1 var(--text);letter-spacing:.16em;text-transform:uppercase;color:var(--cu-lt)}
.rs-pay{margin:0 0 12px;padding-left:22px}.rs-pay li{margin:0 0 8px}
@media(max-width:767px){.reserve{padding:22px 18px}.rs-two{grid-template-columns:1fr}}
.lot a{position:relative;display:flex;flex-direction:column;gap:14px;height:100%;color:#fff;text-decoration:none}
.glass{position:relative;display:block;aspect-ratio:4/5;border-radius:6px;overflow:hidden;background:radial-gradient(90% 80% at 50% 30%,#1D2545,#0A0E1C);box-shadow:inset 0 0 0 1px rgba(226,194,156,.2),0 24px 48px -26px rgba(0,0,0,.8)}
.glass img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lot .alt{position:absolute;left:0;top:0;width:100%;aspect-ratio:4/5;height:auto;object-fit:cover;border-radius:6px;opacity:0;transition:opacity .35s}
.lot a:hover .alt,.lot a:focus-visible .alt{opacity:1}
.glass.mk img{object-fit:contain;padding:8% 8% 34px}
.glass .maker{position:absolute;left:0;right:0;bottom:0;padding:8px 0;text-align:center;font:400 12px/1 var(--text);color:var(--on-ink-2);background:rgba(10,14,28,.7)}
.glass.empty{background:radial-gradient(90% 80% at 50% 30%,#1D2545,#0A0E1C)}
.meta{display:grid;gap:6px}
.meta .sh{font:500 11px/1 var(--text);letter-spacing:.2em;text-transform:uppercase;color:var(--cu)}
.meta .nm{font:400 16px/1.4 var(--text);color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lot a:hover .nm{color:var(--cu-lt)}
.meta .pr{margin-top:2px;font:300 26px/1 var(--display);color:var(--gold-hi)}
@media(max-width:1100px){.counter .cases{grid-template-columns:repeat(4,minmax(0,1fr))}.lots{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:767px){
  .counter{padding:64px 0 56px}
  .chead{grid-template-columns:1fr;padding-bottom:20px;margin-bottom:24px}
  .counter .sub{justify-self:start;text-align:left;font-size:16px}
  .counter .cases{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin:0 -16px 20px;padding:0 16px;scrollbar-width:none}
  .counter .cases::-webkit-scrollbar{display:none}
  .counter .cases li{flex:0 0 46%;scroll-snap-align:start}
  .case{aspect-ratio:4/3}
  .case .lbl{left:12px;bottom:10px}
  .case .t{font-size:17px}
  .fbar{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fbar>.search{grid-column:1/-1;border-left:0;border-bottom:1px solid rgba(226,194,156,.14);padding:0 4px}
  .fbar>*{min-height:58px;padding:0 12px}
  .fbar>.pick:nth-child(2){border-left:0;padding-left:4px}
  .pick select{font-size:14px}
  .fbar>*{padding:0 10px}
  .tally{gap:14px;margin:18px 0 24px}
  .tally .fine{margin:0;flex-basis:100%}
  .lots{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 12px}
  .meta .nm{font-size:14px}
  .meta .pr{font-size:21px}
}

/* item page: the vitrine (one lit case) and the hold card (a cream ticket with a perforated edge) */
.item{padding:calc(var(--bar,72px) + 32px) 0 72px}
.itemgrid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px 64px;align-items:start;margin-top:28px}
.vitrine .glass.big{border-radius:8px;aspect-ratio:1}
.glass.big img{object-fit:contain}
.glass.big .bd{object-fit:cover;filter:blur(28px) brightness(.55);transform:scale(1.15)}
@keyframes sweep{from{transform:translateX(-120%)}to{transform:translateX(120%)}}
.vitrine .more{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.vitrine .more img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:6px;background:#0A0E1C}
.item h1{font:300 clamp(32px,3.4vw,52px)/1.08 var(--display);letter-spacing:-.02em;margin:10px 0 18px}
.item .price{font:300 clamp(40px,4vw,60px)/1 var(--display);color:var(--gold-hi);margin:0 0 8px}
.item .fine{font-size:14px;color:var(--on-ink-2)}
.item .cta{margin:24px 0 36px}
.holdcard{position:relative;margin:0 0 40px;padding:30px 30px 26px;border-radius:10px;background:var(--bone);color:var(--on-bone);scroll-margin-top:96px;
  -webkit-mask:radial-gradient(circle 9px at 0 122px,transparent 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 9px at 100% 122px,transparent 98%,#000) right/51% 100% no-repeat;
  mask:radial-gradient(circle 9px at 0 122px,transparent 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 9px at 100% 122px,transparent 98%,#000) right/51% 100% no-repeat}
.holdcard::before{content:"";position:absolute;left:24px;right:24px;top:122px;border-top:1px dashed rgba(126,81,45,.35)}
.holdcard h2{font:500 12px/1 var(--text);letter-spacing:.18em;text-transform:uppercase;color:var(--cu-dk);margin:0 0 10px}
.holdcard .no{font:300 56px/1 var(--display);letter-spacing:.04em;margin:0 0 40px;color:var(--on-bone)}
.holdcard .big{font:400 19px/1.45 var(--text);margin:0 0 10px}
.holdcard p{margin:0 0 6px}
.holdcard .fine{color:#41455A;margin-top:14px}
.holdcard:target{box-shadow:0 0 0 2px var(--gold-hi),0 0 40px rgba(246,221,176,.35)}
.cond h2{font:300 italic 26px/1.2 var(--display);color:var(--cu-lt);margin:0 0 12px}
.cond p{color:var(--on-ink-2);max-width:40em}
.cond h3{font:500 12px/1.4 var(--text);letter-spacing:.2em;text-transform:uppercase;color:var(--cu-lt);margin:24px 0 6px}
.cond h3+p{margin-top:0}
@media(max-width:899px){.itemgrid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.bezel .turn,.glass::after{transition:none}.vitrine .glass.big::after{animation:none}}
.still .bezel .turn,.still .glass::after{transition:none}.still .vitrine .glass.big::after{animation:none}

/* ===== the accepted pictures as short loops (owner 2026-10-21; clips.js): the still stays underneath, the clip fades in once it plays ===== */
.hbg .clip,.hpic .clip{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .9s var(--ease)}
.hbg .clip.on,.hpic .clip.on{opacity:1}
.hbg .clip{object-position:70% 50%}
.hbg::after{z-index:1}
/* We buy: the solitaire on bone paper fills the right side (same treatment as Gold and Watches) */
@media(max-width:767px){.hbg .clip{object-position:62% 50%}}


/* the Sound button (sfx.js shows it): quiet sound effects, off until pressed; icon only below desktop width (its name is in aria-label) */
.sound{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:44px;padding:0 16px;border:1px solid rgba(255,255,255,.26);border-radius:999px;background:none;color:var(--on-ink-2);font:500 12px/1 var(--text);letter-spacing:.2em;text-transform:uppercase;cursor:pointer}
.sound[hidden]{display:none}
.sound:hover,.sound[aria-pressed="true"]{color:#fff;border-color:var(--cu-lt)}
.sound svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.sound .w{opacity:.35;transition:opacity .4s}
.sound[aria-pressed="true"] .w{opacity:1}
@media(max-width:1099px){.sound{padding:0;width:44px}.sound span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}

/* Google rating (T214, T247): one linked item on the hero line, and the proof (five gold-line stars that fill to the rating as it comes into view, then the dated line).
   Gold line art like the rest of the site, no logo. JS off, reduced motion and still: the stars are already filled. */
.eyebrow:has(.rv-wrap){flex-wrap:wrap;row-gap:7px}.eyebrow:has(.rv-wrap)>span{white-space:nowrap}
.eyebrow .rv-wrap{display:contents}.eyebrow .rv-wrap>[aria-hidden]{display:none}.eyebrow .rv-wrap::before{content:"";flex-basis:100%;height:0}
.eyebrow .rv-g{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;width:max-content;max-width:100%;letter-spacing:.24em;color:inherit;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;padding-bottom:3px;transition:background-size .5s ease,color .3s ease}
.eyebrow .rv-g:hover,.eyebrow .rv-g:focus-visible{color:var(--gold-hi);background-size:100% 1px}
.eyebrow .rv-star{width:12px;height:12px;flex:none;fill:var(--gold-hi);filter:drop-shadow(0 0 6px rgba(246,221,176,.55))}
.rv-proof{margin:6px 0 30px}
.rv-proof a{display:inline-flex;flex-direction:column;gap:12px;color:inherit;text-decoration:none}
.rstars{position:relative;display:block;width:clamp(132px,11vw,168px);aspect-ratio:126/24}
.rstars svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.rstars .o{fill:none;stroke:var(--cu-lt);stroke-width:.9;stroke-linejoin:round;opacity:.55}
.rstars .g{fill:var(--gold-hi);stroke:var(--gold-hi);stroke-width:.9;stroke-linejoin:round;clip-path:inset(0 calc((1 - var(--f)) * 100%) 0 0)}
.js .rv-proof .rstars .g{clip-path:inset(0 100% 0 0);transition:clip-path 1.8s cubic-bezier(.3,.7,.2,1) .25s}
.js .rv-proof.in .rstars .g,.js .rv-proof.on .rstars .g,.still .rv-proof .rstars .g{clip-path:inset(0 calc((1 - var(--f)) * 100%) 0 0)}
.rv-line{font:300 clamp(18px,1.5vw,22px)/1.3 var(--display);color:var(--on-ink-2);background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;padding-bottom:4px;transition:background-size .5s ease,color .3s ease}
.rv-proof a:hover .rv-line,.rv-proof a:focus-visible .rv-line{color:var(--gold-hi);background-size:100% 1px}
.bone .rv-line{color:var(--on-bone-2)}
.bone .rstars .o{stroke:var(--cu-dk)}
.bone .rstars .g{fill:var(--cu);stroke:var(--cu);filter:none}
.bone .eyebrow .rv-star{fill:var(--cu-dk);filter:none}
@media(max-width:767px){.eyebrow:has(.rv-wrap)>span{white-space:normal}.eyebrow .rv-g{letter-spacing:.14em}}
@media(prefers-reduced-motion:reduce){.js .rv-proof .rstars .g{transition:none;clip-path:inset(0 calc((1 - var(--f)) * 100%) 0 0)}.eyebrow .rv-g,.rv-line{transition:none}}
.close .rv-proof{margin:0 0 30px}.close .rv-proof a{align-items:center}

/* ---------- Store: one page in front of the shop. The lit hero hands over to the same front with its lights down (.shopghost, fixed);
   every section after it is see-through, so the page reads as one walk past the window down to the door and the map ---------- */
.shopghost{position:fixed;inset:0;z-index:0;pointer-events:none;contain:strict;background:radial-gradient(90% 70% at 62% 100%,#151C36 0,var(--ink) 70%)}
.shopghost svg{position:absolute;inset:0;width:100%;height:100%;display:block;fill:none;stroke:rgba(226,194,156,.17);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.shopghost .gw{fill:rgba(217,154,91,.035)}
.shopghost .gb{fill:rgba(255,255,255,.012)}
.shopghost .gl{fill:rgba(246,221,176,.35);stroke:none}
.shopghost .tall{display:none}
.pg-store main>.sc{z-index:1}
.pg-store main>.sc:not(.storefront){background:transparent}
.pg-store main>.sc+.sc{border-top:0}
.pg-store .counter{background:linear-gradient(180deg,var(--ink) 0,rgba(14,19,37,.55) 360px,rgba(14,19,37,.35) 100%)}
.pg-store main~.foot{position:relative;z-index:2}
.pg-store .fbar{background:rgba(14,19,37,.88)}
.pg-store .walk h2,.pg-store .walk .addr,.pg-store .close .addr{text-shadow:0 2px 24px rgba(14,19,37,.9)}
@media(max-width:767px){
  .shopghost .wide{display:none}
  .shopghost .tall{display:block;bottom:var(--mbar);height:auto;top:auto;aspect-ratio:1040/560}
  .shopghost svg{stroke-width:3}
}

/* ---------- Pawn loans: one page flowing over the necklace (a pre-drawn picture sequence on one fixed canvas, flow.js) ---------- */
.flow{position:relative;background:#050508}
.necklace{position:fixed;inset:0;z-index:0;pointer-events:none;--dim:0}
.necklace picture,.necklace .still,.necklace canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.necklace .still{object-fit:cover;transition:opacity .8s var(--ease)}
/* the picture sequence's two layers (/v6/flow.js; also the FAQ safe and the Privacy vault): phones keep the scene at the top, the words below */
[data-flow] .fr{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;opacity:0}[data-flow] .fr+.fr{will-change:opacity}   /* only the fading layer gets its own GPU layer: phones drop idle layers when there are too many */
.necklace canvas{opacity:0}
[data-flow].live .fr:first-of-type{opacity:1;transition:opacity .8s var(--ease)}.necklace.live .still{opacity:0}
@media (max-width:767px){[data-flow] .fr{object-position:50% 0}}
/* the words stand on the left (computers) or below the chain (phones): a soft shade there, deeper while a busy section is read (--dim) */
.necklace .scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,5,8,.86) 0%,rgba(5,5,8,.62) 34%,rgba(5,5,8,.12) 60%,rgba(5,5,8,0) 75%);}
.necklace .scrim::after{content:"";position:absolute;inset:0;background:rgba(5,5,8,.78);opacity:var(--dim)}
.flow>.sc{background:transparent;border:0;position:relative;z-index:1}
.flow>.sc+.sc{border-top:0}
.flow .fl{min-height:92vh;display:flex;align-items:center}
.flow .fl>.wrap{width:100%}
.flow .fl h2,.flow .fl .lead,.flow .fl .detail,.flow .fl .metal,.flow .nos{max-width:min(600px,46vw)}
.flow .hero{min-height:100vh;min-height:100svh}
.flow .hero .wrap>*{max-width:min(700px,52vw)}
.flow .lead{font-size:clamp(19px,1.6vw,23px);color:var(--on-ink);margin:0}
.flow .detail{color:var(--on-ink-2)}
.flow .metal{margin:0}
.flow .metal .m-yellow.on{color:#F3D27A}.flow .metal .m-white.on{color:#ECEAE4}.flow .metal .m-rose.on{color:#F0B49C}
.flow .metal span{transition:color 1.2s var(--ease)}
.flow .own .statement{color:var(--cu-lt)}
.flow .own .trio li{color:var(--on-ink-2);border-top-color:rgba(226,194,156,.25)}
.flow .own .ic{stroke:var(--cu-lt)}
/* the necklace stays behind the page's own content: the footer covers it */
main:has(.flow)~.foot{position:relative;z-index:2}
.flow .coins .two,.flow .watchline .two{align-items:center}
.flow .watchline .art{max-width:min(46vh,380px)}
.flow .trip,.flow .faqs,.flow .bring{min-height:0}
.flow h2,.flow .statement,.flow .lead{text-shadow:0 2px 24px rgba(5,5,8,.8)}
@media(max-width:767px){
  .necklace .scrim{background:linear-gradient(180deg,rgba(5,5,8,.1) 0%,rgba(5,5,8,.35) 34%,rgba(5,5,8,.86) 60%,rgba(5,5,8,.92) 100%)}
  .flow .fl{align-items:flex-end;min-height:96svh;padding-bottom:calc(var(--mbar) + 6vh)}
  .flow .fl h2,.flow .fl .lead,.flow .fl .detail,.flow .fl .metal,.flow .nos,.flow .hero .wrap>*{max-width:none}
  .flow .hero{align-items:flex-end}
}

/* gold coins and wafers: generic pieces, fine gold line art */
.coinpic img{width:100%;max-width:620px;height:auto;display:block;margin:0 auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,.55))}
.js:not(.still) .coinpic{opacity:0;transform:translateY(28px) scale(.97);transition:opacity .9s ease,transform 1.4s cubic-bezier(.2,.7,.3,1)}
.js:not(.still) .coinpic.on{opacity:1;transform:none}

/* Luxury watches: the watch behind the whole page (dialBg in pages.mjs, watchflow.js). Each layer is its own plane; only transforms change */
.wflow{background:#06080F}
.dialbg{position:fixed;inset:0;z-index:0;pointer-events:none;--dim:0;--D:min(122vmin,1180px);overflow:hidden}
.dialbg .dw{position:absolute;width:var(--D);height:var(--D);left:calc(100vw - var(--D) * .74);top:calc(50vh - var(--D) / 2)}
.dialbg .dl{position:absolute;inset:0;width:100%;height:100%;overflow:visible;will-change:transform;transform-origin:50% 50%;opacity:var(--dial,1)}
.dialbg .df{will-change:auto}   /* the face never turns: no layer of its own (phones drop idle layers when there are too many) */
.dialbg .mv{position:absolute;border-radius:50%;overflow:hidden;background:#0B0F1E;will-change:transform;transform-origin:50% 50%;box-shadow:0 0 0 2px rgba(226,194,156,.75);
  left:36.45%;top:52.58%;width:27.1%;height:27.1%}   /* the movement, seated in the heart window: centre (0, 100), r 84 of the 620 viewBox (watchflow.js sizes it for the opening) */
.dialbg .mv img,.dialbg .mv video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.dialbg .mv video{opacity:0;transition:opacity .8s var(--ease)}.dialbg .mv video.on{opacity:1}
.dialbg .dh{transform:rotate(305deg)}.dialbg .dm{transform:rotate(60deg)}
.dialbg .ds{animation:hand 60s linear infinite}
.still .dialbg .ds{animation:none;transform:rotate(42deg)}
.dialbg .scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,8,15,.9) 0%,rgba(6,8,15,.66) 36%,rgba(6,8,15,.14) 62%,rgba(6,8,15,0) 76%)}
.dialbg .scrim::after{content:"";position:absolute;inset:0;background:rgba(6,8,15,.8);opacity:var(--dim)}
.wflow .wlend .brands{max-width:min(600px,46vw);font:italic 400 clamp(22px,2.1vw,30px)/1.45 var(--display);color:var(--cu-lt)}
.wflow .wlend .no,.wflow .wlend .fine{max-width:min(600px,46vw)}
.wflow .how{min-height:0}
.wflow .reads li{color:var(--on-ink-2)}.wflow .reads li.on{color:var(--on-ink)}
.wflow h2,.wflow .brands{text-shadow:0 2px 24px rgba(6,8,15,.85)}
/* What to bring: three pictures side by side, each over its line (bringList in pages.mjs); watchflow.js drops each in and ticks it */
.bring3{list-style:none;margin:clamp(24px,4vh,48px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,48px);counter-reset:none}
.bring3 li{margin:0;padding:0;border:0}
.bring3 .bi{position:relative;aspect-ratio:1;max-width:min(300px,40vh);margin:0 auto}
.bring3 .bi img{position:relative;width:100%;height:100%;display:block;will-change:transform}
.bring3 .bi .bsh{position:absolute;inset:0;width:100%;height:100%;display:block;transform-origin:50% 60%;will-change:transform,opacity}
.bring3 .tick{position:absolute;right:4%;top:6%;width:15%;min-width:30px;transform:scale(1);transition:transform .55s cubic-bezier(.34,1.8,.5,1),opacity .3s}
.bring3 .tick circle{fill:var(--gold-hi)}.bring3 .tick path{fill:none;stroke:#0B0F1E;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.js:not(.still) .bring3 li:not(.ok) .tick{transform:scale(0);opacity:0}
.bring3 p{margin:14px auto 0;max-width:30ch;text-align:center;color:var(--on-ink);font-size:clamp(16px,1.2vw,19px);line-height:1.5}
/* Pawn loans: four in a row; no standing layer hints (the necklace film behind is already on its own layers, and iPhone drops idle layers past its budget) */
.bring3.four{grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,40px)}
.bring3.four .bi img,.bring3.four .bi .bsh{will-change:auto}
@media(max-width:767px){
  .dialbg{--D:132vw}
  .dialbg .dw{left:calc(50vw - var(--D) / 2);top:calc(var(--bar) + 2svh)}
  .dialbg .scrim{background:linear-gradient(180deg,rgba(6,8,15,.08) 0%,rgba(6,8,15,.3) 34%,rgba(6,8,15,.86) 58%,rgba(6,8,15,.94) 100%)}
  .wflow .wlend .brands,.wflow .wlend .no,.wflow .wlend .fine{max-width:none}
  .dialbg .scrim::after{background:rgba(6,8,15,.97)}
  .wbring .two{display:flex;flex-direction:column;gap:20px}
  .bring3,.bring3.four{grid-template-columns:1fr;gap:8px}
  .bring3 li{display:grid;grid-template-columns:120px 1fr;align-items:center;gap:14px}
  .bring3 .bi{width:120px}
  .bring3 p{margin:0;text-align:left}
}
/* the online quote request: the third way in, on every page (scripts/intake.mjs) */
.cta .btn.online{border-style:dashed;border-color:rgba(226,194,156,.55)}

/* ---------- both buttons on every first screen (Roast Room 2026-10-26): "Come in for a free quote" and Call show without scrolling, on a laptop at 150% and on a phone ---------- */
@media(min-width:768px) and (max-height:760px){
  .hero{padding:calc(var(--bar) + 20px) 0 32px}
  .hero h1,.storefront h1{font-size:clamp(56px,min(11vw,14vh),196px);margin-bottom:16px}
  .hero .crumbs ol,.storefront .crumbs ol{margin-bottom:clamp(16px,4vh,40px)}
  .hero .eyebrow,.storefront .eyebrow{margin-bottom:16px}
  .hero .sub,.storefront .sub{margin-bottom:22px}
}
@media(max-width:767px){
  .hero{padding-bottom:calc(var(--mbar) + 20px)}
  .hero .crumbs ol{margin-bottom:24px}
  .hero .eyebrow{margin-bottom:16px}
  .hero h1{margin-bottom:16px}
  .hero .sub{margin-bottom:22px}
  .hero .cta,.storefront .cta{gap:10px}
  .qlink{margin-top:12px}
  /* Store: the lit shop front as a band over the title, not a whole screen, so the title, both buttons and the first cases show on screen one */
  .js:not(.still) .storefront.pin{height:auto}
  main>.sc.storefront.pin{padding:0} /* same top before the script runs and in still mode, so the band never jumps up on load (layout shift) */
  .storefront .stage,.js:not(.still) .storefront.pin>.stage{position:relative;height:auto;min-height:0;display:block;padding:var(--bar) 0 0}
  .storefront .eyebrow{display:none}
  .storefront~.counter{padding-top:24px}
  .storefront .shopart.tall{position:relative;inset:auto;height:18svh;width:100%;overflow:hidden}
  .storefront .stage::after{content:none}
  .storefront .wrap{padding:20px var(--g) 8px}
  .storefront h1{font-size:60px;margin-bottom:10px}
}
/* Pawn loans on a phone: How it works shows all four steps together, without the logo wheel (Roast Room 2026-10-26); the computer keeps the wheel */
@media(max-width:767px){
  .flow .trip.pin{--len:1!important}
  .trip .loopart{display:none}
  .trip .art{width:100%;align-self:stretch;max-width:none}
  .trip .two{flex-direction:column}
  .trip .term-t{opacity:1;transform:none;margin:8px 0 0;text-align:left;font-size:15px}
  .js:not(.still) .trip .ride{min-height:0}
  .js:not(.still) .trip .ride li{position:relative;opacity:1;color:#fff;border-top:1px solid rgba(226,194,156,.18)}
  .js:not(.still) .trip .ride li:not(.on){color:#fff}
  .trip .ride li::before{background:var(--cu-lt);color:var(--ink);border-color:var(--cu-lt)}
}