/* /p/piece.css — one stylesheet for every piece page (a388). Generated by
   build-share-pages.mjs; edit the modules it is assembled from, not this file. */
:root{
  --jd-purple:#320542; --jd-purple-2:#4a1660; --jd-purple-accent:#806296;
  --jd-ivory:#F2EEE6; --jd-cream:#FBF8F1; --jd-blush:#EBD9D6;
  --jd-dark:#1d0226; --jd-white:#FFFFFF;
  --jd-velvet:#1a0221; --jd-velvet-lift:#220330; --jd-velvet-deep:#0e0013;
  --jd-gold:#FFDB78; --jd-gold-deep:#C99A3F;
  --jd-line:rgba(50,5,66,.14);
  --shadow-soft:0 18px 40px -22px rgba(50,5,66,.35);
  --serif:'Cormorant Garamond','Times New Roman',serif;
  --sans:'Montserrat',sans-serif;
  --gutter:clamp(1.25rem,4vw,4rem); --maxw:1320px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body.pp-page{background:var(--jd-ivory);color:var(--jd-dark);font-family:var(--sans);-webkit-font-smoothing:antialiased}
.pp-page img{max-width:100%}
.pp-page a{color:inherit;text-decoration:none}
.pp-page button{font:inherit;cursor:pointer}

/* ───── The piece popup ───── */
.pdp-overlay{position:fixed;inset:0;background:rgba(15,1,21,.72);z-index:120;
  display:none;overflow-y:auto;padding:clamp(1rem,4vw,3rem)}
.pdp-overlay.open{display:block}
.pdp{max-width:1080px;margin:0 auto;background:var(--jd-cream);border-radius:6px;
  overflow:hidden;position:relative;box-shadow:0 40px 90px -40px rgba(15,1,21,.7)}
.pdp-close{position:absolute;top:.9rem;right:1.2rem;font-size:2rem;line-height:1;
  color:var(--jd-purple);z-index:3;background:none;border:0;cursor:pointer;padding:0 .3rem}
.pdp-close:focus-visible{outline:2px solid var(--jd-gold-deep);outline-offset:2px}
.pdp-grid{display:grid;grid-template-columns:1fr 1fr}
/* a391: a grid column is as wide as its widest child wants unless told
   otherwise, and six thumbs want 417px; on a 412px phone that pushed the
   whole panel past the edge in Android's Chrome (Brandon's screenshot,
   2026-10-02), while Safari happened to clamp it. The strip scrolls inside
   the column now, on every browser. */
.pdp-grid>*{min-width:0}
.pdp-media{background:var(--jd-white);padding-bottom:.8rem}
.pdp-shot{background:var(--jd-white);aspect-ratio:1/1;position:relative;cursor:zoom-in}
.pdp-shot img{width:100%;height:100%;object-fit:contain}
.pdp-zoom{position:absolute;bottom:.9rem;right:.9rem;background:rgba(26,2,33,.7);
  color:var(--jd-blush,#f6eef8);font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;
  padding:.4rem .8rem;border-radius:999px;font-weight:600}
.pdp-thumbs{display:flex;gap:.5rem;padding:.8rem .9rem 0;overflow-x:auto}
.pdp-thumbs button{flex:0 0 58px;height:58px;border:1px solid var(--jd-line);
  border-radius:3px;overflow:hidden;background:var(--jd-white);padding:0;cursor:pointer;
  transition:border-color .2s ease}
.pdp-thumbs button img{width:100%;height:100%;object-fit:contain}
.pdp-thumbs button[aria-current="true"]{border-color:var(--jd-gold-deep);border-width:2px}
.pdp-thumbs button:focus-visible{outline:2px solid var(--jd-gold-deep);outline-offset:2px}
.pdp-panel{padding:clamp(1.8rem,3.4vw,2.8rem)}
.pdp-eyebrow{font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--jd-gold-deep);font-weight:600;margin:0 0 .6rem}
.pdp-panel h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,3vw,2.3rem);
  line-height:1.1;margin:0 0 .7rem;color:var(--jd-purple)}
.pdp-price{font-family:var(--serif);font-size:1.6rem;color:var(--jd-price);
  margin:0 0 .3rem;font-weight:500;font-variant-numeric:tabular-nums}
.pdp-price-note{font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--jd-purple-accent);margin:0 0 1.2rem;font-weight:500}
.pdp-desc{font-size:.93rem;line-height:1.8;color:#3d2247;margin:0 0 1.4rem}

.pdp-rule{width:74px;height:1px;background:var(--jd-gold-deep);margin:1rem 0 1.1rem}
.pdp-sub{font-size:.76rem;color:var(--jd-purple-accent);margin:0 0 1.5rem;letter-spacing:.04em}
.pdp-specs{margin:0 0 1.5rem}
.spec-row{display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;
  padding:.8rem 0;border-bottom:1px solid var(--jd-line)}
.spec-row:first-of-type{border-top:1px solid var(--jd-line)}
.spec-row dt{font:600 .6rem var(--sans);letter-spacing:.2em;text-transform:uppercase;
  color:var(--jd-purple-accent)}
.spec-row dd{margin:0;font-size:.88rem;color:var(--jd-dark);text-align:right}
.pdp-visit{margin:.9rem 0 0;font-size:.78rem;color:#4a2557;text-align:center;line-height:1.6}
.pdp-visit b{color:var(--jd-purple);font-weight:600}

.pdp-cta{display:block;width:100%;box-sizing:border-box;text-align:center;
  padding:1rem 2rem;margin-top:1.8rem;border:0;border-radius:999px;cursor:pointer;
  font:600 .78rem var(--sans);letter-spacing:.18em;text-transform:uppercase;
  background:var(--jd-purple);color:var(--jd-white);
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease}
.pdp-cta:hover{background:var(--jd-purple-2);transform:translateY(-2px);
  box-shadow:0 14px 30px -14px rgba(50,5,66,.7)}
.pdp-cta:focus-visible{outline:2px solid var(--jd-gold-deep);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.pdp-cta{transition:none}.pdp-cta:hover{transform:none}}

.pdp-ref{margin-top:1.4rem;padding-top:1rem;border-top:1px solid var(--jd-line);
  font-size:.76rem;letter-spacing:.04em;color:var(--jd-purple-accent)}

/* Gabriel's variant selectors, values unchanged. A row shows even when it has
   one option: on a piece made exactly one way it is the only thing stating
   the metal. */
.opt-row{margin:1.15rem 0 0}
.opt-label{display:block;font:600 .6rem var(--sans);letter-spacing:.2em;
  text-transform:uppercase;color:var(--jd-purple-accent);margin:0 0 .5rem}
.opt-set{display:flex;flex-wrap:wrap;gap:.4rem}
.opt{font:600 .68rem var(--sans);letter-spacing:.08em;color:var(--jd-purple);
  background:#fff;border:1px solid var(--jd-line);border-radius:999px;
  padding:.5rem .9rem;cursor:pointer;transition:border-color .2s ease,background .2s ease}
.opt:hover{border-color:var(--jd-gold-deep)}
.opt:focus-visible{outline:2px solid var(--jd-gold-deep);outline-offset:2px}
.opt.on{background:var(--jd-purple);border-color:var(--jd-purple);color:#fff}
.opt.dim{color:var(--jd-purple-accent);border-style:dashed;opacity:.75}
.opt.dim:hover{opacity:1}

/* The two doors out of the popup: share this piece, or go to the house it
   came from. Secondary controls, but never faint — Brandon has struck quiet
   buttons three times. Purple text on a gold border. */
.pdp-tools{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.1rem}
.pdp-tool{font:600 .66rem var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--jd-purple);background:#fff;border:1px solid var(--jd-gold-deep);
  border-radius:999px;padding:.62rem 1.1rem;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;gap:.4rem;
  transition:background .2s ease,color .2s ease}
.pdp-tool:hover{background:var(--jd-purple);border-color:var(--jd-purple);color:#fff}
.pdp-tool:focus-visible{outline:2px solid var(--jd-gold-deep);outline-offset:2px}
.pdp-tool.done{background:var(--jd-purple);border-color:var(--jd-purple);color:#fff}

.lb{position:fixed;inset:0;background:rgba(10,0,14,.92);z-index:200;display:none;
  align-items:center;justify-content:center;padding:2rem;cursor:zoom-out}
.lb.open{display:flex}
.lb img{max-width:100%;max-height:100%;object-fit:contain}
.lb-close{position:absolute;top:1rem;right:1.6rem;font-size:2.4rem;line-height:1;
  color:#fff;background:none;border:0;cursor:pointer}
@media (max-width:820px){.pdp-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.opt,.pdp-tool,.pdp-thumbs button{transition:none}}

.j-breadcrumb{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--jd-purple-accent);font-weight:500;display:flex;flex-wrap:wrap;gap:.55rem;align-items:center;margin-bottom:2.2rem}
.j-breadcrumb a:hover{color:var(--jd-gold-deep)}
.j-breadcrumb .sep{opacity:.4}
.j-breadcrumb a{color:inherit;text-decoration:none;transition:color .2s ease}
.j-breadcrumb a:focus-visible{outline:2px solid var(--jd-gold);outline-offset:3px}
.j-breadcrumb a:active{color:var(--jd-gold)}
.sv-meta .j-breadcrumb{margin:0 auto 0 0}
.fs-bar .j-breadcrumb{margin:0}
.crumb-row{display:flex;align-items:center;margin:0;padding:.5rem 0;box-sizing:border-box}
.crumb-row .j-breadcrumb{margin:0}
.sv-body.crumbed{padding-top:0}
.sv-body.crumbed>.shell>.crumb-row{min-height:clamp(2.5rem,5vw,4rem)}
.crumb-row.in-gap{min-height:clamp(2rem,4vw,3rem);margin-bottom:calc(-1 * clamp(2rem,4vw,3rem))}

/* THE LAUNCHER HAS TO GO WHILE THE DRAWER IS OPEN, for the same reason it
   goes for the filter sheet: Luxe mounts at z-index 2,147,483,646 and nothing
   inside the page can outrank it. On the house pages it sat squarely over the
   "Also here" group — real links to the other three houses, covered by a chat
   bubble. Matched by id AND by module prefix, because the widget appends a
   build hash to its class names but the prefix is stable. */
body.dw-open #chat-widget-container,
body.dw-open [class*="chat-widget-module__chatContainer"],
body.dw-open [class*="chat-button-module__chatButton"]{display:none !important}
.menu-overlay{position:fixed;inset:0;background:rgba(15,1,21,.55);
  backdrop-filter:blur(4px);opacity:0;pointer-events:none;
  transition:opacity .35s ease;z-index:300}
.menu-overlay.open{opacity:1;pointer-events:auto}
.nav-menu{position:fixed;top:0;right:0;height:100%;width:min(400px,88vw);
  background:var(--dw-bg,var(--jd-cream,#FBF8F1));z-index:301;
  padding:4.5rem 2.2rem 2rem;overflow-y:auto;-webkit-overflow-scrolling:touch;
  transform:translateX(100%);transition:transform .4s cubic-bezier(.2,.7,.2,1);
  box-shadow:-24px 0 60px -30px rgba(26,2,33,.5)}
.nav-menu.open{transform:none}
/* The panel is off-screen, not hidden, so its links stay in the tab order and
   a keyboard can walk into a menu nobody opened. Only reachable when open. */
.nav-menu:not(.open){visibility:hidden}
.nav-menu.open{visibility:visible}
@media (prefers-reduced-motion:reduce){
  .nav-menu{transition:none}
  .menu-overlay{transition:none}
}
.menu-close{position:absolute;top:1.3rem;right:1.6rem;font-size:2rem;
  line-height:1;color:var(--dw-ink,var(--jd-purple,#320542));background:none;
  border:0;cursor:pointer;font-family:inherit;width:2.2rem;height:2.2rem;
  display:grid;place-items:center;border-radius:999px;
  transition:background .3s ease}
.menu-close:hover{background:rgba(50,5,66,.08)}
.menu-close:focus-visible{outline:2px solid var(--dw-accent,var(--jd-gold-deep,#C99A3F));
  outline-offset:2px}
.menu-group{margin-bottom:2rem;display:flex;flex-direction:column;gap:.55rem}
.menu-label{font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--dw-accent,var(--jd-gold-deep,#C99A3F));margin:0 0 .5rem;font-weight:600}
.menu-group a,.menu-group button{font-family:var(--serif);font-size:1.25rem;
  color:var(--dw-ink,var(--jd-purple,#320542));text-align:left;background:none;
  border:0;cursor:pointer;padding:0;transition:color .2s ease}
.menu-group a:hover,.menu-group button:hover{color:var(--dw-accent,var(--jd-gold-deep,#C99A3F))}
.menu-group a:focus-visible,.menu-group button:focus-visible{
  outline:2px solid var(--dw-accent,var(--jd-gold-deep,#C99A3F));outline-offset:3px}
.menu-meta,.menu-group .menu-meta{font-family:var(--sans);font-size:.6rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--dw-quiet,#6d5a76);
  margin-left:.5rem;font-weight:500}

:root{--jd-velvet-lift:#220330;--jd-velvet:#1a0221;--jd-velvet-deep:#0e0013;--jd-ivory:#F2EEE6;--gutter:clamp(1.25rem, 4vw, 4rem);--jd-gold:#FFDB78;--jd-purple:#320542;--jd-line:rgba(50,5,66,.14);--serif:'Cormorant Garamond', 'Times New Roman', serif;--sans:'Montserrat', sans-serif;--jd-purple-accent:#806296;--jd-gold-deep:#C99A3F;--maxw:1320px;--jd-cream:#FBF8F1;--jd-blush:#EBD9D6;--shadow-purple:0 30px 60px -25px rgba(50,5,66,.45), 0 12px 24px -12px rgba(50,5,66,.25);--jd-price:#663399}
/* index.html — base header */
.top-bar{
  /* Identical to the Hub's .jd-case chrome — same two glows, same three-stop
     ramp, same angle. The two products read as one system. */
  background:
    radial-gradient(120% 180% at 15% -40%, rgba(128,98,150,.28), transparent 55%),
    radial-gradient(140% 200% at 85% -60%, rgba(74,22,96,.55), transparent 60%),
    linear-gradient(160deg, var(--jd-velvet-lift) 0%, var(--jd-velvet) 58%, var(--jd-velvet-deep) 100%);
  color:var(--jd-ivory);
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  padding:.7rem var(--gutter);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.top-bar a{opacity:.86;transition:opacity .25s ease}
.top-bar a:hover{opacity:1;color:var(--jd-gold)}
.top-locs{display:flex;gap:1.2rem;align-items:center}
.top-locs .sep{opacity:.4}
.book-pill{
  display:inline-flex;align-items:center;gap:.55rem;
  border:1px solid rgba(255,219,120,.55);
  color:var(--jd-gold);
  padding:.5rem 1.05rem;
  border-radius:999px;
  letter-spacing:.22em;
  font-weight:500;
  font-size:.66rem;
  transition:background .3s ease, color .3s ease, border-color .3s ease, transform .25s ease;
}
.book-pill:hover{background:var(--jd-gold);color:var(--jd-purple);border-color:var(--jd-gold);transform:translateY(-1px)}
.book-pill svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}

.nav-row{
  background:var(--jd-ivory);
  border-bottom:1px solid var(--jd-line);
  padding:1.1rem var(--gutter);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:1.5rem;
  position:sticky;top:0;z-index:80;
  backdrop-filter: blur(12px);
  background:rgba(242,238,230,.92);
}
.brand{
  display:flex;align-items:center;gap:.85rem;justify-self:start;
}
.brand img{height:38px;width:auto;max-width:none}
.brand-mark{
  font-family:var(--serif);
  font-size:1.1rem;
  letter-spacing:.06em;
  color:var(--jd-purple);
  display:flex;flex-direction:column;line-height:1;
}
.brand-mark .small{font-family:var(--sans);font-size:.55rem;letter-spacing:.42em;color:var(--jd-purple-accent);margin-top:5px;font-weight:600}

.nav-links{
  display:flex;gap:2rem;align-items:center;justify-self:center;
  font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;font-weight:500;
}
.nav-links a{position:relative;padding:.4rem 0;color:var(--jd-purple)}
.nav-links a::after{
  content:"";position:absolute;left:50%;bottom:0;width:0;height:1px;background:var(--jd-gold-deep);
  transition:width .35s cubic-bezier(.2,.7,.2,1), left .35s cubic-bezier(.2,.7,.2,1);
}
.nav-links a:hover::after{width:100%;left:0}
.nav-links a.active{color:var(--jd-purple)}
.nav-links a.active::after{width:100%;left:0;background:var(--jd-gold-deep)}

.nav-tools{display:flex;gap:1rem;align-items:center;justify-self:end;color:var(--jd-purple)}
.nav-tools .icon-btn{width:38px;height:38px;display:grid;place-items:center;border-radius:999px;transition:background .3s ease,transform .25s ease}
.nav-tools .icon-btn:hover{background:rgba(50,5,66,.06);transform:translateY(-1px)}
/* SKIP LINK + VISUALLY-HIDDEN LABEL (a226). These live INSIDE the lifted
   base-header range on purpose: the first attempt put them lower in the
   stylesheet, outside the range tools/lift-home-chrome.mjs harvests, and the
   markup travelled to every page while the styles did not — so the skip link
   sat VISIBLE in the corner of all 30 built pages. Caught by tabbing it in a
   browser, not by grepping for the class. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:10000;
  background:var(--jd-purple);color:var(--jd-ivory);
  padding:.85rem 1.4rem;border-radius:0 0 4px 0;
  font-family:var(--sans);font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;font-weight:600;text-decoration:none}
.skip-link:focus{left:0}
.skip-link:focus-visible{outline:2px solid var(--jd-gold);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* ANCHORS LAND BELOW THE STICKY NAV. The nav row is sticky and 73-81px tall,
   so a fragment link (#care-plan, #builder, #reviews, #destinations, #visit)
   scrolled its target's top edge under the bar and the block arrived with its
   heading cut off (Brandon, 2026-09-09, from the footer). One rule on the
   targeted element covers every anchor on every page that wears this chrome;
   110px matches the offset the services cards already carried. This sits
   inside the header range the lift copies, so it reaches every page. */
/* EVERY SECTION KEEPS CLEAR OF THE STICKY NAV, not only the one the URL
   names (Brandon, 2026-09-28: links to sections "open half scrolled"). An
   in-page anchor scrolls with scrollIntoView and the target is never :target,
   so the old rule left it under the bar. */
:target,section[id]{scroll-margin-top:110px}
.nav-tools svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6}

/* index.html — footer, including its phone block */
footer{background:radial-gradient(120% 200% at 50% -60%, rgba(74,22,96,.55) 0%, transparent 60%),var(--jd-velvet);color:var(--jd-ivory);padding:clamp(4rem,7vw,7rem) var(--gutter) 2rem;position:relative;overflow:hidden;line-height:1.6}
footer::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.16;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800'%3E%3Cfilter id='fhc'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006' numOctaves='2' stitchTiles='stitch'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23fhc)'/%3E%3C/svg%3E");background-size:cover}
footer::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.06;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='fhg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23fhg)'/%3E%3C/svg%3E")}
footer>*{position:relative;z-index:1}
.footer-inner{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:3rem}
/* The mark itself, not the name set in a serif. White artwork because the
   footer sits on velvet. Height is capped and width auto so a future logo
   file of a different aspect cannot stretch. */
.footer-brand{margin-bottom:.4rem;display:flex;flex-direction:column;line-height:1.1;
  align-items:flex-start}
/* align-items MUST be stated. A column flex container defaults to stretch,
   which pulled the logo to the column's full 374px at a fixed 38px tall and
   squashed it to a 9.85 aspect against the file's real 3.97. width:auto does
   not save you: stretch sets the cross size directly. */
.footer-brand img{height:38px;width:auto;max-width:100%}
.footer-brand .small{font-family:var(--sans);font-size:.55rem;letter-spacing:.42em;color:var(--jd-gold);margin-top:6px;font-weight:600}
.footer-tagline{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:rgba(242,238,230,.78);margin:1rem 0 1.6rem;max-width:34ch;line-height:1.5}
.newsletter{margin-bottom:1.6rem;max-width:22rem}
.newsletter form{display:flex;gap:.5rem;border:1px solid rgba(255,219,120,.4);border-radius:999px;padding:.4rem .4rem .4rem 1.2rem;background:rgba(0,0,0,.18)}
.newsletter input{flex:1;background:transparent;border:0;outline:0;color:var(--jd-ivory);font-family:var(--sans);font-size:.85rem;padding:.5rem 0}
.newsletter input::placeholder{color:rgba(242,238,230,.5)}
.newsletter button{background:var(--jd-gold);color:var(--jd-purple);padding:.6rem 1rem;border-radius:999px;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;transition:transform .25s ease}
.newsletter button:hover{transform:translateY(-1px)}
.newsletter button[disabled]{opacity:.6;cursor:default;transform:none}
/* One line, two moods. A signup that says nothing back is the same as one
   that fails, so both are spoken and both stay in the brand's voice. */
.nl-msg{margin:.7rem 0 0;font-family:var(--serif);font-style:italic;font-size:.95rem;
  line-height:1.5;letter-spacing:.01em;color:var(--jd-gold)}
.nl-msg.is-error{color:#F2B8B8;font-style:normal;font-family:var(--sans);font-size:.78rem;
  letter-spacing:.02em}
.nl-msg[hidden]{display:none}
.nl-hp{position:absolute;left:-5000px}
/* THE INNER CIRCLE POPUP (a228). Velvet, gold hairline, serif — the same
   register as the showroom bands, so it reads as part of the house rather
   than as something bolted on. Sits at the bottom-right on a desktop and
   comes up from the foot of a phone: a centred sheet over the middle of
   the page is the shape people close without reading. */
/* pointer-events:none on the CONTAINER. It is transparent but it is not
   small: with only right/bottom pinned it shrink-wraps to something far
   larger than the card, and every click in that empty margin was being
   swallowed by an invisible box. The card takes pointer events back. */
.nlpop{position:fixed;right:0;bottom:0;z-index:9000;pointer-events:none;
  padding:clamp(1rem,3vw,2.4rem);
  opacity:0;transition:opacity .26s ease}
.nlpop-card{pointer-events:auto}
.nlpop.open{opacity:1}
.nlpop[hidden]{display:none}
.nlpop-card{position:relative;width:min(26rem,100%);
  background:linear-gradient(158deg,#20042a,#320542 54%,#18021f);
  border:1px solid rgba(212,175,94,.55);border-radius:6px;
  padding:clamp(1.5rem,3vw,2rem) clamp(1.4rem,3vw,1.9rem) clamp(1.2rem,2.5vw,1.5rem);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.7);
  transform:translateY(14px);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.nlpop.open .nlpop-card{transform:none}
.nlpop-card .eyebrow{color:var(--jd-gold);margin-bottom:.75rem;display:inline-block}
.nlpop-card h2{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;line-height:1.12;
  font-size:clamp(1.5rem,2.6vw,1.9rem);color:var(--jd-ivory);margin:0 0 .6rem}
.nlpop-card h2 em{font-style:italic;color:var(--jd-gold)}
.nlpop-lede{font-size:.86rem;line-height:1.65;color:rgba(242,238,230,.8);margin:0 0 1.1rem}
.nlpop-card form{display:flex;gap:.5rem;border:1px solid rgba(255,219,120,.4);border-radius:999px;
  padding:.4rem .4rem .4rem 1.1rem;background:rgba(0,0,0,.24)}
.nlpop-card input[type=email]{flex:1;background:transparent;border:0;outline:0;color:var(--jd-ivory);
  font-family:var(--sans);font-size:.85rem;padding:.5rem 0;min-width:0}
.nlpop-card input[type=email]::placeholder{color:rgba(242,238,230,.5)}
.nlpop-card input[type=email]:focus-visible{outline:none}
.nlpop-card form:focus-within{border-color:var(--jd-gold)}
.nlpop-card button[type=submit]{background:var(--jd-gold);color:var(--jd-purple);padding:.6rem 1.1rem;
  border:0;border-radius:999px;font-family:var(--sans);font-size:.66rem;letter-spacing:.22em;
  text-transform:uppercase;font-weight:600;cursor:pointer;white-space:nowrap;transition:transform .25s ease}
.nlpop-card button[type=submit]:hover{transform:translateY(-1px)}
.nlpop-card button[type=submit][disabled]{opacity:.6;transform:none;cursor:default}
.nlpop-x{position:absolute;top:.5rem;right:.7rem;background:none;border:0;cursor:pointer;
  color:rgba(242,238,230,.55);font-size:1.5rem;line-height:1;padding:.25rem .4rem;transition:color .2s ease}
.nlpop-x:hover{color:var(--jd-gold)}
/* Not a faint dismissal: a visitor who does not want this should be able to
   see how to say so (Brandon, standing — no quiet buttons). */
.nlpop-no{display:block;margin:.9rem auto 0;background:none;border:0;cursor:pointer;
  font-family:var(--sans);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;color:rgba(242,238,230,.72);padding:.4rem;transition:color .2s ease}
.nlpop-no:hover{color:var(--jd-gold)}
.nlpop-no:focus-visible,.nlpop-card button:focus-visible{
  outline:2px solid var(--jd-gold);outline-offset:2px}
/* The close mark's ring is a hairline (Brandon, 2026-09-28: "the big bold box
   around the X … make it less in your face"). It only draws for a keyboard
   now: the card takes focus on open, the way the custom modal's panel does,
   so nothing is highlighted before anyone touches a key. */
.nlpop-x:focus-visible{outline:1px solid rgba(255,219,120,.7);outline-offset:3px;border-radius:4px}
.nlpop-card:focus{outline:0}
.nlpop .nl-msg{margin:.8rem 0 0}
@media (max-width:520px){
  .nlpop{left:0;padding:0}
  .nlpop-card{width:100%;border-radius:6px 6px 0 0;border-bottom:0}
}
@media (prefers-reduced-motion:reduce){
  .nlpop,.nlpop-card{transition:none}
  .nlpop-card{transform:none}
}

.newsletter .sub{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(242,238,230,.6);margin-top:.7rem;font-weight:500}

.footer-social{display:flex;gap:.6rem}
.footer-social a{
  width:38px;height:38px;display:grid;place-items:center;border-radius:999px;
  border:1px solid rgba(255,219,120,.3);transition:all .3s ease;
}
.footer-social a:hover{background:var(--jd-gold);border-color:var(--jd-gold);color:var(--jd-purple)}
.footer-social svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7}

/* The group heading is a <summary> now, so the columns can collapse on phones.
   On desktop it must be indistinguishable from the <h4> it replaced: no
   disclosure triangle, no pointer, same type. */
.footer-col summary{font-family:var(--sans);font-size:.7rem;letter-spacing:.32em;text-transform:uppercase;color:var(--jd-gold);margin:0 0 1.4rem;font-weight:600;
  list-style:none;cursor:default}
.footer-col summary::-webkit-details-marker{display:none}
.footer-col summary::marker{content:""}
.footer-col ul{list-style:none;padding:0;margin:0}
.footer-col li{margin-bottom:.7rem}
/* Used by the Inner Circle popup's eyebrow, which lives inside the footer.
   It sits HERE rather than beside the other .eyebrow rules because only
   this range is lifted into the chrome — outside it, the hand-authored
   page gets the markup without the rule (a233). */
.eyebrow .dash{display:inline-block;width:32px;height:1px;background:currentColor;vertical-align:middle;margin-right:14px}
.footer-col a,.footer-col .aslink{font-size:.92rem;color:rgba(242,238,230,.78);transition:color .3s ease}
.footer-col a:hover,.footer-col .aslink:hover{color:var(--jd-gold)}
/* a control that opens the chat rather than navigating: a button, wearing the column's link styling */
.footer-col .aslink{background:none;border:0;padding:0;margin:0;font-family:inherit;font-weight:inherit;line-height:inherit;text-align:start;cursor:pointer}

.footer-bottom{
  max-width:var(--maxw);margin:4rem auto 0;padding-top:2rem;border-top:1px solid rgba(255,219,120,.18);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(242,238,230,.6);
}
.footer-bottom .links{display:flex;gap:1.5rem;flex-wrap:wrap}
.footer-bottom a:hover{color:var(--jd-gold)}
/* THE ONE QUIET FOOTER CREDIT. No tile anywhere carries a per-house name — that
   was the attribution decision — so the acknowledgement lives here, once, and
   reads as a colophon rather than a disclaimer. text-transform is reset because
   .footer-bottom is uppercase, which is right for a copyright line and wrong
   for a three-line sentence. */
.footer-bottom .credit{display:block;max-width:52ch;margin-top:.55rem;
  font-size:.66rem;line-height:1.7;letter-spacing:.02em;
  text-transform:none;opacity:.62}

/* ── THE FOOTER ON A PHONE (Brandon 2026-08-27) ───────────────────────────
   Three stacked link columns ran 709px of a 1,454px footer: every link
   visible, none of them read. They collapse now, which is what Cartier,
   Tiffany and Dior all do on a phone, and the brand block above them gets
   centred and given room instead of hugging the left edge.
   The groups are <details open> in the markup, so with no CSS and no JS this
   footer is exactly what it is today. Only the script closes them. */
@media (max-width:767px){
  .footer-logo-col{text-align:center}
  .footer-brand{align-items:center}
  .footer-tagline{margin-left:auto;margin-right:auto;max-width:30ch}
  .newsletter{max-width:none;margin:1.7rem auto 1.4rem}
  .newsletter .sub{text-align:center}
  .footer-social{justify-content:center}

  .footer-col{border-top:1px solid rgba(255,219,120,.18)}
  .footer-col summary{display:flex;align-items:center;justify-content:space-between;
    margin:0;padding:1.05rem 0;cursor:pointer}
  /* the affordance: a hairline mark that turns when the group opens */
  .footer-col summary::after{content:"+";font-size:1rem;letter-spacing:0;
    color:var(--jd-gold);font-weight:400;line-height:1}
  .footer-col[open] summary::after{content:"−"}  /* U+2212, written literally: a CSS escape here was eaten once and shipped a stray "2" */
  .footer-col ul{padding-bottom:1rem}
  .footer-col li{margin-bottom:.6rem}
  .footer-bottom{margin-top:2.2rem;text-align:center;justify-content:center}
  .footer-bottom .links{justify-content:center}
}

/* index.html — the header and footer
   rules out of the responsive blocks, and ONLY those; the rest of those
   blocks is home page layout. THEY COME BEFORE THE CHROME BLOCK, exactly as
   upstream: media queries carry no extra specificity, so the later block
   legitimately overrides several of them, and reordering silently changes
   the header. */
@media (max-width:1024px){
  .nav-links{display:none}
  .menu-toggle{display:grid;place-items:center;width:38px;height:38px;color:var(--jd-purple)}
  .menu-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}
  .footer-inner{grid-template-columns:1fr 1fr;gap:2.5rem}
  .footer-logo-col{grid-column:1/3}
}
@media (max-width:640px){
  .top-bar{font-size:.62rem;flex-wrap:wrap;justify-content:center;gap:.6rem;padding:.6rem 1rem}
  .top-locs{order:2;width:100%;justify-content:center}
  .nav-row{gap:.6rem}
  .nav-tools{gap:.45rem}
  .footer-inner{grid-template-columns:1fr}
  .footer-logo-col{grid-column:auto}
}
@media (max-width:359px){
  .nav-tools .icon-btn:not(.menu-toggle){display:none}
}
@media (max-width:480px){
  .top-locs{gap:.55rem}
  .top-locs a{white-space:nowrap}
}
@media (max-width:374px){
  /* three showroom names + separators overran a 320px screen by 8px */
  .top-locs{gap:.3rem;font-size:.58rem}
}

/* index.html — the block that overrides all of the above */
/* ═══════════════ CHROME — top bar, nav, MEGA-PANEL, drawer ═════════════ */
/* The answer band (a385): the one quotable paragraph under a page's hero,
   set the way /gold/ sets its own (cream, centred, a hairline beneath). It
   rides in the chrome block because that is the block the lift carries to
   every page; the words live in shop/answer-first.mjs. */
.af-plain{background:var(--jd-cream);padding:clamp(1.5rem,3vw,2.3rem) var(--gutter);border-bottom:1px solid var(--jd-line)}
.af-plain p{margin:0 auto;max-width:74ch;text-align:center;font-family:var(--sans);font-size:1rem;line-height:1.7;color:#4b3a55;font-weight:400}
.top-bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.55rem var(--gutter);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--jd-blush);
  background:
    radial-gradient(60% 120% at 12% 0%, rgba(124,58,160,.25) 0%, transparent 55%),
    radial-gradient(50% 120% at 88% 0%, rgba(108,40,140,.2) 0%, transparent 55%),
    linear-gradient(160deg, var(--jd-velvet-lift) 0%, var(--jd-velvet) 55%, var(--jd-velvet-deep) 100%)}
.top-bar .locs{display:flex;gap:1.6rem}
.top-bar a{transition:color .25s ease}
.top-bar a:hover{color:var(--jd-gold)}
.top-bar .book{border:1px solid rgba(255,219,120,.5);border-radius:999px;padding:.4rem 1rem;color:var(--jd-gold)}
.nav-row{background:rgba(242,238,230,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--jd-line);padding:1.05rem var(--gutter);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1.5rem;
  position:sticky;top:0;z-index:80}
.nav-row .brand img{height:34px;width:auto}
.nav-links{display:flex;gap:1.6rem;justify-content:center;font-size:.72rem;
  letter-spacing:.18em;text-transform:uppercase;font-weight:500}
.nav-links>a{color:var(--jd-purple);padding:.35rem 0;transition:color .25s ease;position:relative}
.nav-links>a:hover{color:var(--jd-gold-deep)}
.nav-links>a[aria-current="page"]{border-bottom:1px solid var(--jd-gold-deep)}
.nav-tools{display:flex;gap:.9rem;justify-content:flex-end;align-items:center}
.icon-btn{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;
  transition:background .25s ease}
.icon-btn:hover{background:var(--jd-ivory)}
.icon-btn svg{width:18px;height:18px;fill:none;stroke:var(--jd-purple);stroke-width:1.5;stroke-linecap:round}
@media (max-width:1080px){.nav-links{display:none}.nav-row{grid-template-columns:1fr auto}}

/* The mega-panel: one restrained full-width sheet under the nav, on exactly
   one nav item. Text-first — six serif names read like the index page of a
   fine book, and no thumbnails means no supplier pixels in the chrome. */
.mega-wrap{position:relative}
.mega-scrim{position:fixed;inset:0;background:rgba(14,0,19,.38);z-index:78;
  opacity:0;pointer-events:none;transition:opacity .35s ease}
.mega-scrim.open{opacity:1}
.mega{position:fixed;left:0;right:0;top:var(--mega-top,0);z-index:79;
  background:var(--jd-ivory);border-top:1px solid var(--jd-gold-deep);
  border-bottom:1px solid var(--jd-line);box-shadow:0 40px 70px -50px rgba(26,2,33,.55);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .35s ease, transform .35s ease, visibility 0s linear .35s}
.mega.open{opacity:1;visibility:visible;transform:none;transition:opacity .35s ease, transform .35s ease}
.mega-inner{max-width:var(--maxw);margin:0 auto;padding:2.6rem var(--gutter) 2.2rem;
  display:grid;grid-template-columns:1.15fr 1.15fr .9fr;gap:clamp(1.5rem,3vw,3.5rem)}
.mega-label{font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--jd-gold-deep);
  font-weight:600;margin:0 0 1.1rem}
.mega-house{display:block;padding:.55rem 0;border-bottom:1px solid transparent}
.mega-house .hn{font-family:var(--serif);font-size:1.4rem;font-weight:500;color:var(--jd-purple);
  line-height:1.15;display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap}
.mega-house .hm{font-family:var(--sans);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--jd-gold-deep);font-weight:600}
.mega-house .hi{font-family:var(--serif);font-style:italic;font-size:.95rem;color:var(--jd-purple-accent);
  line-height:1.4;margin-top:.1rem}
a.mega-house{transition:transform .25s ease}
a.mega-house:hover{transform:translateX(6px)}
a.mega-house:hover .hn{color:var(--jd-gold-deep)}
.mega-house.soon{opacity:.62;cursor:default}
.mega-house.soon .hm{color:var(--jd-purple-accent)}
.mega-cats{display:flex;flex-direction:column;gap:.15rem}
.mega-cats a{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;font-weight:500;
  color:var(--jd-purple);padding:.55rem 0;border-bottom:1px solid var(--jd-line);
  display:flex;justify-content:space-between;align-items:center;transition:color .25s ease}
.mega-cats a:hover{color:var(--jd-gold-deep)}
.mega-cats a .arrow{color:var(--jd-gold-deep)}
.mega-foot{grid-column:1/-1;border-top:1px solid var(--jd-line);padding-top:1.3rem;
  display:flex;justify-content:space-between;align-items:center;gap:1rem}
.mega-foot .note{font-family:var(--serif);font-style:italic;color:var(--jd-purple-accent);font-size:.95rem}
.mega-foot a{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;font-weight:600;color:var(--jd-purple)}
.mega-foot a:hover{color:var(--jd-gold-deep)}
@media (max-width:1080px){.mega{display:none}}

/* Home-page links only: a name on the left and its piece count on the right.
   No other page puts a number in the drawer. */
.menu-group a,.menu-group button{display:flex;justify-content:space-between;
  align-items:baseline;gap:1rem;padding:.15rem 0}
.menu-meta{color:var(--jd-purple-accent);white-space:nowrap;letter-spacing:.18em}
/* ── NAV SEARCH (a207) — the icon expands an inline field; Enter submits
   the native GET form to /search/. */
.nav-search{display:flex;align-items:center;gap:.15rem}
.nav-search-in{width:0;opacity:0;border:0;border-bottom:1px solid var(--jd-line);border-radius:0;background:transparent;
  font-family:var(--serif);font-size:.98rem;color:var(--jd-purple);padding:.2rem 0;caret-color:var(--jd-gold-deep);
  transition:width .35s cubic-bezier(.2,.7,.2,1),opacity .3s ease}
.nav-search.open .nav-search-in{width:clamp(110px,16vw,210px);opacity:1;margin-left:.3rem}
.nav-search-in:focus{outline:none;border-bottom-color:var(--jd-gold-deep)}
.nav-search-in::placeholder{color:var(--jd-purple-accent);opacity:.7}
.nav-search-in::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.menu-group a[aria-current="page"]{color:var(--jd-gold-deep)}

/* index.html — the desktop logo step-up */
/* THE DESKTOP LOGO (the boss via Brandon, 2026-08-26). 34px is right on a
   phone and reads small on a PC. The asset is 476x120 native, so 46px is
   well inside it. Steps up only where the full nav shows; mobile unchanged. */
@media (min-width:1081px){.nav-row .brand img{height:46px}}

/* ── the showroom block (shop/showrooms.mjs) ── */
.svc-visit{position:relative;overflow:hidden;margin-top:clamp(2.6rem,5vw,4rem);
  background:linear-gradient(165deg,#1d0226 0%,#2a0838 45%,#12021a 100%);
  border-top:1px solid rgba(255,219,120,.3);
  padding-top:clamp(3rem,6vw,5rem);padding-bottom:clamp(3.2rem,6vw,5.2rem)}
.svc-visit .wrap{max-width:var(--maxw,1200px);margin:0 auto;padding:0 var(--gutter,1.5rem)}
.svc-visit-head{text-align:center;margin-bottom:clamp(1.8rem,3.5vw,2.8rem)}
/* The eyebrow is spelled out here rather than inherited: the Services hub had
   an .eyebrow rule of its own and the pooled pages do not, and the first build
   showed the block's eyebrow in the serif on a category page. */
.svc-visit-head .eyebrow{display:inline-flex;align-items:center;gap:.7rem;margin-bottom:1.2rem;
  font-family:var(--sans);font-size:.62rem;letter-spacing:.32em;text-transform:uppercase;font-weight:600;color:var(--jd-gold)}
.svc-visit-head .eyebrow .dash{display:inline-block;width:34px;height:1px;background:var(--jd-gold);opacity:.7;margin:0}
.svc-visit-head h2{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;line-height:1.05;font-size:clamp(2rem,4.5vw,3rem);color:var(--jd-ivory);margin:0 0 1.1rem}
.svc-visit-head h2 em{font-style:italic;color:var(--jd-gold)}
.svc-visit-head p{font-family:var(--serif);font-style:italic;font-size:clamp(1.05rem,1.8vw,1.3rem);line-height:1.6;color:var(--jd-ivory);opacity:.82;max-width:58ch;margin:0 auto}
.svc-visit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.5vw,2rem);max-width:1100px;margin:0 auto}
.svc-store{background:var(--jd-white);border-radius:8px;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 24px 50px -20px rgba(0,0,0,.65);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.svc-store:hover{transform:translateY(-4px)}
.svc-store .shot{aspect-ratio:16/10;overflow:hidden}
.svc-store .shot img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s ease}
/* The photograph opens the showroom's page too (Brandon, 2026-10-06), the a413
   way: out of the tab order and hidden from screen readers, so the name stays
   the one named way in and nobody meets the same link twice. */
.svc-store .shot-link{display:block;width:100%;height:100%;cursor:pointer}
.svc-store:hover .shot img{transform:scale(1.04)}
.svc-store .bd{padding:1.3rem 1.4rem .4rem;flex:1}
.svc-store h3{font-family:var(--serif);font-weight:500;font-size:1.55rem;color:var(--jd-purple);margin:0 0 .55rem}
.svc-store .addr{font-size:.86rem;line-height:1.6;color:var(--jd-purple-accent);margin:0}
.svc-store .hours{font-size:.76rem;line-height:1.5;color:var(--jd-purple-accent);margin:.4rem 0 0}
.svc-store .acts{display:flex;border-top:1px solid var(--jd-line);margin-top:1.1rem}
.svc-store .acts a,.svc-store .acts button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  padding:.85rem .3rem;background:none;border:0;border-left:1px solid var(--jd-line);cursor:pointer;
  font-family:var(--sans);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;
  color:var(--jd-purple);transition:color .25s ease}
.svc-store .acts a:first-child{border-left:0}
.svc-store .acts a:hover,.svc-store .acts button:hover{color:var(--jd-gold-deep)}
.svc-store .acts svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6}
/* The name opens the showroom's page, and the line under the hours says so in
   words: purple on a gold underline, the site's in-prose link, never a link
   pretending not to be one. */
.svc-store h3 a{color:inherit;text-decoration:none;transition:color .25s ease}
.svc-store h3 a:hover{color:var(--jd-gold-deep)}
.svc-store h3 a:focus-visible,.svc-store .see:focus-visible{outline:2px solid var(--jd-gold-deep);outline-offset:3px}
.svc-store .see{display:inline-flex;align-items:center;gap:.4rem;margin-top:.85rem;font-family:var(--sans);
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--jd-purple);
  text-decoration:underline;text-decoration-color:var(--jd-gold-deep);text-underline-offset:4px;text-decoration-thickness:1px;
  transition:color .25s ease}
.svc-store .see:hover{color:var(--jd-gold-deep)}
.svc-store .see:active{color:var(--jd-purple-2)}
.svc-store .see .arrow{display:inline-block;transition:transform .3s ease}
.svc-store .see:hover .arrow{transform:translateX(3px)}
/* A showroom's own page shows the other two: two cards, centered. */
.svc-visit-grid.two{grid-template-columns:repeat(2,1fr);max-width:740px}
@media (max-width:900px){.svc-visit-grid,.svc-visit-grid.two{grid-template-columns:1fr;max-width:440px}}
@media (prefers-reduced-motion:reduce){.svc-store,.svc-store .shot img{transition:none}}

/* ── the reviews section (lifted; REVIEWS_CSS in shop/home-chrome.mjs) ── */
.reviews{font-family:var(--sans);font-weight:400;line-height:1.6}
.reviews .btn{font-family:var(--sans)}
/* The home has no p rule, so a card's quote wears the browser's own 1em; the
   event pages zero every margin and the quote sat 16px high there. Stated. */
.reviews .review-card .text{margin:1em 0}

/* index.html — the reviews section */
.reviews{padding:clamp(5rem,9vw,9rem) var(--gutter);background:var(--jd-ivory)}
.reviews-inner{max-width:var(--maxw);margin:0 auto}
.reviews-head{text-align:center;max-width:48rem;margin:0 auto 3rem}
.reviews-head .eyebrow{margin-bottom:1.2rem;display:inline-block}
.reviews-head h2{font-family:var(--serif);font-size:clamp(2.4rem,5vw,4.2rem);line-height:1;letter-spacing:-.02em;margin:0 0 1.2rem;font-weight:400;color:var(--jd-purple)}
.reviews-head h2 em{font-style:italic;color:var(--jd-gold-deep)}
.reviews-head p{font-size:1.05rem;color:#3a1545;max-width:46ch;margin:0 auto 1.5rem;line-height:1.7;font-weight:300}
.reviews .hallmark{display:inline-flex;align-items:center;gap:1rem;padding:.7rem 1.4rem;border:1px solid var(--jd-line);border-radius:999px;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--jd-purple);font-weight:500}
.reviews .hallmark .stars{color:var(--jd-gold-deep);letter-spacing:.05em}
.reviews .hallmark .dot{width:4px;height:4px;border-radius:999px;background:var(--jd-purple-accent)}

.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.review-card{
  background:#fff;border:1px solid var(--jd-line);
  border-radius:6px;padding:2rem 1.6rem;position:relative;
  box-shadow:0 1px 2px rgba(50,5,66,.05), 0 10px 26px -16px rgba(50,5,66,.18);
  transition:transform .5s ease, box-shadow .5s ease, border-color .5s ease;
  display:flex;flex-direction:column;
}
.review-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-purple);border-color:rgba(201,154,63,.45)}
.review-card .quote-mark{font-family:var(--serif);font-size:5rem;line-height:.7;color:var(--jd-blush);font-style:italic;margin-bottom:1rem}
.review-card .text{font-family:var(--serif);font-size:1.05rem;line-height:1.55;color:var(--jd-purple);font-style:italic;flex:1;font-weight:400}
.review-card .meta{margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--jd-line)}
.review-card .stars{color:var(--jd-gold-deep);letter-spacing:.05em;font-size:.78rem;margin-bottom:.3rem}
.review-card .name{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--jd-purple);font-weight:600}
.review-card .loc{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--jd-purple-accent);margin-top:.25rem;font-weight:500}
.reviews-cta-wrap{text-align:center;margin-top:3rem}
@media (max-width:1024px){
  .reviews-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .reviews .hallmark{flex-wrap:wrap;justify-content:center;gap:.4rem .7rem;padding:.6rem 1.1rem;letter-spacing:.14em;max-width:100%}
  .reviews-grid{grid-template-columns:1fr}
}
.reviews-dots{display:none}
@media (max-width:767px){
  .reviews-grid{display:flex;grid-template-columns:none;gap:14px;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;padding-bottom:.5rem;scrollbar-width:none}
  .reviews-grid::-webkit-scrollbar{display:none}
  .reviews-grid .review-card{flex:0 0 84%;scroll-snap-align:start}
  .reviews-dots{display:flex;justify-content:center;gap:7px;margin-top:1.1rem}
  .reviews-dots span{width:6px;height:6px;border-radius:999px;background:var(--jd-purple);
    opacity:.22;transition:opacity .3s ease,transform .3s ease}
  .reviews-dots span.on{opacity:1;background:var(--jd-gold-deep);transform:scale(1.5)}
}
/* index.html — the base .eyebrow and .btn rules the section inherits on the home, scoped to it */
.reviews .eyebrow{
  font-family:var(--sans);
  font-size:.74rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--jd-gold-deep);
}
.reviews .btn{
  display:inline-flex;align-items:center;gap:.7rem;
  padding:1.05rem 1.8rem;
  font-size:.74rem;letter-spacing:.26em;text-transform:uppercase;font-weight:600;
  border-radius:999px;
  transition:transform .35s cubic-bezier(.2,.7,.2,1), background .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease;
  cursor:pointer;will-change:transform;
}
.reviews .btn-gold{background:var(--jd-gold);color:var(--jd-purple);border:1px solid var(--jd-gold);box-shadow:0 18px 40px -16px rgba(255,219,120,.6)}
.reviews .btn-gold:hover{background:transparent;color:var(--jd-gold);transform:translateY(-2px)}

@media (min-width:1081px){.nav-row .brand img{height:46px}}
/* ── the piece page ── the popup's panel, on a page of its own */
#jdjTop{min-height:118px;background:var(--jd-ivory)}
#jdjTop .pp-home{display:block;padding:2.6rem var(--gutter) 0;font-family:var(--serif);font-size:1.5rem;color:var(--jd-purple)}
.pp{max-width:1180px;margin:0 auto;padding:clamp(1.2rem,2.6vw,2rem) var(--gutter) clamp(3rem,6vw,5rem)}
.pp .j-breadcrumb{margin:0 0 1.2rem}
.pp-box.pdp{max-width:none;margin:0;background:var(--jd-cream);border-radius:6px;overflow:hidden;box-shadow:var(--shadow-soft)}
.pp-box .pdp-grid>*{min-width:0}   /* six thumbs must scroll inside the card, not widen it past a phone */
.pp-box .pdp-shot{cursor:default}
.pp-box .pdp-price+.pdp-desc{margin-top:.9rem}
.pp-box .pdp-panel h1{font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,3vw,2.3rem);line-height:1.1;margin:0 0 .7rem;color:var(--jd-purple)}
.pp-local{max-width:64ch;margin:clamp(2.6rem,5vw,4rem) auto 0;text-align:center}
.pp-local h2,.pp-more h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,2.8vw,2.1rem);line-height:1.15;letter-spacing:-.01em;color:var(--jd-purple);margin:0 0 .8rem}
.pp-local h2 em{font-style:italic;color:var(--jd-gold-deep)}
.pp-local p{font-size:1rem;line-height:1.8;color:#4b3a55;margin:0}
.pp-more{margin:clamp(2.6rem,5vw,4rem) 0 0;text-align:center}
.pp-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.8rem,2vw,1.4rem);margin:1.4rem 0 0}
.pp-card{display:block;background:var(--jd-white);border:1px solid var(--jd-line);border-radius:6px;overflow:hidden;text-align:left;transition:transform .3s ease,box-shadow .3s ease}
.pp-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-soft)}
.pp-card:focus-visible{outline:2px solid var(--jd-gold-deep);outline-offset:3px}
.pp-card img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;background:var(--jd-white)}
.pp-card span{display:block;padding:.8rem .9rem 1rem;font-family:var(--serif);font-size:1.05rem;line-height:1.25;color:var(--jd-purple);border-top:1px solid var(--jd-line)}
.pp-all{margin:1.6rem 0 0}
.pp-all .pdp-tool{display:inline-block}
.pp-rooms{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;max-width:1180px;margin:0 auto;padding:2rem var(--gutter);font-size:.85rem;line-height:1.6;color:#4b3a55}
.pp-rooms b{color:var(--jd-purple)}
@media (max-width:820px){
  .pp-cards{grid-template-columns:repeat(2,1fr)}
  .pp-rooms{grid-template-columns:1fr}
  #jdjTop{min-height:150px}
}
@media (prefers-reduced-motion:reduce){.pp-card{transition:none}.pp-card:hover{transform:none}}