/* Wulf kit. Built by tools/build-css.sh from tools/mockup-v8.css + tools/kit-reset.css + tools/kit-extra.css. */

/* Theme shield: neutralise theme / Elementor-kit link and button styles inside the kit.
   Heavier than theme rules, lighter than every section rule below. Not inside .wk-foreign: another
   plugin's widget in a kit section (a reviews plugin's shortcode) keeps its own look. */
html .wk button:where(:not(.wk-foreign *)), html .wk [type="button"]:where(:not(.wk-foreign *)), html .wk [type="submit"]:where(:not(.wk-foreign *)), html .wk [type="reset"]:where(:not(.wk-foreign *)) { background: none; border: 0; border-radius: 0; padding: 0; margin: 0; min-height: 0; width: auto; text-transform: none; font-weight: inherit; line-height: inherit; font-size: inherit; letter-spacing: inherit; white-space: normal; text-align: center; box-shadow: none; color: inherit; transition: none; }
html .wk button:hover:where(:not(.wk-foreign *)), html .wk button:focus:where(:not(.wk-foreign *)), html .wk button:active:where(:not(.wk-foreign *)) { background-color: transparent; color: inherit; text-decoration: none; }
html .wk a:where(:not(.wk-foreign *)), html .wk a:hover:where(:not(.wk-foreign *)), html .wk a:focus:where(:not(.wk-foreign *)), html .wk a:active:where(:not(.wk-foreign *)), html .wk a:visited:where(:not(.wk-foreign *)) { color: inherit; text-decoration: none; }
html .wk input:where(:not(.wk-foreign *)), html .wk select:where(:not(.wk-foreign *)), html .wk textarea:where(:not(.wk-foreign *)) { border-radius: 0; margin: 0; box-shadow: none; }
html .wk h1:where(:not(.wk-foreign *)), html .wk h2:where(:not(.wk-foreign *)), html .wk h3:where(:not(.wk-foreign *)), html .wk h4:where(:not(.wk-foreign *)), html .wk h5:where(:not(.wk-foreign *)), html .wk h6:where(:not(.wk-foreign *)) { margin: 0; padding: 0; font-family: inherit; font-weight: inherit; line-height: inherit; color: inherit; text-transform: none; letter-spacing: normal; }
html .wk table:where(:not(.wk-foreign *)), html .wk td:where(:not(.wk-foreign *)), html .wk th:where(:not(.wk-foreign *)) { border: 0; }

.wk {
	--bg: #ffffff;
	--ivory: #f7f5f1;
	--line: #e7e4de;
	--field: #8a9099;
	--ink: #0f1217;
	--text: #262a31;
	--sub: #5a5f67;
	--night: #0b0e14;
	--night-2: #131924;
	--night-3: #1c2331;
	--sub-night: #b9c0ca;
	--line-night: rgba(255, 255, 255, .12);
	--gold: #d6b97f;
	--gold-deep: #b8955a;
	--gold-ink: #7a5b24;
	--serif: "Fraunces", Georgia, "Times New Roman", serif;
	--sans: "Manrope", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	--r: 10px;
	--max: 1240px;
	--gut: clamp(20px, 5vw, 56px);
	--sec: clamp(76px, 9vw, 124px);
	--hd: 76px;
	color-scheme: light;
}
.wk, .wk *:where(:not(.wk-foreign *)) { box-sizing: border-box; }
.wk { color: var(--text); font: 400 16.5px/1.65 var(--sans); -webkit-font-smoothing: antialiased; }
.wk.wk img:where(:not(.wk-foreign *)), .wk.wk svg:where(:not(.wk-foreign *)) { max-width: 100%; display: block; }
.wk.wk a:where(:not(.wk-foreign *)) { color: inherit; }
.wk.wk button:where(:not(.wk-foreign *)), .wk.wk input:where(:not(.wk-foreign *)), .wk.wk select:where(:not(.wk-foreign *)), .wk.wk textarea:where(:not(.wk-foreign *)) { font: inherit; color: inherit; }
.wk.wk p:where(:not(.wk-foreign *)), .wk.wk h1:where(:not(.wk-foreign *)), .wk.wk h2:where(:not(.wk-foreign *)), .wk.wk h3:where(:not(.wk-foreign *)), .wk.wk h4:where(:not(.wk-foreign *)), .wk.wk ul:where(:not(.wk-foreign *)), .wk.wk ol:where(:not(.wk-foreign *)), .wk.wk figure:where(:not(.wk-foreign *)) { margin: 0; }
.wk.wk ul:where(:not(.wk-foreign *)), .wk.wk ol:where(:not(.wk-foreign *)) { padding: 0; list-style: none; }
.wk.wk .wrap { max-width: calc(var(--max) + 2 * var(--gut)); margin: 0 auto; padding-inline: var(--gut); }
.wk.wk :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.wk.wk .dark :focus-visible, .wk.wk .hero :focus-visible, .wk.wk .ft :focus-visible { outline-color: var(--gold); }
.wk.wk [hidden] { display: none !important; }
.wk.wk .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wk.wk .h1, .wk.wk .h2, .wk.wk .h3 { font-family: var(--serif); font-optical-sizing: auto; color: var(--ink); font-weight: 400; text-wrap: balance; }
.wk.wk .h1 { font-size: clamp(42px, 5.2vw, 78px); line-height: 1.03; letter-spacing: -.025em; }
.wk.wk .h2 { font-size: clamp(32px, 3.5vw, 50px); line-height: 1.1; letter-spacing: -.02em; }
.wk.wk .h3 { font-size: clamp(20px, 1.6vw, 24px); line-height: 1.25; letter-spacing: -.01em; font-weight: 500; }
.wk.wk .kicker { display: block; font: 700 13px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; }
.wk.wk .eyebrow { display: block; font: 700 12.5px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--sub); }
.wk.wk .lead { font-size: clamp(17px, 1.2vw, 18.5px); line-height: 1.65; color: var(--sub); max-width: 58ch; }
.wk.wk .dark { background: var(--night); color: #eef0f3; }
.wk.wk .dark .h1, .wk.wk .dark .h2, .wk.wk .dark .h3, .wk.wk .hero .h1 { color: #fff; }
.wk.wk .dark .eyebrow { color: var(--sub-night); }
.wk.wk .dark .lead { color: var(--sub-night); }
.wk.wk .gold-em { font-style: italic; color: var(--gold); }
.wk.wk .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; border: 1.5px solid transparent; font: 600 15px/1.2 var(--sans); text-decoration: none; cursor: pointer; transition: background .2s, color .2s, border-color .2s; text-align: center; }
.wk.wk .btn svg { width: 18px; height: 18px; flex: none; transition: transform .2s; }
.wk.wk .btn:hover svg.arr { transform: translateX(3px); }
.wk.wk .btn-gold { background: var(--gold); color: #1d1608; }
.wk.wk .btn-gold:hover { background: #e3c98f; }
.wk.wk .btn-ink { background: var(--ink); color: #fff; }
.wk.wk .btn-ink:hover { background: #2a313c; }
.wk.wk .btn-line { border-color: var(--ink); color: var(--ink); background: transparent; }
.wk.wk .btn-line:hover { background: var(--ink); color: #fff; }
.wk.wk .btn-ghost { border-color: rgba(255, 255, 255, .5); color: #fff; }
.wk.wk .btn-ghost:hover { background: #fff; color: var(--ink); }
.wk.wk .btn-sm { min-height: 44px; padding: 0 20px; font-size: 14.5px; }
.wk.wk .link { display: inline-flex; align-items: center; gap: 8px; font: 700 15px/1.3 var(--sans); color: var(--ink); text-decoration: none; min-height: 44px; }
.wk.wk .link svg { width: 18px; height: 18px; transition: transform .2s; }
.wk.wk .link:hover svg { transform: translateX(4px); }
.wk.wk .dark .link { color: #fff; }
.wk.wk .slot { position: relative; background: #fff; overflow: hidden; }
.wk.wk .slot-tag { position: absolute; top: 12px; left: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 6px; background: rgba(15, 18, 23, .06); font: 700 10.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: #6b7079; pointer-events: none; }
.wk.wk .slot .slot-tag { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; width: auto; max-width: calc(100% - 24px); justify-self: start; align-self: start; }
.wk.wk .slot .slot-tag svg { display: inline-block; vertical-align: -2px; margin-right: 5px; width: 13px !important; height: 13px; flex: none; transform: none !important; }
.wk.wk .dark .slot-tag, .wk.wk .slot.dk .slot-tag { background: rgba(255, 255, 255, .1); color: #c3c9d2; }
.wk.wk .sec { padding-block: var(--sec); }
.wk.wk .ivory { background: var(--ivory); }
.wk.wk .rule { border-top: 1px solid var(--line); }
.wk.wk .shead { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px 40px; margin-bottom: clamp(36px, 4vw, 56px); }
.wk.wk .shead > div { max-width: 720px; }
.wk.wk .shead .h2 { margin-top: 14px; }
.wk.wk .shead .lead { margin-top: 16px; }
.wk.wk .shead.center { justify-content: center; text-align: center; }
.wk.wk .shead.center .lead { margin-inline: auto; }
.wk.wk .announce { background: var(--night); color: #e4e7ec; font: 500 14px/1.4 var(--sans); padding: 10px var(--gut); display: flex; justify-content: center; gap: 8px 22px; flex-wrap: wrap; border-bottom: 1px solid var(--line-night); }
.wk.wk .announce a { color: #fff; text-decoration: none; font-weight: 600; }
.wk.wk .announce .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #3ccf8e; margin-right: 8px; vertical-align: 1px; }
.wk.wk .announce .closed .dot { background: #e0846c; }
.wk.wk .hd { position: sticky; top: 0; z-index: 60; height: var(--hd); color: #fff; background: var(--night); transition: background .25s, color .25s, box-shadow .25s; }
.wk.wk .hd.solid, .wk.wk .hd.mega-on { background: rgba(255, 255, 255, .98); color: var(--ink); box-shadow: 0 1px 0 var(--line); }
.wk.wk .hd > .wrap { height: 100%; display: flex; align-items: center; gap: 28px; }
.wk.wk .logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; flex: none; }
.wk.wk .logo svg { width: 34px; height: 34px; color: var(--gold); }
.wk.wk .hd.solid .logo svg, .wk.wk .hd.mega-on .logo svg { color: var(--gold-deep); }
.wk.wk .logo .t { display: grid; gap: 5px; line-height: 1; white-space: nowrap; }
.wk.wk .logo .w { font: 500 22px/1 var(--serif); letter-spacing: .3em; margin-right: -.3em; }
.wk.wk .logo .d { font: 700 11px/1 var(--sans); letter-spacing: .26em; }
.wk.wk .nav { flex: 1; display: flex; justify-content: center; }
.wk.wk .nav > ul { display: flex; gap: clamp(16px, 2vw, 30px); }
.wk.wk .nav-a { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; height: var(--hd); font: 600 15px/1 var(--sans); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; position: relative; color: inherit; }
.wk.wk .nav-a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 22px; height: 1.5px; background: var(--gold-deep); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.wk.wk .nav-a:hover::after, .wk.wk .has-mega.open > .nav-a::after { transform: scaleX(1); }
.wk.wk .nav-a .chev { width: 14px; height: 14px; transition: transform .2s; }
.wk.wk .has-mega.open > .nav-a .chev { transform: rotate(180deg); }
.wk.wk .actions { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: none; }
.wk.wk .tel { font: 600 15px/1 var(--sans); text-decoration: none; padding: 0 10px; white-space: nowrap; }
.wk.wk .icon-btn { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 0; background: none; color: inherit; cursor: pointer; text-decoration: none; }
.wk.wk .icon-btn:hover { background: rgba(127, 127, 127, .14); }
.wk.wk .icon-btn svg { width: 21px; height: 21px; }
.wk.wk .count { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--gold); color: #1d1608; font: 700 11px/18px var(--sans); text-align: center; }
.wk.wk .hd .btn-book { margin-left: 6px; }
.wk.wk .hd:not(.solid):not(.mega-on) .btn-book { background: var(--gold); color: #1d1608; }
.wk.wk .menu-btn, .wk.wk .tel-icon { display: none; }
.wk.wk .mega { position: absolute; left: 0; right: 0; top: 100%; background: #fff; color: var(--ink); border-top: 1px solid var(--line); box-shadow: 0 30px 50px -30px rgba(15, 18, 23, .35); padding: 34px 0 40px; display: none; }
.wk.wk .has-mega.open .mega { display: block; animation: drop .18s ease-out; }
@keyframes drop { from { opacity: 0; transform: translateY(-6px); } }
.wk.wk .mega-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; }
.wk.wk .mega h4 { font: 700 12.5px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--sub); margin-bottom: 16px; }
.wk.wk .mega-shapes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.wk.wk .mega-shapes a { display: grid; justify-items: center; gap: 8px; padding: 14px 6px 12px; border-radius: 10px; text-decoration: none; font: 600 14px/1.2 var(--sans); }
.wk.wk .mega-shapes a:hover { background: var(--ivory); }
.wk.wk .mega-shapes svg { width: 30px; height: 30px; }
.wk.wk .mega-list { display: grid; }
.wk.wk .mega-list a { display: flex; align-items: center; gap: 10px; padding: 9px 0; text-decoration: none; font: 500 15.5px/1.3 var(--sans); color: var(--text); }
.wk.wk .mega-list a small { display: block; font-size: 13.5px; color: var(--sub); margin-top: 2px; }
.wk.wk .mega-list a:hover { color: var(--gold-ink); }
.wk.wk .sw { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); flex: none; }
.wk.wk .mega-feature { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; display: grid; text-decoration: none; }
.wk.wk .mega-feature .slot { height: 170px; display: grid; place-items: center; }
.wk.wk .mega-feature .slot svg { height: 150px; width: auto; }
.wk.wk .mega-feature div.c { padding: 16px 18px 18px; display: grid; gap: 4px; }
.wk.wk .mega-feature p { font-size: 14.5px; color: var(--sub); }
.wk.wk .services-mega .mega-grid { grid-template-columns: 1fr 1fr 1.2fr; }
.wk.wk .sheet { position: fixed; inset: 0; z-index: 80; background: #fff; color: var(--ink); display: grid; grid-template-rows: auto auto 1fr auto; overflow-y: auto; }
.wk.wk .sheet-top { display: flex; justify-content: space-between; align-items: center; height: 68px; padding-inline: var(--gut); border-bottom: 1px solid var(--line); }
.wk.wk .sheet-search { padding: 14px var(--gut) 0; }
.wk.wk .sheet-search input { width: 100%; height: 50px; border-radius: 999px; border: 1.5px solid var(--field); padding: 0 20px; font-size: 16px; }
.wk.wk .sheet nav { padding: 6px var(--gut); }
.wk.wk .sheet details { border-bottom: 1px solid var(--line); }
.wk.wk .sheet summary, .wk.wk .sheet nav > a { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; font: 400 26px/1.2 var(--serif); text-decoration: none; cursor: pointer; list-style: none; }
.wk.wk .sheet nav > a { border-bottom: 1px solid var(--line); }
.wk.wk .sheet summary::-webkit-details-marker { display: none; }
.wk.wk .sheet summary svg { width: 20px; height: 20px; transition: transform .2s; }
.wk.wk .sheet details[open] summary svg { transform: rotate(180deg); }
.wk.wk .sheet details a { display: block; padding: 10px 0; font-size: 16.5px; text-decoration: none; color: var(--text); }
.wk.wk .sheet details div { padding-bottom: 12px; }
.wk.wk .sheet-foot { padding: 18px var(--gut) calc(22px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 10px; border-top: 1px solid var(--line); }
.wk.wk .sheet-foot p { font-size: 14.5px; color: var(--sub); text-align: center; }
.wk.wk .hero { background: var(--night); color: #fff; overflow: hidden; }
.wk.wk .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: min(720px, calc(100vh - 120px)); }
.wk.wk .hero-copy { padding: clamp(48px, 7vw, 96px) clamp(28px, 4vw, 64px) clamp(48px, 6vw, 80px) max(var(--gut), calc((100vw - var(--max)) / 2)); display: flex; flex-direction: column; justify-content: center; }
.wk.wk .hero-copy .lead { margin-top: 24px; color: #c6ccd5; max-width: 46ch; }
.wk.wk .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.wk.wk .hero-call { margin-top: 18px; font-size: 15px; color: var(--sub-night); }
.wk.wk .hero-call a { color: #fff; font-weight: 600; text-decoration: none; }
.wk.wk .trust { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line-night); }
.wk.wk .trust li { display: flex; align-items: center; gap: 10px; font: 600 14.5px/1.3 var(--sans); color: #e3e6eb; }
.wk.wk .trust svg { width: 21px; height: 21px; color: var(--gold); flex: none; }
.wk.wk .hero-media { position: relative; background: #fff; display: grid; place-items: center; padding: 48px 32px 72px; }
.wk.wk .hero-media .cap { position: absolute; left: 32px; right: 32px; bottom: 24px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14.5px; color: var(--sub); }
.wk.wk .hero-media .cap a { color: var(--ink); font-weight: 700; text-decoration: none; }
.wk.wk .cats { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.wk.wk .tile { position: relative; grid-column: span 3; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #fff; transition: box-shadow .25s; }
.wk.wk .tile:hover { box-shadow: 0 20px 40px -28px rgba(15, 18, 23, .35); }
.wk.wk .tile.big { grid-column: span 6; grid-row: span 2; }
.wk.wk .tile .slot { aspect-ratio: 1; display: grid; place-items: center; }
.wk.wk .tile.big .slot { aspect-ratio: auto; flex: 1; min-height: 420px; }
.wk.wk .tile .slot svg { width: 84%; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.wk.wk .tile.big .slot svg { width: 78%; }
.wk.wk .tile:hover .slot svg { transform: scale(1.03); }
.wk.wk .tile .meta { padding: 16px 20px 20px; border-top: 1px solid var(--line); }
.wk.wk .tile .meta a { text-decoration: none; color: var(--ink); }
.wk.wk .tile .meta a::after { content: ""; position: absolute; inset: 0; }
.wk.wk .tile .meta p { font-size: 15px; color: var(--sub); margin-top: 4px; }
.wk.wk .tile.big .h3 { font-size: clamp(24px, 2.2vw, 32px); }
.wk.wk .row-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin: clamp(56px, 6vw, 80px) 0 24px; }
.wk.wk .row-head p { font-size: 15px; color: var(--sub); margin-top: 6px; }
.wk.wk .arrows { display: flex; gap: 8px; }
.wk.wk .arrows button { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--field); background: #fff; cursor: pointer; display: grid; place-items: center; }
.wk.wk .arrows button:hover { border-color: var(--ink); }
.wk.wk .arrows svg { width: 18px; height: 18px; }
.wk.wk .prow { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 60px) / 4); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.wk.wk .prow::-webkit-scrollbar { display: none; }
.wk.wk .card { position: relative; scroll-snap-align: start; display: grid; gap: 12px; align-content: start; }
.wk.wk .card .slot { aspect-ratio: 1; border: 1px solid var(--line); border-radius: var(--r); display: grid; place-items: center; }
.wk.wk .card .slot svg { width: 86%; }
.wk.wk .card .badge { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 5px 9px; border-radius: 6px; background: var(--ink); color: #fff; font: 700 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.wk.wk .save { position: absolute; top: 8px; right: 8px; z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .9); display: grid; place-items: center; cursor: pointer; color: var(--ink); }
.wk.wk .save svg { width: 20px; height: 20px; }
.wk.wk .save[aria-pressed="true"] svg { fill: var(--ink); }
.wk.wk .card h3 { font: 600 15.5px/1.35 var(--sans); color: var(--ink); }
.wk.wk .card h3 a { text-decoration: none; }
.wk.wk .card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.wk.wk .card .price { font-size: 15px; color: var(--sub); }
.wk.wk .studio-card { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); background: #fff; border: 1px solid var(--line); border-radius: var(--r); }
.wk.wk .preview { position: relative; padding: 28px; display: grid; gap: 16px; align-content: start; border-right: 1px solid var(--line); }
.wk.wk .preview .main { aspect-ratio: 1; display: grid; place-items: center; border-radius: 8px; }
.wk.wk .preview .main svg { width: 82%; transition: opacity .25s; }
.wk.wk .alts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.wk.wk .alts button { aspect-ratio: 1; border: 1.5px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; display: grid; place-items: center; padding: 4px; }
.wk.wk .alts button:hover { border-color: var(--ink); }
.wk.wk .alts svg { width: 100%; }
.wk.wk .preview .shown { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; font-size: 15px; color: var(--sub); }
.wk.wk .preview .shown b { color: var(--ink); font-weight: 600; }
.wk.wk .preview .shown a { font-weight: 700; color: var(--ink); text-decoration: none; }
.wk.wk .controls { padding: clamp(24px, 3vw, 36px); display: grid; gap: 28px; align-content: start; min-width: 0; }
.wk.wk .ctl { display: grid; gap: 12px; min-width: 0; border: 0; padding: 0; margin: 0; }
.wk.wk .ctl legend { padding: 0; width: 100%; }
.wk.wk .ctl-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; width: 100%; }
.wk.wk .ctl-head b { display: inline-flex; align-items: center; gap: 10px; font: 700 15.5px/1.2 var(--sans); color: var(--ink); }
.wk.wk .ctl-head b span { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--ink); display: grid; place-items: center; font-size: 12.5px; }
.wk.wk .ctl-head output { font: 500 15px/1.2 var(--sans); color: var(--sub); text-align: right; }
.wk.wk .grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wk.wk .opt { min-height: 46px; padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--field); background: #fff; font: 600 14.5px/1.2 var(--sans); color: var(--text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: border-color .2s, background .2s, color .2s; text-align: center; }
.wk.wk .opt:hover { border-color: var(--ink); }
.wk.wk .opt[aria-checked="true"], .wk.wk .opt[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.wk.wk .opt[aria-disabled="true"] { opacity: .38; cursor: not-allowed; }
.wk.wk .shape-opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.wk.wk .shape-opts .opt { min-height: 76px; border-radius: 12px; flex-direction: column; padding: 8px 4px; font-size: 13.5px; }
.wk.wk .shape-opts svg { width: 26px; height: 26px; }
.wk.wk .hint { font-size: 14px; color: var(--gold-ink); min-height: 1.4em; }
.wk.wk input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 30px; background: transparent; cursor: pointer; --p: 50%; --fill: var(--ink); --track: #e2dfd9; }
.wk.wk input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(to right, var(--fill) 0 var(--p), var(--track) var(--p) 100%); }
.wk.wk input[type="range"]::-moz-range-track { height: 4px; border-radius: 4px; background: var(--track); }
.wk.wk input[type="range"]::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--fill); }
.wk.wk input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -10px; border-radius: 50%; background: #fff; border: 2px solid var(--fill); box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .35); }
.wk.wk input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid var(--fill); }
.wk.wk .ticks { display: flex; justify-content: space-between; font: 600 13px/1 var(--sans); color: var(--sub); }
.wk.wk .ticks span.on { color: var(--ink); }
.wk.wk .size-line { display: flex; align-items: center; gap: 14px; font-size: 15px; color: var(--sub); }
.wk.wk .size-line svg { flex: none; }
.wk.wk .size-line b { color: var(--ink); font-weight: 600; }
.wk.wk .studio-go { display: grid; gap: 10px; padding-top: 22px; border-top: 1px solid var(--line); }
.wk.wk .studio-go p { font-size: 14.5px; color: var(--sub); text-align: center; }
.wk.wk .studio-go p b { color: var(--ink); font-weight: 600; }
.wk.wk .reviews { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.wk.wk .rating { display: grid; gap: 14px; }
.wk.wk .rating .stars { display: flex; gap: 4px; color: var(--gold-deep); }
.wk.wk .rating .stars svg { width: 26px; height: 26px; }
.wk.wk .rating .big { font: 400 64px/1 var(--serif); color: var(--ink); }
.wk.wk .rating .big small { font: 600 15px/1 var(--sans); color: var(--sub); margin-left: 6px; }
.wk.wk .rev-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.wk.wk .rev { position: relative; border: 1px solid var(--line); border-radius: var(--r); padding: 26px 24px; display: grid; gap: 14px; align-content: start; }
.wk.wk .rev .stars { display: flex; gap: 3px; color: var(--gold-deep); }
.wk.wk .rev .stars svg { width: 17px; height: 17px; }
.wk.wk .rev blockquote { margin: 0; font: 400 18px/1.5 var(--serif); color: #8a8f97; font-style: italic; }
.wk.wk .rev footer { font-size: 14.5px; color: var(--sub); }
.wk.wk .rev footer b { display: block; color: var(--ink); font-weight: 600; }
.wk.wk .ph { display: inline-block; margin-top: 2px; padding: 3px 7px; border-radius: 5px; background: #f1efe9; font: 700 10.5px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: #6b7079; }
.wk.wk .sign { display: flex; align-items: center; gap: 16px; margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); }
.wk.wk .sign p { font-size: 15px; color: var(--sub); }
.wk.wk .sign p b { display: block; color: var(--ink); font-weight: 600; font-size: 16px; }
.wk.wk .cs-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 6vw, 88px); align-items: start; }
.wk.wk .seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 5px; border-radius: 999px; background: var(--night-3); margin-top: 32px; }
.wk.wk .seg button { min-height: 46px; border: 0; border-radius: 999px; background: none; color: var(--sub-night); font: 600 15.5px/1 var(--sans); cursor: pointer; }
.wk.wk .seg button[aria-selected="true"] { background: #fff; color: var(--ink); }
.wk.wk .seg button:hover:not([aria-selected="true"]) { color: #fff; }
.wk.wk .cs-panel { margin-top: 28px; display: grid; gap: 14px; }
.wk.wk .cs-value { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.wk.wk .cs-value small { font: 700 12.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--sub-night); }
.wk.wk .cs-value b { font: 400 34px/1 var(--serif); color: #fff; }
.wk.wk .cs-panel input[type="range"] { --fill: var(--gold); --track: rgba(255, 255, 255, .18); }
.wk.wk .cs-panel input[type="range"]::-webkit-slider-thumb { background: var(--night); border-color: var(--gold); }
.wk.wk .cs-panel .ticks { color: #9aa2ad; }
.wk.wk .cs-panel .ticks span.on { color: var(--gold); }
.wk.wk .cs-text { font-size: 17px; color: #d3d8df; min-height: 3.4em; }
.wk.wk .tip { display: flex; gap: 14px; padding: 16px 18px; border-radius: var(--r); border: 1px solid rgba(214, 185, 127, .28); font-size: 15.5px; color: #ecdcb9; }
.wk.wk .tip svg { width: 22px; height: 22px; color: var(--gold); flex: none; margin-top: 1px; }
.wk.wk .cs-next { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.wk.wk .viz { position: relative; border-radius: var(--r); background: radial-gradient(circle at 50% 40%, #1d2638, #10151f 70%); border: 1px solid var(--line-night); overflow: hidden; }
.wk.wk .viz svg { width: 100%; height: auto; }
.wk.wk .viz [data-v] { cursor: pointer; }
.wk.wk .viz-cap { position: absolute; top: 18px; left: 20px; font: 700 12.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--sub-night); }
.wk.wk .bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.wk.wk .svc { grid-column: span 4; border: 1px solid var(--line); border-radius: var(--r); padding: 28px; display: flex; flex-direction: column; gap: 12px; background: #fff; }
.wk.wk .svc p { font-size: 15.5px; color: var(--sub); }
.wk.wk .svc .facts { display: grid; gap: 8px; margin: 4px 0 6px; }
.wk.wk .svc .facts li { display: flex; gap: 10px; font-size: 15px; color: var(--text); }
.wk.wk .svc .facts svg { width: 18px; height: 18px; color: var(--gold-ink); flex: none; margin-top: 3px; }
.wk.wk .svc .acts { margin-top: auto; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.wk.wk .svc.custom { grid-column: span 12; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); padding: 0; overflow: hidden; }
.wk.wk .svc.custom .copy { padding: clamp(28px, 3.5vw, 48px); display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.wk.wk .svc.custom .h3 { font-size: clamp(28px, 2.6vw, 38px); }
.wk.wk .frames { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-left: 1px solid var(--line); }
.wk.wk .frames .slot { display: grid; grid-template-rows: 1fr auto; border-right: 1px solid var(--line); }
.wk.wk .frames .slot:last-child { border-right: 0; }
.wk.wk .frames .slot > div { display: grid; place-items: center; padding: 40px 14px 10px; }
.wk.wk .frames .slot svg { width: 100%; }
.wk.wk .frames .slot span.l { padding: 12px 16px 16px; font: 700 12.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--sub); }
.wk.wk .svc .fin { font: 400 44px/1 var(--serif); color: var(--gold-ink); letter-spacing: -.02em; }
.wk.wk .fine { font-size: 13px; color: var(--sub); }
.wk.wk .posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.wk.wk .post { position: relative; display: grid; gap: 12px; align-content: start; }
.wk.wk .post .slot { aspect-ratio: 4 / 3; border: 1px solid var(--line); border-radius: var(--r); display: grid; place-items: center; }
.wk.wk .post .slot svg { width: 62%; }
.wk.wk .post small { font: 700 12.5px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--sub); }
.wk.wk .post .h3 a { text-decoration: none; }
.wk.wk .post .h3 a::after { content: ""; position: absolute; inset: 0; }
.wk.wk .post p { font-size: 15.5px; color: var(--sub); }
.wk.wk .visit { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; align-items: stretch; }
.wk.wk .box { background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.wk.wk .visit-media { display: grid; grid-template-columns: 3fr 2fr; border-bottom: 1px solid var(--line); }
.wk.wk .visit-media .slot { aspect-ratio: 3 / 2; display: grid; place-items: center; background: linear-gradient(170deg, #f4f2ee, #e9e5de); }
.wk.wk .visit-media .slot > svg { width: 44%; opacity: .5; }
.wk.wk .visit-media a.map { position: relative; display: block; border-left: 1px solid var(--line); background: #eef0f2; }
.wk.wk .visit-media a.map svg { width: 100%; height: 100%; }
.wk.wk .visit-info { padding: clamp(24px, 3vw, 36px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
.wk.wk .contact { display: grid; gap: 10px; }
.wk.wk .contact > a, .wk.wk .contact > span { display: flex; align-items: flex-start; gap: 12px; text-decoration: none; font: 600 16px/1.45 var(--sans); color: var(--ink); }
.wk.wk .contact svg { width: 20px; height: 20px; color: var(--gold-deep); flex: none; margin-top: 2px; }
.wk.wk .contact small { display: block; font-weight: 500; color: var(--sub); font-size: 14.5px; }
.wk.wk .visit-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.wk.wk .status { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: #e8f6ee; color: #1d6b48; font: 700 13.5px/1 var(--sans); }
.wk.wk .status i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.wk.wk .status.closed { background: #fbefe9; color: #9a4322; }
.wk.wk .hours { display: grid; margin-top: 14px; }
.wk.wk .hours li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; color: var(--sub); }
.wk.wk .hours li.today { color: var(--ink); font-weight: 700; }
.wk.wk .book { padding: clamp(24px, 3vw, 36px); display: grid; gap: 18px; align-content: start; }
.wk.wk .book > .h3 { font-size: clamp(24px, 2vw, 30px); }
.wk.wk .book > p.sub { font-size: 15.5px; color: var(--sub); margin-top: -8px; }
.wk.wk .field { display: grid; gap: 8px; }
.wk.wk .field label, .wk.wk .field .lbl { font: 700 14px/1.2 var(--sans); color: var(--ink); }
.wk.wk .field label span { font-weight: 500; color: var(--sub); }
.wk.wk .field input, .wk.wk .field select, .wk.wk .field textarea { width: 100%; height: 50px; padding: 0 14px; border-radius: 10px; border: 1.5px solid var(--field); background: #fff; font-size: 16px; color: var(--ink); }
.wk.wk .field textarea { height: 84px; padding: 12px 14px; resize: vertical; }
.wk.wk .field input:focus, .wk.wk .field select:focus, .wk.wk .field textarea:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.wk.wk .field [aria-invalid="true"] { border-color: #b3261e; }
.wk.wk .err { font-size: 13.5px; color: #b3261e; font-weight: 600; }
.wk.wk .row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.wk.wk .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wk.wk .chips .opt { min-height: 44px; font-size: 14px; padding: 6px 14px; }
.wk.wk .tray-card { border: 1px solid var(--line); border-radius: var(--r); padding: 14px; display: grid; gap: 10px; background: var(--ivory); }
.wk.wk .tray-card b { font-size: 14.5px; color: var(--ink); }
.wk.wk .tray-card .thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.wk.wk .tray-card .thumbs div { width: 64px; height: 64px; border-radius: 8px; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; }
.wk.wk .tray-card .thumbs svg { width: 90%; }
.wk.wk .tray-card p { font-size: 13.5px; color: var(--sub); }
.wk.wk .done { display: grid; gap: 12px; }
.wk.wk .done .ok { width: 56px; height: 56px; border-radius: 50%; background: #e8f6ee; color: #1d6b48; display: grid; place-items: center; }
.wk.wk .done .ok svg { width: 26px; height: 26px; }
.wk.wk .done ul { display: grid; gap: 6px; font-size: 15.5px; }
.wk.wk .done ul li { display: flex; gap: 10px; }
.wk.wk .after { margin-top: 24px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding: 26px clamp(24px, 3vw, 36px); background: #fff; border: 1px solid var(--line); border-radius: var(--r); }
.wk.wk .after h3 { grid-column: 1 / -1; font: 700 12.5px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--sub); }
.wk.wk .after li { display: grid; gap: 4px; }
.wk.wk .after li b { font: 500 19px/1.3 var(--serif); color: var(--ink); }
.wk.wk .after li b span { color: var(--gold-ink); margin-right: 8px; }
.wk.wk .after li p { font-size: 15px; color: var(--sub); }
.wk.wk .ft { background: var(--night); color: var(--sub-night); padding-top: clamp(56px, 7vw, 92px); }
.wk.wk .news { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; padding-bottom: 48px; border-bottom: 1px solid var(--line-night); }
.wk.wk .news .h3 { color: #fff; font-size: clamp(26px, 2.4vw, 34px); }
.wk.wk .news p { margin-top: 8px; font-size: 15.5px; }
.wk.wk .news form { display: flex; gap: 10px; }
.wk.wk .news input { flex: 1; min-width: 0; height: 52px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, .35); background: transparent; padding: 0 20px; color: #fff; font-size: 16px; }
.wk.wk .news input::placeholder { color: #9aa2ad; }
.wk.wk .news input:focus { outline: none; border-color: var(--gold); }
.wk.wk .cols { display: grid; grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); gap: 32px; padding: 52px 0; }
.wk.wk .cols h3, .wk.wk .cols h4 { font: 700 12.5px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #fff; margin-bottom: 10px; }
.wk.wk .cols ul { display: grid; }
.wk.wk .cols a { display: inline-flex; align-items: center; min-height: 40px; text-decoration: none; font-size: 15.5px; color: var(--sub-night); }
.wk.wk .cols a:hover { color: #fff; }
.wk.wk .cols .about { font-size: 15.5px; max-width: 34ch; margin-top: 18px; }
.wk.wk .ft .logo { color: #fff; }
.wk.wk .legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 18px 0 26px; border-top: 1px solid var(--line-night); font-size: 14px; color: #9aa2ad; }
.wk.wk .legal a { color: inherit; display: inline-block; padding: 10px 2px; }
.wk.wk .actbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: none; grid-template-columns: 1fr 1.4fr 1fr; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(255, 255, 255, .97); border-top: 1px solid var(--line); box-shadow: 0 -10px 30px -20px rgba(0, 0, 0, .35); transform: translateY(110%); transition: transform .25s; }
.wk.wk .actbar.on { transform: none; }
.wk.wk .actbar a { min-height: 48px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; font: 700 14.5px/1 var(--sans); border: 1.5px solid var(--ink); color: var(--ink); }
.wk.wk .actbar a.main { background: var(--ink); color: #fff; }
.wk.wk .actbar svg { width: 18px; height: 18px; }
.wk.wk .toast { position: fixed; left: 50%; bottom: 24px; z-index: 90; transform: translateX(-50%); max-width: calc(100vw - 32px); padding: 14px 18px; border-radius: 12px; background: var(--ink); color: #fff; font: 500 15px/1.4 var(--sans); box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .6); }
.wk.wk .swap { display: grid; place-items: center; }
.wk.wk .swap > svg { grid-area: 1 / 1; transition: opacity .38s ease; }
.wk.wk .swap > svg.entering, .wk.wk .swap > svg.leaving { opacity: 0; }
.wk.wk .swap > svg.leaving { pointer-events: none; }
.wk.wk .sweep { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; mix-blend-mode: overlay; }
.wk.wk .sweep::before { content: ""; position: absolute; top: -25%; bottom: -25%; left: -70%; width: 46%; background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 246, 222, .92) 50%, rgba(255, 255, 255, 0) 100%); transform: skewX(-14deg); opacity: 0; }
.wk.wk .sweep.run::before { animation: sweep 1.6s cubic-bezier(.45, .05, .25, 1) both; }
@keyframes sweep { 0% { transform: translateX(0) skewX(-14deg); opacity: 0; } 14% { opacity: 1; } 86% { opacity: 1; } 100% { transform: translateX(434.8%) skewX(-14deg); opacity: 0; } }
.wk.wk .hero-media { isolation: isolate; padding: 40px 32px 112px; }
.wk.wk .sc-stage { position: relative; width: min(100%, 580px); aspect-ratio: 400 / 350; transform: perspective(1100px) rotateX(calc(var(--ry, 0) * -5deg)) rotateY(calc(var(--rx, 0) * 7deg)); transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.wk.wk .sc-item { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; opacity: 0; transform: scale(.965); transition: opacity .65s ease, transform 1s cubic-bezier(.2, .7, .2, 1); }
.wk.wk .sc-item.is-on { opacity: 1; transform: none; }
.wk.wk .sc-item svg { width: 100%; height: auto; }
.wk.wk .glow { position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: soft-light; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 40%), rgba(255, 240, 205, .95), rgba(255, 240, 205, 0) 34%); opacity: 0; transition: opacity .45s; }
.wk.wk .hero-media:hover .glow { opacity: 1; }
.wk.wk .sc-foot { position: absolute; left: 32px; right: 32px; bottom: 26px; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.wk.wk .sc-cap { display: grid; gap: 4px; font-size: 15px; color: var(--sub); }
.wk.wk .sc-cap b { color: var(--ink); font-weight: 600; }
.wk.wk .sc-cap a { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); text-decoration: none; }
.wk.wk .sc-cap a svg { width: 17px; height: 17px; transition: transform .2s; }
.wk.wk .sc-cap a:hover svg { transform: translateX(4px); }
.wk.wk .sc-thumbs { display: flex; gap: 10px; }
.wk.wk .sc-thumbs button { width: 56px; height: 56px; padding: 5px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; display: grid; place-items: center; cursor: pointer; transition: border-color .2s, transform .25s, box-shadow .25s; }
.wk.wk .sc-thumbs button:hover { border-color: var(--ink); transform: translateY(-2px); }
.wk.wk .sc-thumbs button[aria-pressed="true"] { border-color: var(--gold-deep); box-shadow: 0 0 0 4px rgba(184, 149, 90, .16); }
.wk.wk .sc-thumbs svg { width: 100%; height: auto; }
.wk.wk .help { padding-block: clamp(44px, 5vw, 68px) 0; }
.wk.wk .help h2 { font: 700 12.5px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--sub); text-align: center; margin-bottom: 28px; }
.wk.wk .help ul { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
.wk.wk .help a { display: grid; justify-items: center; gap: 14px; padding: 4px 2px; border: 0; border-radius: 0; text-decoration: none; font: 600 15px/1.3 var(--sans); color: var(--ink); text-align: center; }
.wk.wk .help a:hover { border-color: transparent; }
.wk.wk .hc { width: 88px; height: 88px; border-radius: 50%; background: var(--ivory); border: 1px solid var(--line); display: grid; place-items: center; transition: background .3s, border-color .3s, transform .3s cubic-bezier(.2, .7, .2, 1); }
.wk.wk .help a .hc svg { width: 32px; height: 32px; color: var(--gold-ink); transition: color .3s; }
.wk.wk .help a:hover .hc, .wk.wk .help a:focus-visible .hc { background: var(--ink); border-color: var(--ink); transform: translateY(-4px); }
.wk.wk .help a:hover .hc svg, .wk.wk .help a:focus-visible .hc svg { color: var(--gold); }
.wk.wk .card .metals { position: relative; z-index: 2; display: flex; gap: 2px; margin-left: -7px; }
.wk.wk .card .metals button { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: none; display: grid; place-items: center; cursor: pointer; }
.wk.wk .card .metals button i { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); transition: box-shadow .2s; }
.wk.wk .card .metals button[aria-checked="true"] i { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--ink); }
.wk.wk .card .metals button:hover i { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--field); }
.wk.wk .save { transition: transform .2s, background .2s; }
.wk.wk .save:hover { transform: scale(1.08); }
.wk.wk .save[aria-pressed="true"] { background: #fff; }
.wk.wk .craft-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.wk.wk .craft-stage { position: sticky; top: calc(var(--hd) + 24px); }
.wk.wk .cr-frame { position: relative; isolation: isolate; aspect-ratio: 1 / 1; max-height: calc(100vh - var(--hd) - 56px); border: 1px solid var(--line); border-radius: var(--r); background: #fff; display: grid; place-items: center; overflow: hidden; }
.wk.wk .cr-layer { grid-area: 1 / 1; width: 80%; opacity: 0; transform: scale(.975); transition: opacity .75s ease, transform 1s cubic-bezier(.2, .7, .2, 1); }
.wk.wk .cr-layer.is-on { opacity: 1; transform: none; }
.wk.wk .cr-layer svg { width: 100%; height: auto; }
.wk.wk .cr-meta { position: absolute; left: 24px; right: 24px; bottom: 20px; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.wk.wk .cr-label { font-size: 15px; color: var(--sub); }
.wk.wk .cr-label b { color: var(--ink); font-weight: 600; }
.wk.wk .cr-dots { display: flex; gap: 8px; }
.wk.wk .cr-dots li { width: 30px; height: 3px; border-radius: 2px; background: var(--line); transition: background .35s; }
.wk.wk .cr-dots li.on { background: var(--gold-deep); }
.wk.wk .craft-steps { display: grid; }
.wk.wk .cr-step { min-height: 56vh; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 24px 0 24px 30px; border-left: 2px solid var(--line); transition: border-color .4s; }
.wk.wk .cr-step.is-active { border-color: var(--gold-deep); }
.wk.wk .cr-step .k { font: 700 12.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-ink); }
.wk.wk .cr-step .h3 { font-size: clamp(26px, 2.4vw, 34px); line-height: 1.15; }
.wk.wk .cr-step p:last-child { font-size: 17px; color: var(--sub); max-width: 40ch; }
.wk.wk .craft-cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: clamp(40px, 5vw, 64px); }
@media (prefers-reduced-motion: no-preference) {
.wk.wk .cr-layer.draw .sk { stroke-dasharray: 1; animation: draw 1.8s cubic-bezier(.45, .05, .25, 1) both; animation-delay: var(--d, 0s); }
.wk.wk .ray { stroke-dasharray: 1; animation: draw 1.1s cubic-bezier(.4, 0, .2, 1) both; }
.wk.wk .ray-head { animation: fadein .3s 1s both; }
}
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes fadein { from { opacity: 0; } }
.wk.wk .st-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.wk.wk .st-side { position: sticky; top: calc(var(--hd) + 32px); display: grid; gap: 18px; }
.wk.wk .st-year { height: 1.04em; overflow: hidden; font: 400 clamp(84px, 9.5vw, 148px)/1 var(--serif); letter-spacing: -.035em; color: var(--ink); }
.wk.wk .st-year span { display: inline-block; }
.wk.wk .st-year span.roll { animation: roll .6s cubic-bezier(.2, .7, .2, 1); }
@keyframes roll { from { transform: translateY(45%); opacity: 0; } }
.wk.wk .st-photo { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r); background: linear-gradient(170deg, #f4f2ee, #e9e5de); display: grid; place-items: center; overflow: hidden; }
.wk.wk .st-layer { grid-area: 1 / 1; width: 38%; opacity: 0; transform: scale(.96); transition: opacity .6s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.wk.wk .st-layer.is-on { opacity: 1; transform: none; }
.wk.wk .st-layer svg { width: 100%; height: auto; }
.wk.wk .st-cap { font-size: 15px; color: var(--sub); }
.wk.wk .st-main .h2 { margin-top: 14px; }
.wk.wk .st-main .lead { margin-top: 18px; }
.wk.wk .chapters { margin-top: 36px; display: grid; }
.wk.wk .ch { position: relative; min-height: 24vh; padding: 26px 0 26px 32px; border-left: 2px solid var(--line); display: grid; gap: 8px; align-content: start; transition: border-color .4s; }
.wk.wk .ch::before { content: ""; position: absolute; left: -7px; top: 30px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--line); transition: border-color .4s, background .4s; }
.wk.wk .ch.is-active { border-color: var(--gold-deep); }
.wk.wk .ch.is-active::before { border-color: var(--gold-deep); background: var(--gold-deep); }
.wk.wk .ch-year { font: 700 12.5px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-ink); }
.wk.wk .ch .h3 { font-size: clamp(22px, 2vw, 28px); }
.wk.wk .ch p:last-child { font-size: 16.5px; color: var(--sub); max-width: 52ch; }
.wk.wk .ch p strong { color: var(--ink); font-weight: 600; }
.wk.wk .rev { gap: 16px; }
.wk.wk .rev .qm { display: block; height: 30px; font: 400 72px/1 var(--serif); color: var(--gold-deep); }
.wk.wk .rev blockquote { color: var(--text); font-style: normal; font: 400 18.5px/1.55 var(--serif); }
.wk.wk .rev figcaption { font-size: 14.5px; color: var(--sub); }
.wk.wk .rev figcaption b { display: block; color: var(--ink); font-weight: 600; }
.wk.wk .size-line { align-items: center; }
.wk.wk .size-line p { font-size: 15px; color: var(--sub); }
.wk.wk .size-svg { flex: none; }
.wk.wk .daybar { margin-top: 16px; }
.wk.wk .db-track { position: relative; height: 6px; border-radius: 3px; background: var(--line); }
.wk.wk .db-fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--f, 0) * 100%); border-radius: 3px; background: linear-gradient(90deg, #cfe9da, #3aa874); }
.wk.wk .db-now { position: absolute; top: 50%; left: calc(var(--f, 0) * 100%); width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; border: 3px solid #2f9b68; }
.wk.wk .daybar.off .db-fill, .wk.wk .daybar.off .db-now { display: none; }
.wk.wk .db-lbl { display: flex; justify-content: space-between; margin-top: 8px; font-size: 13.5px; color: var(--sub); }
.wk.wk .drawer { position: fixed; inset: 0; z-index: 85; display: flex; justify-content: flex-end; background: rgba(11, 14, 20, .4); opacity: 0; transition: opacity .32s; }
.wk.wk .drawer.open { opacity: 1; }
.wk.wk .dr-panel { width: min(430px, 100%); height: 100%; background: #fff; display: grid; grid-template-rows: auto auto 1fr auto; transform: translateX(100%); transition: transform .4s cubic-bezier(.2, .7, .2, 1); box-shadow: -30px 0 60px -30px rgba(0, 0, 0, .35); }
.wk.wk .drawer.open .dr-panel { transform: none; }
.wk.wk .dr-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 18px 6px 28px; }
.wk.wk .dr-head .h3 { font-size: 26px; }
.wk.wk .dr-head .dr-count { font: 600 14.5px/1 var(--sans); color: var(--sub); margin-left: 6px; }
.wk.wk .dr-sub { padding: 0 28px 18px; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--sub); }
.wk.wk .dr-body { overflow-y: auto; }
.wk.wk .dr-list { padding: 4px 28px; display: grid; }
.wk.wk .dr-list li { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.wk.wk .dr-thumb { width: 76px; height: 76px; border: 1px solid var(--line); border-radius: 8px; display: grid; place-items: center; background: #fff; }
.wk.wk .dr-thumb svg { width: 92%; }
.wk.wk .dr-list b { display: block; font-size: 15.5px; font-weight: 600; color: var(--ink); }
.wk.wk .dr-list small { font-size: 14px; color: var(--sub); }
.wk.wk .dr-rm { min-height: 44px; padding: 0 6px; border: 0; background: none; font: 600 14px/1 var(--sans); color: var(--sub); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.wk.wk .dr-rm:hover { color: var(--ink); }
.wk.wk .dr-empty { padding: 28px; display: grid; gap: 12px; justify-items: start; font-size: 15.5px; color: var(--sub); }
.wk.wk .dr-foot { padding: 18px 28px calc(22px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); display: grid; gap: 10px; }
.wk.wk .dr-foot .fine { text-align: center; }
.wk.wk .fly { position: fixed; z-index: 95; pointer-events: none; display: grid; place-items: center; border-radius: 50%; background: #fff; box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .4); }
.wk.wk .fly svg { width: 88%; height: auto; }
.wk.wk .count.bump { animation: bump .55s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes bump { 40% { transform: scale(1.4); } }
.wk.wk .actbar a { position: relative; }
.wk.wk .actbar .count { top: -7px; right: 14px; }
.wk.wk .studio-save[aria-pressed="true"] { background: var(--ink); color: #fff; }
.wk.wk .hd.solid, .wk.wk .hd.mega-on { background: #fff; }
.wk.wk .hd.solid .btn-book, .wk.wk .hd.mega-on .btn-book { background: var(--ink); color: #fff; }
.wk.wk .hd.solid .btn-book:hover, .wk.wk .hd.mega-on .btn-book:hover { background: #2a313c; }
.wk.wk .svc.fin-card { grid-column: span 12; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px 40px; }
.wk.wk .news input { flex: 1 1 auto; }
.wk.wk .visit-media .map-tag { position: absolute; top: 12px; left: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px 7px 10px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 4px 12px -6px rgba(15, 18, 23, .25); font: 700 12.5px/1 var(--sans); color: var(--ink); }
.wk.wk .visit-media a.map .map-tag svg { width: 14px; height: 14px; flex: none; color: var(--gold-ink); }
@media (max-width: 1180px) {
.wk.wk .tel { display: none; }
.wk.wk .nav > ul { gap: 18px; }
.wk.wk .nav-a { font-size: 14.5px; }
}
@media (max-width: 1023px) {
.wk.wk .nav, .wk.wk .hd .icon-btn.s { display: none; }
.wk.wk .menu-btn, .wk.wk .tel-icon { display: grid; }
.wk.wk .help ul { grid-template-columns: repeat(7, 132px); overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut); }
.wk.wk .help ul::-webkit-scrollbar { display: none; }
.wk.wk .reviews { grid-template-columns: minmax(0, 1fr); }
.wk.wk .cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wk.wk .cols > div:first-child { grid-column: 1 / -1; }
.wk.wk .prow { grid-auto-columns: calc((100% - 40px) / 3); }
.wk.wk .svc { grid-column: span 6; }
.wk.wk .svc.custom { grid-template-columns: minmax(0, 1fr); }
.wk.wk .frames { border-left: 0; border-top: 1px solid var(--line); }
.wk.wk .after { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
.wk { --hd: 66px; }
.wk.wk .hero-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
.wk.wk .preview .slot-tag { display: none; }
.wk.wk .hero-copy { padding: 28px var(--gut) 40px; }
.wk.wk .kicker { margin-bottom: 12px; font-size: 12px; }
.wk.wk .tile, .wk.wk .tile.big { grid-column: span 6; }
.wk.wk .tile.big { grid-column: span 12; grid-row: auto; }
.wk.wk .tile.big .slot { min-height: 0; aspect-ratio: 1; }
.wk.wk .studio-card { grid-template-columns: minmax(0, 1fr); }
.wk.wk .preview { position: sticky; top: var(--hd); z-index: 5; background: #fff; border-right: 0; border-bottom: 1px solid var(--line); padding: 10px 16px; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 12px; border-radius: var(--r) var(--r) 0 0; }
.wk.wk .preview .main { width: 120px; }
.wk.wk .preview .main svg { width: 96%; }
.wk.wk .preview .alts { display: none; }
.wk.wk .preview .shown { font-size: 14px; display: grid; gap: 4px; }
.wk.wk .story { grid-template-columns: minmax(0, 1fr); }
.wk.wk .story-art { position: relative; top: 0; }
.wk.wk .story-art .slot { aspect-ratio: 5 / 4; }
.wk.wk .story-art .inset { right: 12px; bottom: 12px; width: 38%; }
.wk.wk .cs-grid { grid-template-columns: minmax(0, 1fr); }
.wk.wk .viz { order: -1; }
.wk.wk .visit { grid-template-columns: minmax(0, 1fr); }
.wk.wk .news { grid-template-columns: minmax(0, 1fr); }
.wk.wk .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wk.wk .prow { grid-auto-columns: 62%; margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut); scroll-padding-inline: var(--gut); }
.wk.wk .arrows { display: none; }
.wk.wk .posts { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 80%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut); scroll-padding-inline: var(--gut); }
.wk.wk .posts::-webkit-scrollbar { display: none; }
.wk.wk .post { scroll-snap-align: start; }
.wk.wk .actbar { display: grid; }
body.wk-has-actbar { padding-bottom: 76px; }
}
@media (max-width: 600px) {
.wk { font-size: 16px; }
.wk.wk .announce .hide-sm { display: none; }
.wk.wk .hd .btn-book, .wk.wk .hd .icon-btn.h { display: none; }
.wk.wk .logo svg { width: 30px; height: 30px; }
.wk.wk .logo .w { font-size: 20px; }
.wk.wk .logo .d { font-size: 10px; }
.wk.wk .hero-cta .btn { width: 100%; }
.wk.wk .tile .meta { padding: 12px 14px 14px; }
.wk.wk .tile .h3 { font-size: 18px; }
.wk.wk .tile .meta p { font-size: 14px; }
.wk.wk .grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wk.wk .grid3[data-ctl="metal"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wk.wk .grid3[data-ctl="metal"] .opt { padding: 6px 8px; }
.wk.wk .rev-list { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 84%; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut); scrollbar-width: none; }
.wk.wk .rev { scroll-snap-align: start; }
.wk.wk .timeline li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.wk.wk .svc { grid-column: span 12; }
.wk.wk .frames .slot > div { padding: 32px 6px 6px; }
.wk.wk .frames .slot span.l { padding: 8px 8px 12px; font-size: 11px; }
.wk.wk .visit-media { grid-template-columns: minmax(0, 1fr); }
.wk.wk .visit-media a.map { border-left: 0; border-top: 1px solid var(--line); height: 150px; }
.wk.wk .visit-info { grid-template-columns: minmax(0, 1fr); }
.wk.wk .row2 { grid-template-columns: minmax(0, 1fr); }
.wk.wk .after { grid-template-columns: minmax(0, 1fr); }
.wk.wk .news form { flex-direction: column; }
.wk.wk .cols { gap: 24px 16px; }
}
@media (max-width: 1100px) {
.wk.wk .nav, .wk.wk .hd .icon-btn.s { display: none; }
.wk.wk .menu-btn, .wk.wk .tel-icon { display: grid; }
}
@media (max-width: 1023px) {
.wk.wk .help ul { grid-template-columns: repeat(7, 112px); overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gut)); padding: 4px var(--gut) 8px; }
.wk.wk .help ul::-webkit-scrollbar { display: none; }
}
@media (max-width: 860px) {
.wk.wk .hero-media { order: -1; height: 50vh; min-height: 330px; max-height: 430px; padding: 18px 16px 88px; }
.wk.wk .sc-stage { height: 100%; width: auto; max-width: 100%; }
.wk.wk .sc-foot { left: 16px; right: 16px; bottom: 16px; }
.wk.wk .craft-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
.wk.wk .craft-stage { top: var(--hd); z-index: 4; margin-inline: calc(-1 * var(--gut)); padding: 6px var(--gut) 10px; background: #fff; border-bottom: 1px solid var(--line); }
.wk.wk .cr-frame { aspect-ratio: auto; height: 36vh; min-height: 230px; max-height: 330px; border: 0; }
.wk.wk .cr-layer { width: auto; height: 84%; }
.wk.wk .cr-layer svg { height: 100%; width: auto; }
.wk.wk .cr-meta { left: 0; right: 0; bottom: 2px; }
.wk.wk .cr-step { min-height: 46vh; justify-content: flex-start; padding: 30px 0 30px 22px; }
.wk.wk .svc.fin-card { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.wk.wk .st-grid { grid-template-columns: minmax(0, 1fr); }
.wk.wk .st-side { position: relative; top: 0; }
.wk.wk .st-year { display: none; }
.wk.wk .st-photo { aspect-ratio: 16 / 10; }
.wk.wk .ch { min-height: 0; }
}
@media (max-width: 600px) {
.wk.wk .hd .icon-btn.h { display: grid; }
.wk.wk .sc-cap { display: none; }
.wk.wk .sc-foot { justify-content: center; }
.wk.wk .sc-thumbs button { width: 50px; height: 50px; }
.wk.wk .help ul { grid-template-columns: repeat(7, 96px); }
.wk.wk .hc { width: 76px; height: 76px; }
.wk.wk .grid3[data-ctl="setting"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wk.wk .cr-label { font-size: 14px; }
.wk.wk .dr-head { padding-left: 20px; }
.wk.wk .dr-sub, .wk.wk .dr-list, .wk.wk .dr-empty, .wk.wk .dr-foot { padding-inline: 20px; }
}
@media (max-width: 400px) {
.wk.wk .hd > .wrap { gap: 10px; }
.wk.wk .logo { gap: 9px; }
.wk.wk .logo .d { font-size: 9.5px; letter-spacing: .14em; }
.wk.wk .actions { gap: 0; }
}
@media (prefers-reduced-motion: reduce) {
.wk, .wk *:where(:not(.wk-foreign *)), .wk *:where(:not(.wk-foreign *))::before, .wk *:where(:not(.wk-foreign *))::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.wk.wk .hero-media.slot { padding: 0; background: var(--night); overflow: hidden; }
.wk.wk .hero-media .sc-stage { position: absolute; inset: 0; width: auto; height: auto; max-width: none; aspect-ratio: auto; transform: translate(calc(var(--rx, 0) * -14px), calc(var(--ry, 0) * -10px)) scale(1.04); transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.wk.wk .sc-item { overflow: hidden; transform: none; }
.wk.wk .sc-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (prefers-reduced-motion: no-preference) {
.wk.wk .sc-item.is-on img { animation: kb 9s ease-out both; }
}
@keyframes kb { from { transform: scale(1.09); } to { transform: scale(1); } }
.wk.wk .hero-media::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 48%; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(11, 14, 20, .82), rgba(11, 14, 20, 0)); }
.wk.wk .hero-media .sc-foot { z-index: 3; }
.wk.wk .hero-media .sc-cap { color: rgba(255, 255, 255, .78); }
.wk.wk .hero-media .sc-cap b, .wk.wk .hero-media .sc-cap a { color: #fff; }
.wk.wk .hero-media .sc-thumbs button { padding: 0; overflow: hidden; border: 2px solid rgba(255, 255, 255, .5); background: #1a1d24; }
.wk.wk .hero-media .sc-thumbs button:hover { border-color: #fff; }
.wk.wk .hero-media .sc-thumbs button[aria-pressed="true"] { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(214, 185, 127, .25); }
.wk.wk .hero-media .sc-thumbs img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.wk.wk .slot.ph { background: #f4f2ee; }
.wk.wk .slot.ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.wk.wk .tile:hover .slot.ph > img { transform: scale(1.04); }
.wk.wk .svc-ph { margin: -28px -28px 6px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r) var(--r) 0 0; background: #f4f2ee; }
.wk.wk .svc-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.wk.wk .svc:hover .svc-ph img { transform: scale(1.04); }
.wk.wk .st-layer.ph { width: 100%; height: 100%; align-self: stretch; justify-self: stretch; }
.wk.wk .st-layer.ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wk.wk .sign .sig-face { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--line); }
.wk.wk .sign .sig-svg { width: 150px; height: auto; color: var(--gold-ink); flex: none; }
.wk.wk .vals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.wk.wk .vals li { display: grid; align-content: start; gap: 10px; padding: 28px 24px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; transition: border-color .25s, transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s; }
.wk.wk .vals li:hover { border-color: var(--gold); transform: translateY(-4px); box-shadow: 0 22px 40px -30px rgba(15, 18, 23, .4); }
.wk.wk .vals .v-ic { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--ivory); color: var(--gold-ink); margin-bottom: 6px; }
.wk.wk .vals .v-ic svg { width: 24px; height: 24px; }
.wk.wk .vals .h3 { font-size: 22px; }
.wk.wk .vals p { font-size: 15.5px; color: var(--sub); }
@media (max-width: 1023px) {
.wk.wk .vals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
.wk.wk .hero-media.slot { padding: 0; }
.wk.wk .hero-media .sc-stage { height: auto; width: auto; }
}
@media (max-width: 600px) {
.wk.wk .vals { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.wk.wk .vals li { grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; padding: 20px; }
.wk.wk .vals .v-ic { grid-row: span 2; margin: 0; width: 46px; height: 46px; }
.wk.wk .sign .sig-svg { width: 120px; }
}
.wk.wk .hero-media.slot { background: #fff; }
.wk.wk .hero-media::after { display: none; }
.wk.wk .hero-media .sc-stage { inset: 24px 24px 104px; transform: perspective(1100px) rotateX(calc(var(--ry, 0) * -4deg)) rotateY(calc(var(--rx, 0) * 6deg)) scale(1); }
.wk.wk .sc-item video, .wk.wk .sc-item img { width: 100%; height: 100%; object-fit: contain; display: block; background: #fff; }
.wk.wk .sc-item.is-on img { animation: none; }
.wk.wk .hero-media .sc-cap { color: var(--sub); }
.wk.wk .hero-media .sc-cap b, .wk.wk .hero-media .sc-cap a { color: var(--ink); }
.wk.wk .hero-media .sc-thumbs button { padding: 3px; background: #fff; border: 1.5px solid var(--line); }
.wk.wk .hero-media .sc-thumbs button:hover { border-color: var(--ink); }
.wk.wk .hero-media .sc-thumbs button[aria-pressed="true"] { border-color: var(--gold-deep); box-shadow: 0 0 0 4px rgba(184, 149, 90, .16); }
.wk.wk .hero-media .sc-thumbs img { object-fit: contain; border-radius: 50%; }
.wk.wk .slot.pv { background: #fff; }
.wk.wk .slot.pv > img, .wk.wk .slot.pv > video { position: absolute; inset: 7%; width: 86%; height: 86%; object-fit: contain; transition: opacity .4s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.wk.wk .slot.pv > video { opacity: 0; }
.wk.wk .slot.pv.playing > video { opacity: 1; }
.wk.wk .slot.pv.playing > img { opacity: 0; }
.wk.wk .tile:hover .slot.pv > img, .wk.wk .post:hover .slot.pv > img { transform: scale(1.04); }
.wk.wk .tile.big .slot.pv > img, .wk.wk .tile.big .slot.pv > video { inset: 4%; width: 92%; height: 92%; }
.wk.wk .card .price .sku { color: #8a8f97; font-size: 13.5px; }
.wk.wk .swap > img, .wk.wk .swap > video { grid-area: 1 / 1; transition: opacity .38s ease; }
.wk.wk .swap > img.entering, .wk.wk .swap > img.leaving, .wk.wk .swap > video.entering, .wk.wk .swap > video.leaving { opacity: 0; }
.wk.wk .preview .main { background: #fff; }
.wk.wk .preview .main > img, .wk.wk .preview .main > video { width: 92%; height: 92%; object-fit: contain; }
.wk.wk .alts button img { width: 100%; height: 100%; object-fit: contain; }
.wk.wk .dr-thumb img, .wk.wk .tray-thumbs img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.wk.wk .fly img { width: 100%; height: 100%; object-fit: contain; }
.wk.wk .cr-layer .cr-photo { width: 100%; height: auto; display: block; }
.wk.wk .slot.pv > video, .wk.wk .sc-item video, .wk.wk .preview .main > video { transform: scale(1.24); }
.wk.wk .sc-item, .wk.wk .preview .main { overflow: hidden; }
@media (max-width: 860px) {
.wk.wk .hero-media .sc-stage { inset: 10px 10px 84px; }
.wk.wk .cr-layer .cr-photo { height: 100%; width: auto; }
}
.wk.wk .slot.pv > video, .wk.wk .sc-item video, .wk.wk .preview .main > video { transform: none; }
.wk.wk .slot.pv { isolation: isolate; }
.wk.wk .slot.pv::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: overlay; background: linear-gradient(100deg, transparent 30%, rgba(255, 246, 222, .9) 50%, transparent 70%); background-size: 260% 100%; background-position: 120% 0; opacity: 0; }
.wk.wk .slot.pv.flash::after { animation: pvflash 1.1s cubic-bezier(.45, .05, .25, 1); }
@keyframes pvflash { 0% { opacity: 1; background-position: 120% 0; } 100% { opacity: 1; background-position: -20% 0; } }
.wk.wk .card .slot.pv > img, .wk.wk .card .slot.pv > video { inset: 4%; width: 92%; height: 92%; }
.wk.wk .sc-item video { position: absolute; inset: 0; width: 100%; height: 100%; }
.wk.wk .nav { min-width: 0; }
.wk.wk .nav-a { font-size: clamp(14px, 1.05vw, 15px); }
@media (max-width: 1439px) {
.wk.wk .hd .tel { display: none; }
.wk.wk .hd .tel-icon { display: grid; }
.wk.wk .nav > ul { gap: clamp(14px, 1.5vw, 24px); }
.wk.wk .hd > .wrap { gap: 20px; }
}
@media (max-width: 1240px) {
.wk.wk .nav, .wk.wk .hd .icon-btn.s { display: none; }
.wk.wk .menu-btn { display: grid; }
}
@media (min-width: 861px) and (max-width: 1180px) {
.wk.wk .hero-media .sc-foot { flex-direction: column; align-items: flex-start; gap: 12px; }
.wk.wk .hero-media .sc-stage { bottom: 150px; }
}
@media (max-width: 374px) {
.wk.wk .hd .tel-icon { display: none; }
.wk.wk .logo .w { font-size: 19px; }
}
/* ===== Wulf kit: rules for running inside WordPress / Elementor ===== */

.wk.wk .slot-tag { display: none !important; }
.wk-site-header { position: relative; z-index: 70; }
.wk-sticky { position: sticky; z-index: 60; }
.elementor-widget-container > .wk { width: 100%; }
.e-con > .elementor-widget[class*="elementor-widget-wk-"] { width: 100%; }
.wk { display: block; }
.wk.wk-portal { display: contents; }

/* Phone menu: a top-level link's arrow keeps the size of the open/close arrows. */
.wk.wk .sheet nav > a svg { width: 20px; height: 20px; flex: none; }

/* Header search overlay. */
.wk.wk .hd > .wrap { position: relative; }
.wk.wk .hd-search { position: absolute; inset: 0 var(--gut); display: flex; align-items: center; gap: 10px; background: inherit; z-index: 3; }
.wk:not(.hd-ink) .hd.searching .hd-search, .wk.hd-ink .hd.searching.solid .hd-search { background: var(--bg); }
.wk.wk .hd-search[hidden] { display: none; }
.wk.wk .hd-search input { flex: 1; height: 46px; padding: 0 18px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font: 500 16px/1 var(--sans); }
.wk.wk .hd-search input:focus { outline: none; border-color: var(--ink); }
.wk:not(.hd-ink) .hd.searching, .wk.hd-ink .hd.searching.solid { background: var(--bg); color: var(--ink); }
/* A dark header stays dark while searching: the field covers the menu in the header's own colour, light on dark */
.wk.hd-ink .hd.searching:not(.solid) > .wrap { background-color: inherit; }
.wk.hd-ink .hd.searching:not(.solid) .hd-search input { border: 0; border-bottom: 1.5px solid rgba(255, 255, 255, .45); border-radius: 0; background-color: transparent; color: #fff; }
.wk.hd-ink .hd.searching:not(.solid) .hd-search input:focus { border-bottom-color: var(--gold); }
.wk.hd-ink .hd.searching:not(.solid) .hd-search input::placeholder { color: rgba(255, 255, 255, .62); }
.wk.hd-ink .hd.searching:not(.solid) .hd-search .icon-btn { color: #fff; }
.wk.wk .hd .lg-solid { display: none; }
.wk.wk .hd.solid .lg-solid, .wk.wk .hd.mega-on .lg-solid, .wk.wk .hd.searching .lg-solid { display: block; }
.wk.wk .hd.solid .lg-solid + .lg-top, .wk.wk .hd.solid .lg-top:has(+ .lg-solid), .wk.wk .hd.mega-on .lg-top:has(+ .lg-solid) { display: none; }
.wk.wk .logo img { max-height: 46px; width: auto; }
/* Image logos: Header and Footer › Logo height / width set the size (and lift the 46px cap). The footer
   logo starts at 44px and never gets wider than its column; the header bar grows with a taller logo. */
.wk.wk .ft .logo { max-width: 100%; }
.wk.wk .ft .logo img { height: 44px; }
.wk.wk .hd:has(.logo img) { height: auto; min-height: var(--hd); }
.wk.wk .hd:has(.logo img) > .wrap { min-height: var(--hd); }
.wk.wk .mega-grid { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); }
.wk.wk .mega-grid > .mega-feature { grid-column: span 1; }

/* Metal swatches. */
.wk.wk .sw-white, .wk.wk .sw.sw-white { background: linear-gradient(135deg, #fff, #aeb5be); }
.wk.wk .sw-yellow, .wk.wk .sw.sw-yellow { background: linear-gradient(135deg, #fdf1c9, #c49b46); }
.wk.wk .sw-rose, .wk.wk .sw.sw-rose { background: linear-gradient(135deg, #fde6db, #c57e64); }
.wk.wk .sw-platinum, .wk.wk .sw.sw-platinum { background: linear-gradient(135deg, #f4f6f8, #8f99a5); }

/* Product row: columns per screen come from the widget settings. */
.wk.wk .prow { --per: 4; --gap: 20px; gap: var(--gap); grid-auto-columns: calc((100% - (var(--per) - 1) * var(--gap)) / var(--per)); }
@media (max-width: 1100px) { .wk.wk .prow { grid-auto-columns: calc((100% - 2 * var(--gap)) / 3); } }
@media (max-width: 760px) { .wk.wk .prow { grid-auto-columns: 62%; } }

/* Product photo on white vs. photo filling the frame. */
.wk.wk .slot.pv { background: #fff; }
.wk.wk .slot.pv > img, .wk.wk .slot.pv > video { width: 100%; height: 100%; object-fit: contain; }
.wk.wk .slot.pv:not(.fit-cover) > :is(img, video), .wk.wk .sc-item.pr :is(video, img) { mix-blend-mode: multiply; }
.wk.wk .slot.pv.fit-cover > img, .wk.wk .slot.pv.fit-cover > video { object-fit: cover; }
.wk.wk .post .slot.pv { aspect-ratio: 4 / 3; border: 1px solid var(--line); border-radius: var(--r); display: grid; place-items: center; }
.wk.wk .post .slot.pv:not(.fit-cover) > img { width: 72%; height: 72%; }
/* One size for the piece in every frame (90%), centred; a photo filling its frame starts at its corner. */
.wk.wk .slot.pv:not(.fit-cover) > :is(img, video), .wk.wk :is(.card, .tile, .post) .slot.pv:not(.fit-cover) > :is(img, video) { inset: 5%; width: 90%; height: 90%; }
.wk.wk .slot.pv.fit-cover > :is(img, video), .wk.wk :is(.card, .tile, .post) .slot.pv.fit-cover > :is(img, video) { inset: 0; width: 100%; height: 100%; }
.wk.wk :is(.pgh-media, .split-media):not(.fit-cover) > img { width: 90%; height: 90%; }

/* "How can we help" circles: count follows the items. */
.wk.wk .help ul { grid-template-columns: repeat(var(--n, 7), minmax(0, 1fr)); }
@media (max-width: 1100px) { .wk.wk .help ul { grid-template-columns: repeat(var(--n, 7), 132px); } }
@media (max-width: 760px) { .wk.wk .help ul { grid-template-columns: repeat(var(--n, 7), 112px); } }
@media (max-width: 420px) { .wk.wk .help ul { grid-template-columns: repeat(var(--n, 7), 96px); } }

/* Story text from the editor. */
.wk.wk .ch-text p { margin: 0 0 14px; }
.wk.wk .ch-text p:last-child { margin-bottom: 0; }
.wk.wk .ch-text a { text-decoration: underline; text-underline-offset: 3px; }

/* Visit: optional form / map. */
.wk.wk .visit.no-form { grid-template-columns: 1fr; }
.wk.wk .visit-media.one { grid-template-columns: 1fr; }
.wk.wk .visit-media .map iframe { display: block; width: 100%; height: 100%; min-height: 260px; border: 0; }
.wk.wk .visit-media div.map { position: relative; border-left: 1px solid var(--line); background: #eef0f2; }
.wk.wk .visit-media.one div.map { border-left: 0; }
@media (max-width: 860px) { .wk.wk .visit-media.one div.map { height: 220px; } .wk.wk .visit-media.one div.map iframe { min-height: 0; } }
/* A live map beside the photo: the row is at least 260px, the photo fills it and the map fills the whole row. */
@media (min-width: 601px) {
	.wk.wk .visit-media:not(.one):has(> div.map) { grid-template-rows: minmax(260px, auto); }
	.wk.wk .visit-media:not(.one):has(> div.map) .slot { place-self: stretch; }
	.wk.wk .visit-media:not(.one):has(> div.map) .slot img { width: 100%; height: 100%; object-fit: cover; }
	.wk.wk .visit-media:not(.one) div.map iframe { min-height: 0; }
}

/* Shine sweep across a product photo. */
.wk.wk .pv.flash::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .7) 50%, transparent 70%); transform: translateX(-100%); animation: wkflash .9s ease both; pointer-events: none; }
@keyframes wkflash { to { transform: translateX(100%); } }

/* Editor: keep animated bits visible while editing. */
.elementor-editor-active .wk.wk .rv { opacity: 1 !important; transform: none !important; }
.elementor-editor-active .wk-sticky { position: relative; }

/* "Tuck under the section above": read as one section with the one before it. */
.wk.wk .sec.join { padding-top: 0; margin-top: calc(-1 * var(--sec)); }
.elementor-editor-active .wk.wk .sec.join { margin-top: 0; }

/* ================= Inner-page sections ================= */

/* Page banner */
.wk.wk .pgh { padding-block: clamp(56px, 7vw, 104px); }
.wk.wk .pgh-grid { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; }
.wk.wk .pgh.has-media .pgh-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.wk.wk .pgh.no-media .pgh-copy { max-width: 820px; }
.wk.wk .pgh.center .pgh-copy { margin-inline: auto; text-align: center; }
.wk.wk .pgh.center .lead { margin-inline: auto; }
.wk.wk .pgh.center .crumbs, .wk.wk .pgh.center .pgh-cta, .wk.wk .pgh.center .trust { justify-content: center; }
.wk.wk .pgh .eyebrow { color: var(--gold-ink); }
.wk.wk .pgh.dark .eyebrow { color: var(--gold); }
.wk.wk .pgh-title { margin-top: 14px; font-size: clamp(38px, 4.4vw, 64px); line-height: 1.06; }
.wk.wk .pgh .lead { margin-top: 18px; }
.wk.wk .pgh-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.wk.wk .pgh-call { margin-top: 18px; font-size: 15px; color: var(--sub); }
.wk.wk .pgh-call a { font-weight: 700; color: var(--ink); }
.wk.wk .pgh.dark .pgh-call { color: var(--sub-night); }
.wk.wk .pgh.dark .pgh-call a { color: #fff; }
.wk.wk .pgh:not(.dark) .trust { border-top-color: var(--line); }
.wk.wk .pgh:not(.dark) .trust li { color: var(--text); }
.wk.wk .pgh:not(.dark) .trust svg { color: var(--gold-ink); }
.wk.wk .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 20px; font: 600 13.5px/1.4 var(--sans); color: var(--sub); }
.wk.wk .crumbs a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: transparent; transition: text-decoration-color .2s; }
.wk.wk .crumbs a:hover { text-decoration-color: currentColor; }
.wk.wk .crumbs [aria-current] { color: var(--ink); }
.wk.wk .dark .crumbs { color: var(--sub-night); }
.wk.wk .dark .crumbs [aria-current] { color: #fff; }
.wk.wk .pgh-media { position: relative; margin: 0; aspect-ratio: 5 / 4; border-radius: var(--r); overflow: hidden; background: #fff; display: grid; place-items: center; }
.wk.wk .pgh:not(.dark) .pgh-media { border: 1px solid var(--line); }
.wk.wk .pgh-media > img { width: 80%; height: 80%; object-fit: contain; }
.wk.wk .pgh-media.fit-cover > img { width: 100%; height: 100%; object-fit: cover; }
.wk.wk .pgh-cap { position: absolute; left: 16px; bottom: 16px; padding: 9px 16px; border-radius: 999px; background: rgba(255, 255, 255, .94); box-shadow: 0 4px 14px -8px rgba(15, 18, 23, .4); font: 600 14px/1.3 var(--sans); color: var(--ink); }
.wk.wk .pgh-cap a { display: inline-flex; align-items: center; gap: 6px; }
.wk.wk .pgh-cap svg { width: 15px; height: 15px; }
@media (max-width: 860px) {
	.wk.wk .pgh.has-media .pgh-grid { grid-template-columns: minmax(0, 1fr); }
	.wk.wk .pgh-media { aspect-ratio: 4 / 3; }
}

/* Text & picture */
.wk.wk .split { display: grid; gap: clamp(32px, 6vw, 88px); align-items: center; }
.wk.wk .split.has-media { --split: 48%; grid-template-columns: minmax(0, var(--split)) minmax(0, 1fr); }
.wk.wk .split.has-media.media-left { grid-template-columns: minmax(0, 1fr) minmax(0, var(--split)); }
.wk.wk .split.media-left .split-fig { order: -1; }
.wk.wk .split:not(.has-media) .split-copy { max-width: 820px; }
.wk.wk .split .eyebrow { color: var(--gold-ink); }
.wk.wk .dark .split .eyebrow { color: var(--gold); }
.wk.wk .split .h2 { margin-top: 14px; }
.wk.wk .split-text { margin-top: 18px; font-size: 17px; line-height: 1.72; color: var(--sub); }
.wk.wk .split-text > * + * { margin-top: 14px; }
.wk.wk .split-text a { color: var(--gold-ink); text-decoration: underline; text-underline-offset: 3px; }
.wk.wk .split-text b, .wk.wk .split-text strong { color: var(--ink); }
.wk.wk .dark .split-text { color: var(--sub-night); }
.wk.wk .dark .split-text b, .wk.wk .dark .split-text strong { color: #fff; }
.wk.wk .dark .split-text a { color: var(--gold); }
.wk.wk .tick-list { display: grid; gap: 12px; margin-top: 24px; }
.wk.wk .tick-list li { display: flex; gap: 12px; align-items: flex-start; font: 600 15.5px/1.45 var(--sans); color: var(--ink); }
.wk.wk .tick-list svg { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--gold-ink); }
.wk.wk .dark .tick-list li { color: #eef0f3; }
.wk.wk .dark .tick-list svg { color: var(--gold); }
.wk.wk .split-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 32px; }
.wk.wk .split-fig { margin: 0; }
.wk.wk .split-media { aspect-ratio: 20 / 17; border-radius: var(--r); overflow: hidden; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; }
.wk.wk .split-media > img { width: 80%; height: 80%; object-fit: contain; }
.wk.wk .split-media.fit-cover > img { width: 100%; height: 100%; object-fit: cover; }
.wk.wk .dark .split-media { border-color: var(--line-night); }
.wk.wk .split-cap { margin-top: 12px; font-size: 14px; color: var(--sub); }
.wk.wk .dark .split-cap { color: var(--sub-night); }
@media (max-width: 860px) {
	.wk.wk .split.has-media, .wk.wk .split.has-media.media-left { grid-template-columns: minmax(0, 1fr); }
	.wk.wk .split.media-left .split-fig { order: 0; }
}

/* Steps */
.wk.wk .steps { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 20px; }
.wk.wk .steps li { display: grid; align-content: start; gap: 10px; padding: 28px 24px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; transition: border-color .25s, transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s; }
.wk.wk .st-mk { width: 46px; height: 46px; margin-bottom: 8px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--gold-deep); background: #fff; color: var(--gold-ink); font: 500 20px/1 var(--serif); transition: background-color .25s, color .25s; }
.wk.wk .st-mk svg { width: 20px; height: 20px; }
.wk.wk .steps p { font-size: 15.5px; line-height: 1.6; color: var(--sub); }
.wk.wk .steps-cta { display: flex; justify-content: center; margin-top: 40px; }
.wk.wk .dark .steps li { background: rgba(255, 255, 255, .04); border-color: var(--line-night); }
.wk.wk .dark .st-mk { background: transparent; color: var(--gold); border-color: var(--gold); }
.wk.wk .dark .steps p { color: var(--sub-night); }
@media (max-width: 1023px) { .wk.wk .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .wk.wk .steps { grid-template-columns: minmax(0, 1fr); } .wk.wk .steps li { padding: 22px 20px; } }

/* Lists */
.wk.wk .lists { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 20px; }
.wk.wk .lists.boxed > div { padding: 28px 26px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.wk.wk .lists .v-ic { width: 46px; height: 46px; margin-bottom: 14px; border-radius: 50%; display: grid; place-items: center; background: var(--ivory); color: var(--gold-ink); }
.wk.wk .lists .v-ic svg { width: 21px; height: 21px; }
.wk.wk .lists .l-text { margin-top: 8px; font-size: 15.5px; color: var(--sub); }
.wk.wk .lists ul { margin-top: 16px; column-gap: 24px; }
.wk.wk .lists li { position: relative; break-inside: avoid; padding-left: 26px; margin-bottom: 10px; font-size: 15.5px; line-height: 1.5; color: var(--text); }
.wk.wk .lists li b { color: var(--ink); }
.wk.wk .lists.mk-check li::before { content: ""; position: absolute; left: 0; top: .2em; width: 16px; height: 16px; background-color: var(--gold-deep); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%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 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.wk.wk .lists.mk-dot li::before { content: ""; position: absolute; left: 6px; top: .6em; width: 6px; height: 6px; border-radius: 50%; background-color: var(--gold-deep); }
.wk.wk .lists.mk-none li { padding-left: 0; }
.wk.wk .lists .link { margin-top: 8px; }
.wk.wk .dark .lists.boxed > div { background: rgba(255, 255, 255, .04); border-color: var(--line-night); }
.wk.wk .dark .lists li { color: #e3e6eb; }
.wk.wk .dark .lists li b { color: #fff; }
.wk.wk .dark .lists .l-text { color: var(--sub-night); }
.wk.wk .dark .lists .v-ic { background: rgba(255, 255, 255, .06); color: var(--gold); }
@media (max-width: 1023px) { .wk.wk .lists { grid-template-columns: repeat(min(var(--n, 3), 2), minmax(0, 1fr)); } }
@media (max-width: 600px) { .wk.wk .lists { grid-template-columns: minmax(0, 1fr); } .wk.wk .lists ul { columns: 1 !important; } }

/* Questions */
.wk.wk .faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.wk.wk .faq.stack { grid-template-columns: minmax(0, 1fr); gap: 0; }
.wk.wk .faq.stack .faq-list { max-width: 900px; }
.wk.wk .faq:not(.stack) .faq-side { position: sticky; top: calc(var(--hd) + 24px); }
.wk.wk .faq-side .shead { margin-bottom: 18px; }
.wk.wk .faq-list details { border-bottom: 1px solid var(--line); transition: background-color .2s; }
.wk.wk .faq-list details:first-child { border-top: 1px solid var(--line); }
.wk.wk .faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 6px; cursor: pointer; list-style: none; font: 600 17px/1.4 var(--sans); color: var(--ink); }
.wk.wk .faq-list summary::-webkit-details-marker { display: none; }
.wk.wk .faq-list .pm { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--ivory); color: var(--ink); }
.wk.wk .faq-list .pm::before, .wk.wk .faq-list .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; margin: -.8px 0 0 -6px; background: currentColor; transition: transform .25s; }
.wk.wk .faq-list .pm::after { transform: rotate(90deg); }
.wk.wk .faq-list details[open] .pm::after { transform: rotate(90deg) scaleX(0); }
.wk.wk .faq-a { padding: 0 6px 24px; max-width: 70ch; font-size: 16px; line-height: 1.7; color: var(--sub); }
.wk.wk .faq-a > * + * { margin-top: 12px; }
.wk.wk .faq-a a { color: var(--gold-ink); text-decoration: underline; text-underline-offset: 3px; }
.wk.wk .faq-a ul { list-style: disc; padding-left: 1.2em; }
.wk.wk .dark .faq-list details { border-color: var(--line-night); }
.wk.wk .dark .faq-list summary { color: #fff; }
.wk.wk .dark .faq-list .pm { background: rgba(255, 255, 255, .08); color: #fff; }
.wk.wk .dark .faq-a { color: var(--sub-night); }
@media (max-width: 860px) {
	.wk.wk .faq { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	.wk.wk .faq:not(.stack) .faq-side { position: static; }
	.wk.wk .faq-list summary { padding: 18px 2px; font-size: 16px; }
}

/* Call to action */
.wk.wk .cta-box { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
.wk.wk .cta-box.has-media { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.wk.wk .cta-box .eyebrow { color: var(--gold-ink); }
.wk.wk .dark .cta-box .eyebrow { color: var(--gold); }
.wk.wk .cta-box .h2 { margin-top: 12px; }
.wk.wk .cta-box .lead { margin-top: 14px; }
.wk.wk .cta-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.wk.wk .cta-call { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; font-size: 15px; color: var(--sub); }
.wk.wk .cta-call svg { width: 16px; height: 16px; color: var(--gold-ink); }
.wk.wk .cta-call a { font-weight: 700; color: var(--ink); }
.wk.wk .dark .cta-call { color: var(--sub-night); }
.wk.wk .dark .cta-call a { color: #fff; }
.wk.wk .dark .cta-call svg { color: var(--gold); }
.wk.wk .cta-media { border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 3; }
.wk.wk .cta-media img { width: 100%; height: 100%; object-fit: cover; }
.wk.wk .cta-card .cta-box { padding: clamp(32px, 5vw, 64px); border: 1px solid var(--line); border-radius: calc(var(--r) * 1.6); background: var(--ivory); }
.wk.wk .sec.cta-card.dark { background: var(--bg); }
.wk.wk .cta-card.dark .cta-box { background: var(--night); border-color: var(--night); }
.wk.wk .cta-center .cta-box { justify-items: center; text-align: center; }
.wk.wk .cta-center .lead { margin-inline: auto; }
.wk.wk .cta-center .cta-btns, .wk.wk .cta-center .cta-call { justify-content: center; }
@media (max-width: 860px) { .wk.wk .cta-box.has-media { grid-template-columns: minmax(0, 1fr); } }

/* Long text */
.wk.wk .prose { max-width: 760px; font-size: 17px; line-height: 1.75; color: var(--text); }
.wk.wk .prose > * + * { margin-top: 1em; }
.wk.wk .prose h2 { margin-top: 1.6em; font: 400 clamp(26px, 2.4vw, 34px)/1.2 var(--serif); color: var(--ink); }
.wk.wk .prose h3 { margin-top: 1.4em; font: 400 22px/1.3 var(--serif); color: var(--ink); }
.wk.wk .prose h4 { margin-top: 1.2em; font: 700 16px/1.4 var(--sans); color: var(--ink); }
.wk.wk .prose ul { list-style: disc; padding-left: 1.3em; }
.wk.wk .prose ol { list-style: decimal; padding-left: 1.3em; }
.wk.wk .prose li + li { margin-top: .4em; }
.wk.wk .prose a { color: var(--gold-ink); text-decoration: underline; text-underline-offset: 3px; }
.wk.wk .prose blockquote { margin: 1.4em 0; padding-left: 20px; border-left: 3px solid var(--gold); font: italic 400 21px/1.5 var(--serif); color: var(--ink); }
.wk.wk .prose img { height: auto; border-radius: var(--r); }
.wk.wk .prose-center .prose, .wk.wk .prose-center .shead > div { margin-inline: auto; }
.wk.wk .prose-center .shead { justify-content: center; text-align: center; }
.wk.wk .prose-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.wk.wk .prose-center .prose-cta { justify-content: center; }
.wk.wk .dark .prose { color: #e3e6eb; }
.wk.wk .dark .prose :is(h2, h3, h4), .wk.wk .dark .prose blockquote { color: #fff; }
.wk.wk .dark .prose a { color: var(--gold); }

/* OM Catalog widgets placed by the page library: page width and side margins. */
.e-con.wk-om-box, .elementor-element.wk-om-box { box-sizing: border-box; width: 100%; max-width: calc(1240px + 2 * clamp(20px, 5vw, 56px)); margin-inline: auto; padding: 8px clamp(20px, 5vw, 56px) clamp(40px, 5vw, 64px); }

/* ================= Calmer look =================
   On "Home (simpler)" (page style "calm") or everywhere via Wulf Kit › Settings › Calmer look. */
body.wk-calm .wk { font-size: 17.5px; }
body.wk-calm .wk.wk .lead { font-size: clamp(18px, 1.3vw, 19.5px); }
body.wk-calm .wk.wk .gold-em { font-style: inherit; color: inherit; }
body.wk-calm .wk.wk .hero .gold-em { font-style: italic; color: var(--gold); }
body.wk-calm .wk.wk .shead .eyebrow { display: none; }
body.wk-calm .wk.wk .shead .h2 { margin-top: 0; }
body.wk-calm .wk.wk .rule { border-top-color: transparent; }
body.wk-calm .wk.wk .sec { padding-block: calc(var(--sec) * 1.1); }
body.wk-calm .wk.wk .sec.join { padding-top: 0; margin-top: calc(-1.1 * var(--sec)); }
body.wk-calm .wk.wk .vals li { border-color: transparent; background: transparent; padding: 8px 4px; }
body.wk-calm .wk.wk .vals li:hover { transform: none; box-shadow: none; }
body.wk-calm .wk.wk .svc:not(.custom):not(.fin-card) { border-color: transparent; background: transparent; padding: 0; gap: 10px; }
body.wk-calm .wk.wk .svc:not(.custom):not(.fin-card) .svc-ph { margin: 0 0 8px; border-radius: var(--r); }
body.wk-calm .wk.wk .tile .meta { border-top-color: transparent; }
body.wk-calm .wk.wk .split .eyebrow { color: var(--sub); }

/* Google rating line beside a section title */
.wk.wk .v-rating { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font: 600 15px/1.3 var(--sans); color: var(--sub); }
.wk.wk .v-rating .stars { display: flex; gap: 2px; color: var(--gold-deep); }
.wk.wk .v-rating .stars svg { width: 17px; height: 17px; }
.wk.wk .v-rating b { font: 400 24px/1 var(--serif); color: var(--ink); }
/* The label and its arrow wrap together, so the arrow never sits alone on a line. */
.wk.wk .v-rating .v-lab { display: inline-flex; align-items: center; gap: 10px; }
.wk.wk .v-rating > svg, .wk.wk .v-rating .v-lab > svg { flex: none; width: 17px; height: 17px; transition: transform .2s; }
.wk.wk .v-rating:hover > svg, .wk.wk .v-rating:hover .v-lab > svg { transform: translateX(3px); }
.wk.wk .dark .v-rating { color: var(--sub-night); }
.wk.wk .dark .v-rating b { color: #fff; }

/* "How your ring comes together", compact: one screen, steps play in turn */
.wk.wk .craft-compact { align-items: center; }
.wk.wk .craft-compact .craft-stage { position: static; }
.wk.wk .craft-compact .cr-frame { aspect-ratio: 1 / 1; max-height: 560px; }
.wk.wk .craft-compact .craft-steps { gap: 6px; }
.wk.wk .craft-compact .cr-step { position: relative; min-height: 0; padding: 20px 24px; gap: 0; border-left: 0; border-radius: var(--r); cursor: pointer; overflow: hidden; transition: background-color .3s; }
.wk.wk .craft-compact .cr-step:hover, .wk.wk .craft-compact .cr-step.is-active { background: var(--ivory); }
.wk.wk .craft-compact .cr-step .k { margin-bottom: 6px; }
.wk.wk .craft-compact .cr-step .h3 { font-size: clamp(21px, 1.8vw, 27px); }
.wk.wk .craft-compact .cr-step p:last-child { max-height: 0; opacity: 0; margin-top: 0; font-size: 16px; transition: max-height .5s ease, opacity .4s ease, margin-top .4s ease; }
.wk.wk .craft-compact .cr-step.is-active p:last-child { max-height: 9em; opacity: 1; margin-top: 10px; }
.wk.wk .craft-compact .cr-step::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: 0; height: 2px; border-radius: 2px; background: var(--gold-deep); transform: scaleX(0); transform-origin: left; }
.wk.wk .craft-compact .cr-step.is-active::after { animation: wkbar var(--t, 4s) linear both; }
.wk.wk .craft-compact:hover .cr-step.is-active::after { animation-play-state: paused; }
.wk.wk .craft-compact.picked .cr-step::after { opacity: 0; }
@keyframes wkbar { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .wk.wk .craft-compact .cr-step::after { display: none; } }
.wk.wk .dark .craft-compact .cr-step:hover, .wk.wk .dark .craft-compact .cr-step.is-active { background: rgba(255, 255, 255, .05); }
@media (max-width: 860px) {
	.wk.wk .craft-compact .craft-stage { position: static; margin: 0 0 14px; padding: 0; border: 0; background: none; }
	.wk.wk .craft-compact .cr-frame { width: 100%; aspect-ratio: auto; height: 320px; max-height: none; border: 1px solid var(--line); }
	.wk.wk .craft-compact .cr-layer { height: 74%; }
	.wk.wk .craft-compact .cr-meta { left: 16px; right: 16px; bottom: 12px; }
	.wk.wk .craft-compact .cr-step { padding: 16px 18px; }
}

/* Spotlight: one ring, large, in 360° */
.wk.wk .spot { overflow-x: clip; }
.wk.wk .spot .shead { margin-bottom: 0; }
.wk.wk .spot-grid { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: clamp(24px, 3vw, 40px); }
.wk.wk .spot-head { width: 100%; }
.wk.wk .spot-media { position: relative; width: 100%; display: grid; justify-items: center; }
.wk.wk .spot-media::before { content: ""; position: absolute; left: 50%; top: 50%; width: min(92vw, 980px); max-width: 140%; aspect-ratio: 2 / 1; transform: translate(-50%, -50%); border-radius: 50%; background-color: rgba(214, 185, 127, .16); filter: blur(60px); pointer-events: none; z-index: 0; }
.wk.wk .spot.glow-off .spot-media::before { display: none; }
.wk.wk .spot-ctl { position: relative; z-index: 1; display: grid; justify-items: center; gap: 22px; width: 100%; }
.wk.wk .spot-ring { position: relative; z-index: 1; width: min(100%, 720px); aspect-ratio: 720 / 460; border-radius: calc(var(--r) * 2); overflow: hidden; background-color: #fff; box-shadow: 0 40px 80px -50px rgba(15, 18, 23, .35); }
.wk.wk .spot-ring > video, .wk.wk .spot-ring > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* Frame shapes */
.wk.wk .spot.st-circle .spot-ring { width: min(100%, 560px); aspect-ratio: 1; border-radius: 50%; }
.wk.wk .spot.st-circle .spot-ring > video, .wk.wk .spot.st-circle .spot-ring > img { inset: 6%; width: 88%; height: 88%; }
.wk.wk .spot.st-none .spot-ring { border-radius: 0; box-shadow: none; }
/* Video background: the films are white, "multiply" turns that white into the color behind */
.wk.wk .spot.vb-section .spot-ring { background-color: transparent; box-shadow: none; }
.wk.wk .spot.vb-section:not(.dark) .spot-media::before { display: none; }
.wk.wk .spot.vb-section .spot-ring > video, .wk.wk .spot.vb-section .spot-ring > img,
.wk.wk .spot.vb-custom .spot-ring > video, .wk.wk .spot.vb-custom .spot-ring > img { mix-blend-mode: multiply; }
.wk.wk .spot.vb-custom .spot-ring { background-color: #f3ede4; }
.wk.wk .spot.dark.vb-section .spot-ring { background-color: #fff; box-shadow: 0 40px 80px -50px rgba(0, 0, 0, .6); }
/* Side by side */
.wk.wk .spot.lay-split .spot-grid, .wk.wk .spot.lay-split-r .spot-grid { grid-template-columns: minmax(0, var(--spot-split, 40%)) minmax(0, 1fr); grid-template-areas: "head media" "ctl media"; grid-template-rows: auto 1fr; align-items: start; justify-items: start; column-gap: clamp(32px, 5vw, 80px); row-gap: 28px; }
.wk.wk .spot.lay-split-r .spot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, var(--spot-split, 40%)); grid-template-areas: "media head" "media ctl"; }
.wk.wk .spot:is(.lay-split, .lay-split-r) .spot-head { grid-area: head; align-self: end; }
.wk.wk .spot:is(.lay-split, .lay-split-r) .spot-media { grid-area: media; align-self: center; }
.wk.wk .spot:is(.lay-split, .lay-split-r) .spot-ctl { grid-area: ctl; justify-items: start; }
.wk.wk .spot:is(.lay-split, .lay-split-r) .shead.center { justify-content: flex-start; text-align: left; }
.wk.wk .spot:is(.lay-split, .lay-split-r) .shead.center .lead { margin-inline: 0; }
.wk.wk .spot:is(.lay-split, .lay-split-r) :is(.spot-metals, .spot-pick, .spot-cta) { justify-content: flex-start; }
.wk.wk .spot:is(.lay-split, .lay-split-r) .spot-cap { text-align: left; }
.wk.wk .spot:is(.lay-split, .lay-split-r) .spot-cta { margin-top: 8px; }
.wk.wk .spot:is(.lay-split, .lay-split-r) .spot-ring { width: 100%; }
.wk.wk .spot:is(.lay-split, .lay-split-r).st-circle .spot-ring { width: min(100%, 560px); }
/* Wide: the ring fills the screen width */
.wk.wk .spot.lay-wide .spot-media { width: 100vw; margin-inline: calc(50% - 50vw); }
.wk.wk .spot.lay-wide .spot-ring { width: 100%; aspect-ratio: 16 / 7; max-height: 78vh; }
.wk.wk .spot.lay-wide.st-card .spot-ring { width: calc(100% - 2 * clamp(16px, 3vw, 40px)); }
.wk.wk .spot.lay-wide.st-circle .spot-ring { width: min(100%, 640px); aspect-ratio: 1; max-height: none; }
@media (max-width: 860px) {
	.wk.wk .spot:is(.lay-split, .lay-split-r) .spot-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "media" "ctl"; grid-template-rows: none; row-gap: 24px; }
	.wk.wk .spot.lay-wide .spot-ring { aspect-ratio: 4 / 3; }
}
.wk.wk .spot-metals { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.wk.wk .spot-metals button { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 18px 0 12px; border: 1px solid var(--line); border-radius: 999px; background-color: #fff; color: var(--ink); font: 600 14.5px/1 var(--sans); cursor: pointer; transition: border-color .2s, background-color .2s, color .2s; }
.wk.wk .spot-metals button:hover { border-color: var(--ink); }
.wk.wk .spot-metals button[aria-checked="true"] { background-color: var(--ink); border-color: var(--ink); color: #fff; }
.wk.wk .spot-metals .sw { width: 18px; height: 18px; }
.wk.wk .spot-cap { position: relative; z-index: 1; text-align: center; font-size: 15.5px; color: var(--sub); }
.wk.wk .spot-cap b { color: var(--ink); font-weight: 600; }
.wk.wk .spot-cap a { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; font-weight: 700; color: var(--ink); }
.wk.wk .spot-cap a svg { width: 16px; height: 16px; transition: transform .2s; }
.wk.wk .spot-cap a:hover svg { transform: translateX(3px); }
.wk.wk .spot-pick { position: relative; z-index: 1; display: flex; gap: 12px; }
.wk.wk .spot-pick button { width: 58px; height: 58px; padding: 4px; border: 1.5px solid var(--line); border-radius: 50%; background-color: #fff; cursor: pointer; overflow: hidden; transition: border-color .2s, transform .2s; }
.wk.wk .spot-pick button:hover { border-color: var(--field); transform: translateY(-2px); }
.wk.wk .spot-pick button[aria-pressed="true"] { border-color: var(--gold-deep); }
.wk.wk .spot-pick img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.wk.wk .spot-cta { display: flex; justify-content: center; margin-top: 30px; }
.wk.wk .dark .spot-cap { color: var(--sub-night); }
.wk.wk .dark .spot-cap b, .wk.wk .dark .spot-cap a { color: #fff; }
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.wk.wk .spot.scale-in .spot-ring { animation: wkgrow linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
	}
}
@keyframes wkgrow { from { transform: scale(.86); opacity: .4; } to { transform: none; opacity: 1; } }
.elementor-editor-active .wk.wk .spot.scale-in .spot-ring { animation: none; }
@media (max-width: 600px) { .wk.wk .spot-metals button { padding: 0 14px 0 10px; font-size: 13.5px; } .wk.wk .spot-pick button { width: 50px; height: 50px; } }

/* Calmer look: sections ease in as they scroll into view */
.wk.wk .wk-rv { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .9s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--rv-d, 0ms); }
.wk.wk .wk-rv.in { opacity: 1; transform: none; }

/* ================= Ring designer: cleaner, the ring on plain white ================= */
.wk.wk .studio-card { border-color: transparent; border-radius: calc(var(--r) * 2); box-shadow: 0 36px 70px -48px rgba(15, 18, 23, .32); overflow: hidden; }
.wk.wk .preview { border-right: 0; padding: clamp(24px, 3vw, 40px); gap: 18px; justify-items: center; background: #fff; }
.wk.wk .preview .main { position: relative; width: 100%; isolation: isolate; background: #fff; }
.wk.wk .preview .main > img, .wk.wk .preview .main > video { width: 86%; height: 86%; background: transparent; mix-blend-mode: multiply; }
.wk.wk .alts { display: flex; justify-content: center; gap: 12px; grid-template-columns: none; }
.wk.wk .alts button { width: 64px; height: 64px; aspect-ratio: auto; padding: 4px; border-radius: 50%; border: 1.5px solid var(--line); transition: border-color .2s, transform .2s; }
.wk.wk .alts button:hover { border-color: var(--ink); transform: translateY(-2px); }
.wk.wk .alts button img { border-radius: 50%; }
.wk.wk .preview .shown { justify-content: center; text-align: center; font-size: 14.5px; max-width: 52ch; }
.wk.wk .controls { padding: clamp(28px, 3.4vw, 44px); gap: 26px; }
.wk.wk .ctl-head b span { border: 1.5px solid var(--gold-deep); color: var(--gold-ink); font-weight: 700; }
.wk.wk .controls .opt { min-height: 42px; border-width: 1px; border-color: var(--line); font-size: 14px; transition: border-color .2s, background-color .2s, color .2s; }
.wk.wk .controls .opt:hover { border-color: var(--ink); }
.wk.wk .controls .opt[aria-checked="true"] { border-color: var(--ink); }
.wk.wk .shape-opts { display: flex; flex-wrap: wrap; gap: 8px; grid-template-columns: none; }
.wk.wk .shape-opts .opt { flex: 1 1 0; min-width: 72px; max-width: 112px; min-height: 64px; border-radius: 12px; }
.wk.wk .shape-opts .opt[aria-disabled="true"] { display: none; }
.wk.wk .hint:empty { display: none; }
.wk.wk .studio-go { border-top: 0; padding-top: 4px; }
.wk.wk .studio-go .row2 .btn { min-height: 46px; font-size: 14.5px; }
@media (max-width: 860px) {
	.wk.wk .preview { justify-items: stretch; background: #fff; }
	.wk.wk .preview .shown { text-align: left; }
}

/* Hero showcase: give each piece some breathing room in its frame */
.wk.wk .hero-media .sc-item.pr video { inset: 4% 6%; width: 88%; height: 92%; }
.wk.wk .hero-media .sc-item.pr > img { width: 88%; height: 92%; margin: auto; }

/* ================= Readable on any background =================
   On a dark section every colour flips (text, lines, links, buttons). Light "cards" inside a dark
   section (product photos, white boxes) keep the light-scheme colours. The script switches a section
   to dark automatically when its background is dark, or follows Section › Text colors. */
.wk { --gold-hd: #a8823c; }
.wk { --ink-l: var(--ink); --text-l: var(--text); --sub-l: var(--sub); --line-l: var(--line); --field-l: var(--field); --gold-ink-l: var(--gold-ink); }
.wk.wk .dark { --ink: #fff; --text: #e3e6eb; --sub: var(--sub-night); --line: var(--line-night); --field: rgba(255, 255, 255, .45); --gold-ink: var(--gold); --gold-hd: var(--gold); color: var(--text); }
.wk.wk .dark :is(.wk-isl, .spot-ring, .spot-pick button, .sc-thumbs button, .alts button, .seg button[aria-selected="true"], .spot-metals button:not([aria-checked="true"])) { --ink: var(--ink-l); --text: var(--text-l); --sub: var(--sub-l); --line: var(--line-l); --field: var(--field-l); --gold-ink: var(--gold-ink-l); color: var(--text); }
.wk.wk .dark .wk-isl.wk-isl :is(.h1, .h2, .h3, .link) { color: var(--ink); }
/* Buttons that are "ink" on light become white on dark, and back again inside light cards. */
.wk.wk .dark .btn-ink { background: #fff; color: var(--night); }
.wk.wk .dark .btn-ink:hover { background: #e6e8eb; color: var(--night); }
.wk.wk .dark .btn-line:hover { color: var(--night); }
.wk.wk .dark :is(.opt[aria-checked="true"], .opt[aria-pressed="true"], .spot-metals button[aria-checked="true"]) { color: var(--night); }
.wk.wk .dark .wk-isl.wk-isl .btn-ink { background: var(--ink-l); color: #fff; }
.wk.wk .dark .wk-isl.wk-isl .btn-line:hover { color: #fff; }
.wk.wk .dark .wk-isl.wk-isl :is(.opt[aria-checked="true"], .opt[aria-pressed="true"]) { color: #fff; }
.wk.wk .dark .shead .lead, .wk.wk .dark .lead { color: var(--sub-night); }
.wk.wk .dark input, .wk.wk .dark select, .wk.wk .dark textarea { color: var(--ink-l); }

/* The hero's text side on a light background */
.wk.wk .hero.on-light { color: var(--ink); }
.wk.wk .hero.on-light .h1 { color: var(--ink); }
.wk.wk .hero.on-light .kicker { color: var(--gold-ink); }
.wk.wk .hero.on-light .gold-em { color: var(--gold-deep); }
.wk.wk .hero.on-light .hero-copy .lead, .wk.wk .hero.on-light .hero-call { color: var(--sub); }
.wk.wk .hero.on-light .hero-call a { color: var(--ink); }
.wk.wk .hero.on-light .trust { border-top-color: var(--line); }
.wk.wk .hero.on-light .trust li { color: var(--text); }
.wk.wk .hero.on-light .trust svg { color: var(--gold-ink); }
.wk.wk .hero.on-light .btn-ghost { border-color: var(--ink); color: var(--ink); }
.wk.wk .hero.on-light .btn-ghost:hover { background: var(--ink); color: #fff; }

/* Header: with six or more menu items there's no room for the written phone number; the phone icon stays (the number is in the top bar) */
@media (min-width: 1240px) {
	.wk.wk .hd:has(.nav > ul > li:nth-child(6)) .tel { display: none; }
	.wk.wk .hd:has(.nav > ul > li:nth-child(6)) .tel-icon { display: grid; }
}
@media (min-width: 1241px) and (max-width: 1360px) {
	.wk.wk .hd:has(.nav > ul > li:nth-child(6)) .nav > ul { gap: 14px; }
}

/* Sections designed dark (4Cs, call to action) placed on a light background, or set to "Dark text" */
/* Gold words on light sections and light page banners: the heading gold (the pale one is too faint on white, the
   gold for small text reads brown at this size). */
.wk.wk :where(.sec:not(.dark):not(.hero), .pgh:not(.dark)) .gold-em { color: var(--gold-hd); }
.wk.wk :where(.sec:not(.dark):not(.hero), .pgh:not(.dark)) .h3 .gold-em { color: var(--gold-ink); } /* small titles: the gold for small text */
.wk.wk :is(.is-light, .txt-dark) .btn-gold { background: var(--ink); border-color: var(--ink); color: #fff; }
.wk.wk :is(.is-light, .txt-dark) .btn-gold:hover { background: #2a2f38; border-color: #2a2f38; color: #fff; }
.wk.wk :is(.is-light, .txt-dark) .btn-ghost { border-color: var(--ink); color: var(--ink); }
.wk.wk :is(.is-light, .txt-dark) .btn-ghost:hover { background: var(--ink); color: #fff; }
.wk.wk :is(.is-light, .txt-dark) .seg { background: rgba(15, 18, 23, .07); }
.wk.wk :is(.is-light, .txt-dark) .seg button { color: var(--sub); }
.wk.wk :is(.is-light, .txt-dark) .seg button:hover:not([aria-selected="true"]) { color: var(--ink); }
.wk.wk :is(.is-light, .txt-dark) .seg button[aria-selected="true"] { background: var(--ink); color: #fff; }
.wk.wk :is(.is-light, .txt-dark) .cs-value small { color: var(--sub); }
.wk.wk :is(.is-light, .txt-dark) .cs-value b { color: var(--ink); }
.wk.wk :is(.is-light, .txt-dark) .cs-panel input[type="range"] { --fill: var(--gold-deep); --track: var(--line); }
.wk.wk :is(.is-light, .txt-dark) .cs-panel input[type="range"]::-webkit-slider-thumb { background: #fff; border-color: var(--gold-deep); }
.wk.wk :is(.is-light, .txt-dark) .cs-panel .ticks { color: var(--sub); }
.wk.wk :is(.is-light, .txt-dark) .cs-panel .ticks span.on { color: var(--gold-ink); }
.wk.wk :is(.is-light, .txt-dark) .cs-text { color: var(--text); }
.wk.wk :is(.is-light, .txt-dark) .tip { color: var(--text); border-color: rgba(122, 91, 36, .3); }
.wk.wk :is(.is-light, .txt-dark) .tip svg { color: var(--gold-ink); }

/* Light but mid-tone backgrounds (gold, light grey-blue…): the gold accent text turns ink so it stays readable */
.wk.wk .sec.acc-ink { --gold-ink: var(--ink); --sub: var(--text); }

/* ================= Booking panel: three short steps from any "Book" button ================= */
.wk.wk .bk { position: fixed; inset: 0; z-index: 95; background: rgba(11, 14, 20, 0); transition: background-color .35s ease; }
.wk.wk .bk.open { background: rgba(11, 14, 20, .45); }
.wk.wk .bk-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(480px, 100%); display: flex; flex-direction: column; background: #fff; box-shadow: -30px 0 80px -40px rgba(0, 0, 0, .45); transform: translateX(102%); transition: transform .42s cubic-bezier(.2, .7, .2, 1); }
.wk.wk .bk.open .bk-panel { transform: none; }
.wk.wk .bk-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 24px 24px 16px; }
.wk.wk .bk-eye { margin: 0; font: 700 11.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-ink); }
.wk.wk .bk-head .h3 { margin: 10px 0 0; font-size: clamp(23px, 2.3vw, 27px); line-height: 1.15; }
.wk.wk .bk-sub { margin: 8px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--sub); }
.wk.wk .bk-head .icon-btn { flex: none; margin: -6px -8px 0 0; }
.wk.wk .bk-prog { height: 3px; margin: 0 24px; border-radius: 3px; background: var(--line); overflow: hidden; }
.wk.wk .bk-prog span { display: block; width: 33%; height: 100%; border-radius: 3px; background: var(--gold-deep); transition: width .45s cubic-bezier(.2, .7, .2, 1); }
.wk.wk .bk-form { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 16px; padding: 16px 24px calc(20px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; overscroll-behavior: contain; }
.wk.wk .bk-form[hidden], .wk.wk .bk-prog[hidden] { display: none; }
.wk.wk .bk-count { margin: 0; font: 600 12.5px/1 var(--sans); letter-spacing: .04em; color: var(--sub); }
.wk.wk .bk-step { display: grid; gap: 12px; min-width: 0; margin: 0; padding: 0; border: 0; }
.wk.wk .bk-step[hidden] { display: none; }
.wk.wk .bk-step legend { float: left; width: 100%; margin: 0; padding: 0; font-size: 20px; line-height: 1.25; }
.wk.wk .bk-step legend + * { clear: both; }
.wk.wk .bk-hint { margin: -4px 0 0; font-size: 14px; line-height: 1.45; color: var(--sub); }
.wk.wk .bk .lbl { margin: 4px 0 0; font: 700 14px/1.2 var(--sans); color: var(--ink); }
.wk.wk .bk-topics, .wk.wk .bk-days, .wk.wk .bk-times { display: flex; flex-wrap: wrap; gap: 8px; }
.wk.wk .bk-topics .opt { min-height: 46px; padding: 6px 16px; }
.wk.wk .bk-day { flex-direction: column; gap: 2px; min-width: 78px; min-height: 58px; padding: 6px 10px; border-radius: 14px; line-height: 1.15; }
.wk.wk .bk-day.flex { min-width: 120px; }
.wk.wk .bk-day small, .wk.wk .bk-times small { font-size: 12px; font-weight: 500; color: var(--sub); }
.wk.wk .bk .opt[aria-checked="true"] small, .wk.wk .bk .opt[aria-pressed="true"] small { color: rgba(255, 255, 255, .78); }
.wk.wk .bk-ctx { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--ivory); }
.wk.wk .bk-ctx[hidden] { display: none; }
.wk.wk .bk-ctx .lbl { margin: 0; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--sub); }
.wk.wk .bk-ctx ul { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.wk.wk .bk-ctx li { display: flex; align-items: center; gap: 12px; }
.wk.wk .bk-ctx img { flex: none; width: 52px; height: 52px; object-fit: contain; border: 1px solid var(--line); border-radius: calc(var(--r) * .7); background: #fff; }
.wk.wk .bk-ctx b { display: block; font-size: 14.5px; line-height: 1.3; color: var(--ink); }
.wk.wk .bk-ctx small { display: block; margin-top: 2px; font-size: 13px; color: var(--sub); }
.wk.wk .bk .field { gap: 6px; }
.wk.wk .bk-nav { position: sticky; bottom: -20px; z-index: 1; display: flex; gap: 10px; margin: 0 -24px -20px; padding: 14px 24px 20px; background: linear-gradient(rgba(255, 255, 255, 0), #fff 14px); }
.wk.wk .bk-nav .btn { flex: 1 1 0; justify-content: center; min-height: 52px; }
.wk.wk .bk-nav .btn-gold { flex-grow: 2; }
.wk.wk .bk-nav [hidden] { display: none; }
.wk.wk .bk-call { margin: auto 0 0; padding-top: 8px; text-align: center; font-size: 14px; color: var(--sub); }
.wk.wk .bk-call a { font-weight: 700; color: var(--ink); text-decoration: none; }
.wk.wk .bk-call a:hover { text-decoration: underline; }
.wk.wk .bk .err { margin: 0; font-size: 13.5px; color: #b3261e; }
.wk.wk .bk-done { display: grid; align-content: start; gap: 12px; padding: 8px 24px 32px; overflow-y: auto; outline: 0; }
.wk.wk .bk-done[hidden] { display: none; }
.wk.wk .bk-done .ok { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #eaf7f0; color: #1d6b48; }
.wk.wk .bk-done .ok svg { width: 26px; height: 26px; }
.wk.wk .bk-done .h3 { margin: 4px 0 0; font-size: 24px; }
.wk.wk .bk-done p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--text); }
.wk.wk .bk-done p b { color: var(--ink); }
.wk.wk .bk-bring-h { margin-top: 6px !important; font-weight: 700; color: var(--ink) !important; }
.wk.wk .bk-bring { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.wk.wk .bk-bring li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--text); }
.wk.wk .bk-bring svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--gold-deep); }
.wk.wk .bk-done-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.wk.wk .bk-done-btns svg { width: 17px; height: 17px; }
@media (max-width: 600px) {
	.wk.wk .bk-panel { top: auto; left: 0; width: 100%; max-height: 92vh; max-height: 92dvh; border-radius: 20px 20px 0 0; box-shadow: 0 -30px 80px -40px rgba(0, 0, 0, .5); transform: translateY(102%); }
	.wk.wk .bk-head { padding: 20px 18px 12px; }
	.wk.wk .bk-prog { margin: 0 18px; }
	.wk.wk .bk-form { padding: 14px 18px calc(18px + env(safe-area-inset-bottom, 0px)); }
	.wk.wk .bk-nav { margin: 0 -18px -18px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px)); bottom: -18px; }
	.wk.wk .bk-done { padding: 8px 18px 28px; }
	.wk.wk .bk-day { min-width: calc(25% - 6px); }
}
@media (prefers-reduced-motion: reduce) { .wk.wk .bk, .wk.wk .bk-panel, .wk.wk .bk-prog span { transition: none; } }

/* The panel's own column, beside the popup picture */
.wk.wk .bk-main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.wk.wk .bk-aside { display: none; }
/* Each step eases in */
@keyframes wk-bk-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
.wk.wk .bk.open .bk-step:not([hidden]) { animation: wk-bk-in .38s cubic-bezier(.2, .7, .2, 1); }
/* Last step: what was already chosen, with a way back */
.wk.wk .bk-sum { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 10px; padding: 10px 12px 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--ivory); }
.wk.wk .bk-sum[hidden] { display: none; }
.wk.wk .bk .bk-sum .lbl { margin: 0; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--sub); }
.wk.wk .bk-sum-v { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.wk.wk .bk-sum-v li { padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; background-color: #fff; font: 700 13.5px/1.3 var(--sans); color: var(--ink); }
/* Topics as tiles with a small picture */
.wk.wk .bk .bk-topics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.wk.wk .bk .bk-topics .opt { justify-content: flex-start; gap: 12px; min-height: 60px; padding: 8px 14px 8px 10px; border-radius: 14px; text-align: left; line-height: 1.25; }
.wk.wk .bk-ti { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background-color: var(--ivory); color: var(--gold-ink); transition: background-color .2s, color .2s; }
.wk.wk .bk-ti svg { width: 21px; height: 21px; }
.wk.wk .bk .bk-topics .opt[aria-pressed="true"] .bk-ti { background-color: rgba(255, 255, 255, .14); color: var(--gold); }
/* Name and mobile side by side when there's room */
.wk.wk .bk-row { display: grid; gap: 16px; }
.wk.wk .bk-nav [data-bk-back] svg { width: 17px; height: 17px; flex: none; }
@media (min-width: 601px) { .wk.wk .bk-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; } }
@media (max-width: 600px) {
	.wk.wk .bk .bk-topics .opt { gap: 9px; min-height: 58px; padding: 8px 10px 8px 8px; font-size: 14px; }
	.wk.wk .bk-ti { width: 32px; height: 32px; }
	.wk.wk .bk-ti svg { width: 18px; height: 18px; }
	.wk.wk .bk-nav [data-bk-back] { flex: 0 0 54px; padding: 0; }
	.wk.wk .bk-nav [data-bk-back] span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.wk.wk .bk-edit { grid-column: 2; grid-row: 1; min-height: 36px; margin: -4px -4px -4px 0; padding: 4px 8px; border: 0; background: none; font: 700 13.5px/1.2 var(--sans); color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold-deep); text-underline-offset: 4px; cursor: pointer; }
.wk.wk .bk-edit:hover { text-decoration-thickness: 2px; }
.wk.wk .bk-edit:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 1px; border-radius: 6px; }

/* ================= Booking popup (Settings › How it opens) =================
   In the middle of the screen; on wide screens a showroom picture with today's hours sits beside the form. */
.wk.wk .bk.pop { display: grid; place-items: center; padding: clamp(12px, 3vw, 32px); }
.wk.wk .bk.pop.open { background: rgba(11, 14, 20, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.wk.wk .bk.pop .bk-panel { position: relative; inset: auto; width: min(560px, 100%); max-height: calc(100vh - 48px); max-height: min(780px, calc(100dvh - 2 * clamp(12px, 3vw, 32px))); overflow: hidden; border-radius: 22px; box-shadow: 0 50px 120px -40px rgba(0, 0, 0, .6), 0 0 0 1px rgba(15, 18, 23, .06); opacity: 0; transform: translateY(16px) scale(.96); transition: transform .45s cubic-bezier(.2, .7, .2, 1), opacity .3s ease; }
.wk.wk .bk.pop.open .bk-panel { opacity: 1; transform: none; }
.wk.wk .bk.pop .bk-head { padding-top: 26px; }
@media (min-width: 900px) {
	.wk.wk .bk.pop .bk-panel { display: grid; grid-template-columns: minmax(0, 36%) minmax(0, 1fr); width: min(940px, 100%); height: min(720px, calc(100dvh - 64px)); }
	.wk.wk .bk.pop .bk-aside { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 0; overflow: hidden; background-color: var(--ink); color: #fff; }
	.wk.wk .bk-aside img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 7s cubic-bezier(.2, .7, .2, 1); }
	.wk.wk .bk.pop.open .bk-aside img { transform: none; }
	.wk.wk .bk-aside::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 14, 20, 0) 28%, rgba(11, 14, 20, .6) 58%, rgba(11, 14, 20, .94) 100%); }
	.wk.wk .bk-aside-in { position: relative; z-index: 1; display: grid; gap: 8px; padding: 28px 28px 30px; }
	.wk.wk .bk-aside-n { margin: 0; font: 400 27px/1.12 var(--serif); color: #fff; }
	.wk.wk .bk-aside-a { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 14px; line-height: 1.4; color: rgba(255, 255, 255, .86); }
	.wk.wk .bk-aside-a svg { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--gold); }
	.wk.wk .bk-aside-s { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 13.5px; line-height: 1.35; color: rgba(255, 255, 255, .86); }
	.wk.wk .bk-aside-s i { flex: none; width: 8px; height: 8px; margin-left: 4px; border-radius: 50%; background-color: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, .25); }
	.wk.wk .bk-aside-s.closed i { background-color: #f5b74a; box-shadow: 0 0 0 3px rgba(245, 183, 74, .25); }
	.wk.wk .bk-pts { display: grid; gap: 9px; margin: 10px 0 0; padding: 16px 0 0; border-top: 1px solid rgba(255, 255, 255, .2); list-style: none; }
	.wk.wk .bk-pts li { display: flex; align-items: center; gap: 10px; font: 600 14.5px/1.3 var(--sans); color: #fff; }
	.wk.wk .bk-pts svg { flex: none; width: 18px; height: 18px; color: var(--gold); }
	.wk.wk .bk.pop .bk-head { padding: 30px 30px 16px; }
	.wk.wk .bk.pop .bk-prog { margin: 0 30px; }
	.wk.wk .bk.pop .bk-form { padding: 18px 30px 22px; }
	.wk.wk .bk.pop .bk-nav { margin: 0 -30px -22px; padding: 14px 30px 22px; bottom: -22px; }
	.wk.wk .bk.pop .bk-done { padding: 12px 30px 34px; }
}
/* The SimplyBook calendar (OM Catalog › Inquiries) in the booking panel and the visit form: the kit's
   colours and type on OM Catalog's calendar and tabs. Both sit on white, so the light palette is used. */
.wk.wk .om-ask, .wk.wk .om-booking { --om-color-primary: var(--ink-l); --om-color-text: var(--text-l); --om-gold: var(--gold-deep); --om-line: var(--line-l); --om-soft: var(--ivory); --om-muted: var(--sub-l); --om-font-body: var(--sans); --om-r: 999px; --om-r-lg: var(--r); }
.wk.wk .om-booking .om-booking-intro { margin: 0 0 12px; font-size: 15px; line-height: 1.5; color: var(--sub-l); }
.wk.wk .om-booking .om-booking-alt { margin-top: 10px; font-size: 13px; }
.wk.wk .bk-ask, .wk.wk .bk-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.wk.wk .bk-pane[hidden] { display: none; }
.wk.wk .bk-ask > .om-ask-tabs { flex: none; margin: 2px 24px 6px; }
.wk.wk .bk-cal { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px 24px calc(20px + env(safe-area-inset-bottom, 0px)); }
.wk.wk .bk-cal .om-booking-frame { min-height: 440px; }
.wk.wk .book .om-ask-tabs { margin: 6px 0 18px; }
.wk.wk .book .om-booking { margin-top: 6px; }
@media (min-width: 900px) {
	.wk.wk .bk.pop .bk-ask > .om-ask-tabs { margin: 2px 30px 6px; }
	.wk.wk .bk.pop .bk-cal { padding: 14px 30px 26px; }
}
@media (max-width: 600px) {
	.wk.wk .bk-ask > .om-ask-tabs { margin: 0 18px 4px; }
	.wk.wk .bk-cal { padding: 10px 18px calc(18px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 600px) {
	/* Phones: a floating card near the bottom, where the thumb is */
	.wk.wk .bk.pop { place-items: end center; padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px)); }
	.wk.wk .bk.pop .bk-panel { width: 100%; max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px - env(safe-area-inset-bottom, 0px)); border-radius: 20px; transform: translateY(18px) scale(.97); }
	.wk.wk .bk.pop .bk-form { padding-bottom: 16px; }
	.wk.wk .bk.pop .bk-nav { margin-bottom: -16px; padding-bottom: 14px; bottom: -16px; }
}
@media (prefers-reduced-motion: reduce) {
	.wk.wk .bk.pop .bk-panel, .wk.wk .bk-aside img { transition: none; }
	.wk.wk .bk.open .bk-step:not([hidden]) { animation: none; }
}

/* ================= "What brings you in?" choices ================= */
.wk.wk .paths { --cols: 3; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); margin: 0; padding: 0; list-style: none; }
.wk.wk .paths > li { display: flex; min-width: 0; }
.wk.wk .path { position: relative; display: flex; flex-direction: column; width: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: calc(var(--r) * 1.4); background-color: #fff; color: var(--text); text-decoration: none; transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s, border-color .25s; }
.wk.wk .path:hover { transform: translateY(-4px); border-color: transparent; box-shadow: 0 28px 50px -30px rgba(15, 18, 23, .45); }
.wk.wk .path:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }
.wk.wk .path-media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background-color: var(--ivory); }
.wk.wk .path-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.wk.wk .path:hover .path-media img { transform: scale(1.05); }
.wk.wk .path-media::after { content: ""; position: absolute; inset: 0; background-color: transparent; opacity: 0; transition: opacity .35s; }
.wk.wk .path:hover .path-media::after { opacity: .18; }
.wk.wk .path-body { flex: 1; display: grid; grid-template-rows: auto auto 1fr; align-content: start; gap: 6px; padding: 16px 18px 18px; }
.wk.wk .path-t { font: 400 clamp(19px, 1.6vw, 22px)/1.2 var(--serif); color: var(--ink); }
.wk.wk .path-x { font-size: 14.5px; line-height: 1.5; color: var(--sub); }
.wk.wk .path-go { display: inline-flex; align-items: center; align-self: end; gap: 6px; padding-top: 8px; font: 700 14px/1.2 var(--sans); color: var(--ink); }
.wk.wk .path-go svg { width: 16px; height: 16px; flex: none; transition: transform .25s; }
.wk.wk .path:hover .path-go svg { transform: translateX(4px); }
.wk.wk .path-ic { display: grid; place-items: center; width: 52px; height: 52px; margin: 18px 18px 0; border-radius: 50%; background-color: var(--ivory); color: var(--gold-ink); }
.wk.wk .path-ic svg { width: 24px; height: 24px; }
.wk.wk .look-list .paths { --cols: 2; gap: 10px; }
.wk.wk .look-list .path { flex-direction: row; align-items: center; }
.wk.wk .look-list .path-ic { flex: none; margin: 14px 0 14px 16px; }
.wk.wk .look-list .path-body { padding: 14px 18px; grid-template-rows: none; }
.wk.wk .look-list .path-go { display: none; }
.wk.wk .paths-more { margin: clamp(20px, 2.6vw, 32px) 0 0; text-align: center; }
.wk.wk .paths-more a { display: inline-flex; align-items: center; gap: 8px; font: 700 15px/1.2 var(--sans); color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold-deep); text-underline-offset: 5px; }
.wk.wk .paths-more svg { width: 16px; height: 16px; transition: transform .25s; }
.wk.wk .paths-more a:hover svg { transform: translateX(4px); }
.wk.wk .paths-sec .shead.center .lead { margin-inline: auto; }
@media (max-width: 1024px) { .wk.wk .paths { --cols: 3; } }
@media (max-width: 767px) {
	.wk.wk .paths { --cols: 2; gap: 10px; }
	.wk.wk .look-list .paths { --cols: 1; }
	.wk.wk .path { border-radius: var(--r); }
	.wk.wk .path-body { gap: 4px; padding: 12px 12px 14px; }
	.wk.wk .path-t { font-size: 17px; }
	.wk.wk .path-x { font-size: 13px; line-height: 1.45; }
	.wk.wk .path-go { padding-top: 6px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .wk.wk .path, .wk.wk .path-media img { transition: none; } .wk.wk .path:hover { transform: none; } }

/* Hero: reassurance under the buttons */
.wk.wk .hero-note { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 16px 0 0; padding: 0; list-style: none; font: 500 14.5px/1.3 var(--sans); color: var(--sub-night); }
.wk.wk .hero-note li { display: inline-flex; align-items: center; gap: 7px; }
.wk.wk .hero-note svg { width: 16px; height: 16px; color: var(--gold); }
.wk.wk .hero.on-light .hero-note { color: var(--sub); }
.wk.wk .hero.on-light .hero-note svg { color: var(--gold-deep); }
.wk.wk .hero-note + .hero-call { margin-top: 10px; }
@media (max-width: 860px) {
	.wk.wk .hero.m-words .hero-media { order: 0; height: 44vh; min-height: 300px; }
	.wk.wk .hero.m-words .hero-copy { padding-top: 30px; }
}

/* "What brings you in?": product photos on white */
.wk.wk .look-product .path-media { background-color: #fff; border-bottom: 1px solid var(--line); }
.wk.wk .look-product .path-media img { object-fit: contain; padding: 7% 12%; mix-blend-mode: multiply; }
.wk.wk .look-product .path:hover .path-media img { transform: scale(1.06); }
.wk.wk .path-media.no-img { display: grid; place-items: center; }
.wk.wk .path-media.no-img .path-ic { width: 64px; height: 64px; margin: 0; }
.wk.wk .path-media.no-img .path-ic svg { width: 28px; height: 28px; }

/* ================= Booking bar (under the hero) ================= */
/* The bar sits just under the section above it; the next section's own space separates it from what follows. */
.wk.wk .bkbar-sec, body.wk-calm .wk.wk .bkbar-sec { padding-block: clamp(24px, 3vw, 44px) 0; background-color: transparent; }
.wk.wk .bkbar { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; gap: 12px 16px; padding: 20px 22px 16px; border: 1px solid var(--line); border-radius: calc(var(--r) * 1.6); background-color: #fff; box-shadow: 0 30px 60px -42px rgba(15, 18, 23, .5); }
.wk.wk .bkbar-head { align-self: center; min-width: 0; }
.wk.wk .bkbar-t { margin: 0; font: 400 clamp(20px, 1.7vw, 24px)/1.15 var(--serif); color: var(--ink); }
.wk.wk .bkbar-s { margin: 5px 0 0; font-size: 13.5px; line-height: 1.4; color: var(--sub); }
.wk.wk .bkbar-f { display: grid; gap: 6px; min-width: 0; margin: 0; }
.wk.wk .bkbar-f > span { font: 700 12.5px/1.2 var(--sans); color: var(--ink); }
.wk.wk .bkbar select { width: 100%; height: 52px; padding: 0 40px 0 14px; border: 1.5px solid var(--field); border-radius: 10px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f1217' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 16px; -webkit-appearance: none; appearance: none; font: 600 15px/1.2 var(--sans); color: var(--ink); cursor: pointer; transition: border-color .2s; }
.wk.wk .bkbar select:hover, .wk.wk .bkbar select:focus { border-color: var(--ink); outline: 0; }
.wk.wk .bkbar select:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.wk.wk .bkbar .btn { min-height: 52px; white-space: nowrap; }
.wk.wk .bkbar-n { grid-column: 2 / -1; display: flex; align-items: center; justify-content: flex-end; gap: 7px; margin: 0; font-size: 13px; color: var(--sub); }
.wk.wk .bkbar-n svg { flex: none; width: 15px; height: 15px; color: var(--gold-deep); }
@media (max-width: 1024px) {
	.wk.wk .bkbar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
	.wk.wk .bkbar-head { grid-column: 1 / -1; }
	.wk.wk .bkbar-n { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
	.wk.wk .bkbar { grid-template-columns: minmax(0, 1fr); padding: 18px 16px 14px; }
	.wk.wk .bkbar .btn { width: 100%; justify-content: center; }
	.wk.wk .bkbar-n { justify-content: center; }
}

/* Favorites: "See all" beside the arrows */
.wk.wk .arrows { align-items: center; }
.wk.wk .row-more { display: inline-flex; align-items: center; gap: 6px; margin-right: 10px; font: 700 14.5px/1.2 var(--sans); color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold-deep); text-underline-offset: 5px; white-space: nowrap; }
.wk.wk .row-more svg { width: 16px; height: 16px; transition: transform .25s; }
.wk.wk .row-more:hover svg { transform: translateX(3px); }
@media (max-width: 860px) {
	.wk.wk .arrows:has(.row-more) { display: flex; }
	.wk.wk .arrows:has(.row-more) button { display: none; }
	.wk.wk .row-more { margin-right: 0; font-size: 13.5px; }
}

/* Hero: live Google rating first in the trust line */
.wk.wk .trust .t-rating a { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.wk.wk .trust .t-rating a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Style numbers on product cards: dark enough to read (WCAG AA) */
.wk.wk .card .price .sku { color: var(--sub); }

/* ================= "What brings you in?" Showcase: one large choice, the rest around it =================
   Product photos sit on white; a soft gold light follows the mouse over them (like light catching a stone),
   and every card ends in its own action. */
.wk.wk .look-showcase .shead { align-items: flex-end; }
.wk.wk .sc-more { display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; font: 700 15px/1.2 var(--sans); color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold-deep); text-underline-offset: 5px; white-space: nowrap; }
.wk.wk .sc-more svg { width: 16px; height: 16px; flex: none; transition: transform .25s; }
.wk.wk .sc-more:hover svg { transform: translateX(4px); }
.wk.wk .paths.sc { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(318px, auto)); grid-auto-rows: auto; gap: 16px; }
.wk.wk .paths.sc > li.feat { grid-column: span 2; grid-row: span 2; }
.wk.wk .paths.sc > li.wide { grid-column: span var(--span, 4); }
.wk.wk .sc .path { display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 100%; border-radius: 20px; background-color: #fff; isolation: isolate; }
.wk.wk .sc .path:hover { border-color: rgba(176, 141, 79, .45); box-shadow: 0 34px 60px -38px rgba(15, 18, 23, .45); }
.wk.wk .sc-media { position: relative; display: grid; place-items: center; min-height: 150px; padding: 40px 24px 0; }
.wk.wk .sc-media > img, .wk.wk .sc-media > video { display: block; width: 100%; height: 100%; max-height: 190px; object-fit: contain; mix-blend-mode: multiply; transition: transform 1s cubic-bezier(.2, .7, .2, 1), opacity .5s ease; }
.wk.wk .sc .path:hover .sc-media > img, .wk.wk .sc .path:hover .sc-media > video { transform: scale(1.06); }
.wk.wk .sc-media .path-ic { width: 64px; height: 64px; margin: 0; }
.wk.wk .sc-media .path-ic svg { width: 28px; height: 28px; }
.wk.wk .sc-media.pv > video { position: absolute; inset: 40px 24px 0; width: calc(100% - 48px); height: calc(100% - 40px); opacity: 0; }
.wk.wk .sc-media.pv.playing > video { opacity: 1; }
.wk.wk .sc-media.pv.playing > img { opacity: 0; }
.wk.wk .path-n { position: absolute; top: 18px; left: 20px; font: 400 15px/1 var(--serif); letter-spacing: .06em; color: var(--gold-ink); }
.wk.wk .sc-tag { position: absolute; top: 13px; right: 14px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; background-color: #fff; font: 700 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.wk.wk .sc .path-body { display: grid; grid-template-rows: none; gap: 6px; padding: 14px 20px 18px; }
.wk.wk .sc .path-t { font: 400 clamp(20px, 1.6vw, 23px)/1.15 var(--serif); color: var(--ink); }
.wk.wk .sc .path-x { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 14px; line-height: 1.45; }
.wk.wk .sc .path-go { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 8px; font: 700 14px/1.2 var(--sans); color: var(--ink); }
.wk.wk .sc-arr { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; transition: background-color .25s, border-color .25s, color .25s; }
.wk.wk .sc .path-go .sc-arr svg { width: 16px; height: 16px; }
.wk.wk .sc .path:hover .sc-arr { border-color: var(--gold); background-color: var(--gold); color: var(--ink); }
/* The large first choice */
.wk.wk .sc .feat .path { background-color: #fff; }
.wk.wk .sc .feat .sc-media { padding: 56px 48px 0; }
.wk.wk .sc .feat .sc-media > img, .wk.wk .sc .feat .sc-media > video { max-height: 440px; }
.wk.wk .sc .feat .sc-media.pv > video { inset: 56px 48px 0; width: calc(100% - 96px); height: calc(100% - 56px); }
.wk.wk .sc .feat .path-n { top: 26px; left: 30px; font-size: 17px; }
.wk.wk .sc .feat .sc-tag { top: 20px; right: 22px; }
.wk.wk .sc .feat .path-body { gap: 10px; padding: 10px 32px 32px; }
.wk.wk .sc .feat .path-t { font-size: clamp(30px, 2.7vw, 42px); line-height: 1.08; }
.wk.wk .sc .feat .path-x { max-width: 46ch; font-size: 16px; -webkit-line-clamp: 3; }
.wk.wk .sc .feat .path-go { justify-content: flex-start; gap: 14px; width: max-content; max-width: 100%; margin-top: 8px; padding: 6px 6px 6px 24px; border-radius: 999px; background-color: var(--ink); font-size: 15px; color: #fff; transition: background-color .25s; }
.wk.wk .sc .feat .sc-arr { width: 42px; height: 42px; border-color: var(--gold); background-color: var(--gold); color: var(--ink); }
.wk.wk .sc .feat .path:hover .path-go { background-color: #000; }
/* The last choice, stretched across its row */
.wk.wk .sc .wide .path { grid-template-rows: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.wk.wk .sc .wide .sc-media { order: 2; height: 100%; min-height: 0; padding: 24px 32px; }
.wk.wk .sc .wide .sc-media > img { max-height: 210px; }
.wk.wk .sc .wide .path-body { gap: 8px; padding: 56px 36px 34px; }
.wk.wk .sc .wide .path-n { top: 26px; left: 36px; }
.wk.wk .sc .wide .path-t { font-size: clamp(26px, 2.2vw, 32px); }
.wk.wk .sc .wide .path-x { max-width: 52ch; font-size: 15.5px; -webkit-line-clamp: 3; }
.wk.wk .sc .wide .path-go { justify-content: flex-start; gap: 14px; width: max-content; max-width: 100%; margin-top: 8px; padding: 5px 5px 5px 22px; border: 1.5px solid var(--ink); border-radius: 999px; }
.wk.wk .sc .wide .sc-arr { border-color: var(--ink); background-color: var(--ink); color: #fff; }
.wk.wk .sc .wide .path:hover .sc-arr { border-color: var(--gold); background-color: var(--gold); color: var(--ink); }
@media (max-width: 1024px) {
	.wk.wk .paths.sc { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: auto; }
	.wk.wk .paths.sc > li.feat { grid-column: 1 / -1; grid-row: auto; }
	.wk.wk .paths.sc > li.wide { grid-column: auto; }
	.wk.wk .paths.sc > li.wide:nth-child(even) { grid-column: 1 / -1; }
	.wk.wk .sc .feat .path { grid-template-rows: none; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; }
	.wk.wk .sc .feat .sc-media { height: 100%; padding: 56px 24px 32px; }
	.wk.wk .sc .feat .sc-media > img, .wk.wk .sc .feat .sc-media > video { max-height: 320px; }
	.wk.wk .sc .feat .sc-media.pv > video { inset: 56px 24px 32px; width: calc(100% - 48px); height: calc(100% - 88px); }
	.wk.wk .sc .feat .path-body { padding: 32px 32px 32px 8px; }
	.wk.wk .sc .wide:nth-child(odd) .path { grid-template-columns: none; grid-template-rows: minmax(0, 1fr) auto; }
	.wk.wk .sc .wide:nth-child(odd) .sc-media { order: 0; padding: 40px 24px 0; }
	.wk.wk .sc .wide:nth-child(odd) .path-body { padding: 14px 20px 18px; }
}
@media (max-width: 767px) {
	.wk.wk .look-showcase .shead { align-items: flex-start; }
	.wk.wk .paths.sc { gap: 10px; }
	.wk.wk .sc .path { border-radius: 16px; }
	.wk.wk .sc-media { min-height: 0; padding: 34px 12px 0; }
	.wk.wk .sc-media > img { max-height: 120px; }
	.wk.wk .path-n { top: 13px; left: 14px; font-size: 13px; }
	.wk.wk .sc-tag { top: 10px; right: 10px; padding: 5px 8px; font-size: 10px; }
	.wk.wk .sc .path-body { gap: 4px; padding: 10px 12px 12px; }
	.wk.wk .sc .path-t { font-size: 17.5px; }
	.wk.wk .sc .path-x { display: none; }
	.wk.wk .sc .path-go { gap: 6px; padding-top: 6px; font-size: 13px; }
	.wk.wk .sc-arr { width: 30px; height: 30px; }
	.wk.wk .sc .feat .path { grid-template-columns: none; grid-template-rows: auto auto; }
	.wk.wk .sc .feat .sc-media { padding: 46px 20px 0; }
	.wk.wk .sc .feat .sc-media > img, .wk.wk .sc .feat .sc-media > video { max-height: 230px; aspect-ratio: 4 / 3; }
	.wk.wk .sc .feat .sc-media.pv > video { inset: 46px 20px 0; width: calc(100% - 40px); height: calc(100% - 46px); }
	.wk.wk .sc .feat .path-n { top: 16px; left: 18px; }
	.wk.wk .sc .feat .sc-tag { top: 12px; right: 12px; }
	.wk.wk .sc .feat .path-body { gap: 8px; padding: 12px 18px 18px; }
	.wk.wk .sc .feat .path-t { font-size: 28px; }
	.wk.wk .sc .feat .path-x, .wk.wk .sc .wide .path-x { display: -webkit-box; font-size: 14.5px; }
	.wk.wk .sc .feat .path-go { font-size: 14.5px; }
	.wk.wk .sc .wide .path { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
	.wk.wk .sc .wide .sc-media { padding: 16px 12px 16px 0; }
	.wk.wk .sc .wide .path-body { padding: 40px 0 16px 16px; }
	.wk.wk .sc .wide .path-n { top: 16px; left: 16px; }
	.wk.wk .sc .wide .path-t { font-size: 21px; }
	.wk.wk .sc .wide .path-go { padding: 4px 4px 4px 14px; font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) { .wk.wk .sc .path::before, .wk.wk .sc-media > img, .wk.wk .sc-media > video { transition: none; } .wk.wk .sc .path:hover .sc-media > img { transform: none; } }

/* ================= Values Showcase: photo with a "since" badge beside numbered promises ================= */
.wk.wk .vs-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(40px, 6vw, 96px); }
.wk.wk .vs-media { position: relative; isolation: isolate; margin: 0 18px 18px 0; }
.wk.wk .vs-media::before { content: ""; position: absolute; inset: 18px -18px -18px 18px; z-index: -1; border: 1px solid var(--gold); border-radius: 26px; }
.wk.wk .vs-media img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 26px; }
.wk.wk .vs-badge { position: absolute; left: -26px; bottom: 40px; display: grid; gap: 6px; padding: 18px 24px 20px; border-radius: 18px; background-color: var(--ink); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55); }
.wk.wk .vs-badge span { font: 700 11px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.wk.wk .vs-badge b { font: 400 clamp(40px, 4vw, 54px)/.95 var(--serif); color: #fff; }
.wk.wk .vs-copy .shead { margin-bottom: 0; }
.wk.wk .vs-copy .v-rating { margin-top: 18px; }
.wk.wk .vs-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 40px); margin: clamp(24px, 3vw, 36px) 0 0; padding: 0; list-style: none; }
.wk.wk .vs-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 16px; padding: 22px 0 20px; border-top: 1px solid var(--line); transition: border-color .3s; }
.wk.wk .vs-list li:hover { border-top-color: var(--gold); }
.wk.wk .vs-list .v-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background-color: var(--ivory); color: var(--gold-ink); transition: background-color .3s, color .3s; }
.wk.wk .vs-list .v-ic svg { width: 21px; height: 21px; }
.wk.wk .vs-list li:hover .v-ic { background-color: var(--ink); color: var(--gold); }
.wk.wk .vs-list .h3 { display: flex; align-items: baseline; gap: 10px; margin: 2px 0 6px; font-size: clamp(19px, 1.6vw, 22px); }
.wk.wk .vs-n { font: 400 14px/1 var(--serif); letter-spacing: .06em; color: var(--gold-ink); }
.wk.wk .vs-list p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--sub); }
.wk.wk .vs-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: clamp(22px, 2.6vw, 32px); }
.wk.wk .dark .vs-list li { border-top-color: var(--line-night); }
.wk.wk .dark .vs-list .v-ic { background-color: rgba(255, 255, 255, .06); color: var(--gold); }
.wk.wk .dark .vs-list p { color: var(--sub-night); }
.wk.wk .dark .vs-badge { background-color: #fff; }
.wk.wk .dark .vs-badge b { color: var(--ink); }
.wk.wk .dark .vs-badge span { color: var(--gold-ink); }
@media (max-width: 1024px) { .wk.wk .vs-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 40px; } .wk.wk .vs-list { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) {
	.wk.wk .vs-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
	.wk.wk .vs-media { margin: 0 12px 12px 0; }
	.wk.wk .vs-media::before { inset: 12px -12px -12px 12px; border-radius: 20px; }
	.wk.wk .vs-media img { aspect-ratio: 4 / 3.4; border-radius: 20px; }
	.wk.wk .vs-badge { left: 14px; bottom: -22px; padding: 12px 16px 14px; border-radius: 14px; }
	.wk.wk .vs-badge b { font-size: 36px; }
	.wk.wk .vs-list li { padding: 18px 0 16px; gap: 14px; }
	.wk.wk .vs-cta .btn { width: 100%; justify-content: center; }
	.wk.wk .vs-cta { justify-content: center; }
}

/* ================= Steps Showcase: a gold line that draws in through numbered dots ================= */
.wk.wk .steps.tl { --tl: var(--gold); position: relative; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: clamp(24px, 3vw, 44px); padding-top: 38px; }
.wk.wk .steps.tl::before { content: ""; position: absolute; top: 7px; left: 8px; right: 0; height: 1px; background-color: var(--tl); transform-origin: left center; transition: transform 1.8s cubic-bezier(.2, .7, .2, 1) .1s; }
@supports selector(:has(*)) { .wk.wk .steps.tl:has(> li.wk-rv:not(.in))::before { transform: scaleX(0); } }
.wk.wk .steps.tl li { position: relative; gap: 10px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.wk.wk .steps.tl li:hover { transform: none; box-shadow: none; }
.wk.wk .tl-dot { position: absolute; top: -38px; left: 0; width: 15px; height: 15px; border-radius: 50%; background-color: var(--tl); box-shadow: 0 0 0 5px rgba(214, 180, 112, .22); transition: transform .6s cubic-bezier(.2, .7, .2, 1) calc(var(--rv-d, 0ms) + .35s); }
.wk.wk .steps.tl li.wk-rv:not(.in) .tl-dot { transform: scale(0); }
.wk.wk .tl-n { display: block; font: 300 clamp(52px, 5vw, 76px)/.9 var(--serif); letter-spacing: -.01em; color: transparent; -webkit-text-stroke: 1px var(--gold-deep); }
.wk.wk .tl-img { position: relative; display: block; aspect-ratio: 4 / 3; margin-bottom: 8px; overflow: hidden; border-radius: 18px; background-color: var(--ivory); }
.wk.wk .tl-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.wk.wk .steps.tl li:hover .tl-img img { transform: scale(1.05); }
.wk.wk .tl-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 14, 20, 0) 45%, rgba(11, 14, 20, .68)); pointer-events: none; }
.wk.wk .tl-img .tl-n { position: absolute; left: 18px; bottom: 12px; z-index: 1; font-size: clamp(40px, 3.6vw, 52px); font-weight: 400; color: #fff; -webkit-text-stroke: 0; text-shadow: 0 2px 18px rgba(0, 0, 0, .45); }
.wk.wk .steps.tl .h3 { margin: 6px 0 0; font-size: clamp(21px, 1.8vw, 26px); }
.wk.wk .steps.tl p { max-width: 38ch; }
.wk.wk .steps-cta { flex-direction: column; align-items: center; gap: 12px; margin-top: clamp(36px, 4vw, 54px); }
.wk.wk .steps-cta .cta-call { justify-content: center; margin: 0; }
.wk.wk .dark .tl-n { -webkit-text-stroke-color: var(--gold); }
.wk.wk .dark .tl-img .tl-n { color: #fff; }
.wk.wk .dark .steps.tl li { background: none; }
body.elementor-editor-active .wk.wk .steps.tl::before, body.elementor-editor-active .wk.wk .tl-dot { transform: none !important; }
@media (max-width: 1023px) {
	.wk.wk .steps.tl { grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 0 0 0 38px; }
	.wk.wk .steps.tl::before { top: 8px; bottom: 8px; left: 7px; right: auto; width: 1px; height: auto; transform-origin: center top; }
	@supports selector(:has(*)) { .wk.wk .steps.tl:has(> li.wk-rv:not(.in))::before { transform: scaleY(0); } }
	.wk.wk .tl-dot { top: 4px; left: -38px; }
	.wk.wk .tl-n { font-size: 52px; }
	.wk.wk .steps.tl p { max-width: 60ch; }
}
@media (min-width: 600px) and (max-width: 1023px) {
	.wk.wk .steps.tl.has-img li { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: auto 1fr; align-items: start; column-gap: 28px; }
	.wk.wk .steps.tl.has-img .tl-img { grid-row: 1 / span 2; margin: 0; }
	.wk.wk .steps.tl.has-img .h3 { margin-top: 0; }
	.wk.wk .steps.tl.has-img .tl-dot { top: 6px; }
}
@media (max-width: 599px) {
	.wk.wk .steps.tl { gap: 30px; padding-left: 32px; }
	.wk.wk .tl-dot { left: -32px; width: 13px; height: 13px; }
	.wk.wk .steps.tl::before { left: 6px; }
	.wk.wk .tl-img { aspect-ratio: 16 / 10; border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) { .wk.wk .steps.tl::before, .wk.wk .tl-dot, .wk.wk .tl-img img { transition: none; } }

/* ================= Questions: "Still have a question?" card beside the answers ================= */
.wk.wk .faq-help { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px 16px; margin-top: 28px; padding: 22px; border: 1px solid var(--line); border-radius: 20px; background-color: #fff; box-shadow: 0 30px 60px -44px rgba(15, 18, 23, .45); }
.wk.wk .faq-help > .fh-copy:first-child { grid-column: 1 / -1; }
.wk.wk .fh-img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--gold); }
.wk.wk .fh-t { margin: 0; font: 400 clamp(20px, 1.7vw, 23px)/1.2 var(--serif); color: var(--ink); }
.wk.wk .fh-x { margin: 5px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--sub); }
.wk.wk .fh-btns { grid-column: 1 / -1; display: grid; gap: 8px; }
.wk.wk .fh-btns .btn { justify-content: center; width: 100%; }
.wk.wk .fh-btns .btn svg { width: 17px; height: 17px; }
.wk.wk .fh-s { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 9px; margin: -2px 0 0; font-size: 13.5px; line-height: 1.35; color: var(--sub); }
.wk.wk .fh-s i { flex: none; width: 8px; height: 8px; border-radius: 50%; background-color: #2f9e62; box-shadow: 0 0 0 3px rgba(47, 158, 98, .2); }
.wk.wk .fh-s.closed i { background-color: #c98a1a; box-shadow: 0 0 0 3px rgba(201, 138, 26, .2); }
.wk.wk .faq.stack .faq-help { grid-template-columns: auto minmax(0, 1fr) auto; max-width: 900px; margin: 0 0 28px; }
.wk.wk .faq.stack .fh-btns { grid-column: auto; grid-auto-flow: column; }
.wk.wk .faq.stack .fh-s { justify-content: flex-start; }
@media (max-width: 860px) {
	/* Phones and tablets: the card follows the questions */
	.wk.wk .faq:not(.stack) .faq-side { display: contents; }
	.wk.wk .faq:not(.stack) .faq-list { order: 1; }
	.wk.wk .faq:not(.stack) .faq-help { order: 2; margin-top: 24px; }
	.wk.wk .faq.stack .faq-help { grid-template-columns: auto minmax(0, 1fr); }
	.wk.wk .faq.stack .fh-btns { grid-column: 1 / -1; grid-auto-flow: row; }
}
@media (min-width: 600px) and (max-width: 860px) { .wk.wk .faq-help { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); } .wk.wk .fh-btns { grid-column: 3; grid-row: 1; } .wk.wk .fh-s { grid-column: 1 / -1; justify-content: flex-start; } }

/* ================= Call to action Showcase: a piece in a pool of light ================= */
.wk.wk .cta-stage { overflow-x: clip; }
.wk.wk .cta-stage .cta-box.has-media { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.wk.wk .cta-stage .cta-media { display: grid; place-items: center; aspect-ratio: auto; padding: 44px; overflow: visible; border-radius: 0; }
.wk.wk .cta-pool { --pool: #fff; --orbit: rgba(214, 180, 112, .5); position: relative; width: min(100%, 430px); aspect-ratio: 1; border-radius: 50%; background: var(--pool); box-shadow: 0 0 0 1px rgba(255, 255, 255, .05), 0 0 90px rgba(214, 180, 112, .3); isolation: isolate; }
.wk.wk .cta-pool::before { content: ""; position: absolute; inset: -44px; border: 1px solid rgba(214, 180, 112, .14); border-radius: 50%; pointer-events: none; }
.wk.wk .cta-orbit { position: absolute; inset: -18px; border: 1px solid var(--orbit); border-radius: 50%; animation: wk-orbit 22s linear infinite; pointer-events: none; }
.wk.wk .cta-orbit::after { content: ""; position: absolute; top: 50%; left: -4px; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background-color: var(--gold); box-shadow: 0 0 14px 4px rgba(214, 180, 112, .65); }
@keyframes wk-orbit { to { transform: rotate(360deg); } }
@keyframes wk-float { 50% { transform: translateY(-8px); } }
.wk.wk .cta-piece { position: absolute; inset: 15%; display: grid; grid-template: 100% / 100%; place-items: center; overflow: hidden; border-radius: 50%; animation: wk-float 7s ease-in-out infinite; }
.wk.wk .cta-piece > img, .wk.wk .cta-piece > video { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: opacity .5s ease; }
.wk.wk .cta-piece.pv > video { opacity: 0; }
.wk.wk .cta-piece.pv.playing > video { opacity: 1; }
.wk.wk .cta-piece.pv.playing > img { opacity: 0; }
.wk.wk .cta-stage:not(.dark) .cta-pool { box-shadow: 0 50px 90px -50px rgba(15, 18, 23, .4), 0 0 0 1px var(--line); }
@media (max-width: 860px) {
	.wk.wk .cta-stage .cta-box.has-media { grid-template-columns: minmax(0, 1fr); }
	.wk.wk .cta-stage .cta-media { padding: 28px 0 8px; }
	.wk.wk .cta-pool { width: min(64vw, 300px); }
}
@media (prefers-reduced-motion: reduce) { .wk.wk .cta-orbit, .wk.wk .cta-piece { animation: none; } }

/* ================= Product row Showcase: a large title and both actions beside the pieces ================= */
.wk.wk .ps-grid { display: grid; grid-template-columns: minmax(250px, 3.3fr) minmax(0, 8.7fr); align-items: center; gap: clamp(28px, 4vw, 64px); }
.wk.wk .ps-intro { display: grid; align-content: center; justify-items: start; gap: 24px; margin: 0; }
.wk.wk .ps-intro .eyebrow { margin-bottom: 14px; color: var(--gold-ink); }
.wk.wk .ps-t { margin: 0; font: 400 clamp(32px, 3.1vw, 48px)/1.06 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.wk.wk .ps-intro p { margin-top: 14px; font-size: 16px; line-height: 1.6; }
.wk.wk .ps-btns { display: grid; justify-items: start; gap: 4px; }
.wk.wk .ps-intro .arrows { margin-top: 2px; }
.wk.wk .look-showcase .prow { --per: 2.6; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), rgba(0, 0, 0, .2)); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), rgba(0, 0, 0, .2)); }
.wk.wk .dark .ps-t { color: #fff; }
.wk.wk .dark .ps-intro .eyebrow { color: var(--gold); }
@media (max-width: 1100px) {
	.wk.wk .ps-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.wk.wk .ps-intro { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 32px; }
	.wk.wk .ps-intro > div:first-child { grid-column: 1 / -1; }
	.wk.wk .look-showcase .prow { grid-auto-columns: calc((100% - 1.5 * var(--gap)) / 2.5); }
}
@media (max-width: 760px) {
	.wk.wk .ps-intro { grid-template-columns: minmax(0, 1fr); gap: 18px; }
	.wk.wk .ps-btns { width: 100%; }
	.wk.wk .ps-btns .btn { width: 100%; justify-content: center; }
	.wk.wk .ps-btns .link { justify-self: center; }
	.wk.wk .look-showcase .prow { grid-auto-columns: 72%; }
}

/* ================= Phone action bar: round Call and Directions icons, the full "Book a free consultation" between ================= */
.wk.wk .actbar { grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: center; }
.wk.wk .actbar a.ab-ic { width: 48px; height: 48px; min-height: 48px; padding: 0; border-radius: 50%; }
.wk.wk .actbar a.ab-ic svg { width: 20px; height: 20px; }
.wk.wk .actbar a.main { padding: 0 14px; white-space: nowrap; }
@media (max-width: 360px) { .wk.wk .actbar { gap: 6px; padding-inline: 8px; } .wk.wk .actbar a.main { padding: 0 8px; font-size: 13px; letter-spacing: -.01em; } }

/* Header: room for "Book a free consultation" beside six menu items (the phone number stays in the top bar) */
.wk.wk .hd .btn-book { padding-inline: 20px; font-size: 14.5px; white-space: nowrap; }
@media (min-width: 1241px) {
	.wk.wk .hd:has(.nav > ul > li:nth-child(6)) .tel-icon { display: none; }
	.wk.wk .hd:has(.nav > ul > li:nth-child(6)) .nav > ul { gap: clamp(14px, 1.3vw, 22px); }
	.wk.wk .hd:has(.nav > ul > li:nth-child(6)) .nav-a { font-size: 14.5px; }
	.wk.wk .hd > .wrap { gap: 18px; }
}
@media (min-width: 1241px) and (max-width: 1365px) {
	.wk.wk .hd:has(.nav > ul > li:nth-child(6)) .logo { gap: 9px; }
	.wk.wk .hd:has(.nav > ul > li:nth-child(6)) .logo svg { width: 28px; height: 28px; }
	.wk.wk .hd:has(.nav > ul > li:nth-child(6)) .logo .w { font-size: 19px; }
	.wk.wk .hd:has(.nav > ul > li:nth-child(6)) .logo .d { font-size: 9.5px; }
	.wk.wk .hd:has(.nav > ul > li:nth-child(6)) .nav > ul { gap: 13px; }
	.wk.wk .hd:has(.nav > ul > li:nth-child(6)) .nav-a { font-size: 14px; }
	.wk.wk .hd:has(.nav > ul > li:nth-child(6)) .btn-book { padding-inline: 16px; font-size: 14px; }
	.wk.wk .hd:has(.nav > ul > li:nth-child(6)) .actions { gap: 2px; }
	.wk.wk .hd > .wrap { gap: 14px; }
}

/* ================= Hero on phones: a small turning ring beside the headline, a shorter intro ================= */
.wk.wk .hero-mini, .wk.wk .hero .lead-m { display: none; }
@media (max-width: 600px) {
	.wk.wk .hero.has-mini .hero-media { display: none; }
	.wk.wk .hero.has-mini .hero-copy { padding-top: 26px; padding-bottom: 34px; }
	.wk.wk .hero.has-mini .hero-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; }
	.wk.wk .hero.has-mini .hero-top .h1 { min-width: 0; }
	.wk.wk .hero.has-mini .lead-d { display: none; }
	.wk.wk .hero.has-mini .lead-m { display: block; margin-top: 16px; }
	.wk.wk .hero.has-mini .hero-cta { margin-top: 22px; }
	.wk.wk .hero.has-mini .hero-call { display: none; }
	.wk.wk .hero.has-mini .trust { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 20px; padding-top: 18px; }
	.wk.wk .hero.has-mini .trust li { font-size: 13.5px; }
	.wk.wk .hero-mini { position: relative; display: block; width: 112px; aspect-ratio: 1; margin: 6px 8px 0 0; border-radius: 50%; background: #fff; box-shadow: 0 0 46px rgba(214, 180, 112, .32); isolation: isolate; }
	.wk.wk .hm-orbit { position: absolute; inset: -8px; border: 1px solid rgba(214, 180, 112, .5); border-radius: 50%; animation: wk-orbit 20s linear infinite; }
	.wk.wk .hm-orbit::after { content: ""; position: absolute; top: 50%; left: -3px; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background-color: var(--gold); box-shadow: 0 0 10px 3px rgba(214, 180, 112, .65); }
	.wk.wk .hm-piece { position: absolute; inset: 5%; display: grid; grid-template: 100% / 100%; place-items: center; overflow: hidden; border-radius: 50%; }
	.wk.wk .hm-piece > img, .wk.wk .hm-piece > video { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transform: scale(1.12); transition: opacity .5s ease; }
	.wk.wk .hm-piece > video { opacity: 0; }
	.wk.wk .hero-mini.playing .hm-piece > video { opacity: 1; }
	.wk.wk .hero-mini.playing .hm-piece > img { opacity: 0; }
}
@media (max-width: 600px) and (prefers-reduced-motion: reduce) { .wk.wk .hm-orbit { animation: none; } }

/* ================= Spotlight with a favorites row: tap a ring card to see it turn in the large frame ================= */
.wk.wk .spot-cards { position: relative; z-index: 1; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(124px, 1fr); gap: 12px; width: 100%; margin-top: 4px; padding: 4px 2px 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.wk.wk .spot-cards::-webkit-scrollbar { display: none; }
.wk.wk .spot-cards button { display: grid; align-content: start; gap: 4px; min-width: 0; padding: 8px 8px 12px; border: 1.5px solid var(--line); border-radius: 16px; background-color: #fff; text-align: left; cursor: pointer; scroll-snap-align: start; transition: border-color .2s, box-shadow .25s, transform .25s; }
.wk.wk .spot-cards button:hover { border-color: var(--field); transform: translateY(-2px); }
.wk.wk .spot-cards button[aria-pressed="true"] { border-color: var(--gold-deep); box-shadow: 0 16px 30px -22px rgba(15, 18, 23, .5); }
.wk.wk .spot-cards button:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.wk.wk .spc-img { display: block; aspect-ratio: 1; margin-bottom: 4px; border-radius: 10px; background-color: #fff; overflow: hidden; }
.wk.wk .spc-img img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.wk.wk .spc-n { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font: 600 13px/1.3 var(--sans); color: var(--ink); }
.wk.wk .spc-p { font-size: 12.5px; color: var(--sub); }
.wk.wk .spot-save { position: absolute; top: 14px; right: 14px; z-index: 4; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background-color: #fff; color: var(--ink); cursor: pointer; box-shadow: 0 8px 20px -12px rgba(15, 18, 23, .4); transition: transform .2s, color .2s; }
.wk.wk .spot-save svg { width: 20px; height: 20px; }
.wk.wk .spot-save:hover { transform: scale(1.06); }
.wk.wk .spot-save[aria-pressed="true"] { color: #b3261e; }
.wk.wk .spot-save[aria-pressed="true"] svg { fill: currentColor; }
.wk.wk .spot-cta { align-items: center; flex-wrap: wrap; gap: 10px 24px; }
.wk.wk .dark .spot-cards button { border-color: transparent; }
@media (max-width: 600px) {
	.wk.wk .spot-cards { grid-auto-columns: 132px; gap: 10px; margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut); scroll-padding-inline: var(--gut); width: auto; }
	.wk.wk .spot-cta { flex-direction: column; }
	.wk.wk .spot-cta .btn { width: 100%; justify-content: center; }
}

/* ================= Ring designer on phones: a short card that opens it in place ================= */
.wk.wk .st-tease { display: none; }
@media (max-width: 600px) {
	.wk.wk .sec.st-phone-card:not(.st-open) { padding-block: 28px; }
	.wk.wk .st-phone-card:not(.st-open) .shead, .wk.wk .st-phone-card:not(.st-open) .studio-card { display: none; }
	.wk.wk .st-phone-card:not(.st-open) .st-tease { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 16px; padding: 14px 16px 14px 14px; border: 1px solid var(--line); border-radius: 20px; background-color: #fff; box-shadow: 0 24px 50px -36px rgba(15, 18, 23, .45); }
	.wk.wk .st-tease-img { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 14px; background-color: #fff; }
	.wk.wk .st-tease-img img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transform: scale(1.12); }
	.wk.wk .st-tease-copy .eyebrow { margin: 0 0 4px; font-size: 11px; color: var(--gold-ink); }
	.wk.wk .st-tease-copy .h3 { margin: 0; font-size: 21px; line-height: 1.15; }
	.wk.wk .st-tease-copy p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--sub); }
	.wk.wk .st-tease-copy .btn { min-height: 42px; margin-top: 12px; padding: 0 16px; font-size: 14px; white-space: nowrap; }
}

/* Steps on phones without their photos: the numbers stand on their own */
@media (max-width: 599px) {
	.wk.wk .steps.tl.no-img-m .tl-img { aspect-ratio: auto; margin: 0; overflow: visible; border-radius: 0; background: none; }
	.wk.wk .steps.tl.no-img-m .tl-img img, .wk.wk .steps.tl.no-img-m .tl-img::after { display: none; }
	.wk.wk .steps.tl.no-img-m .tl-img .tl-n { position: static; font-size: 46px; font-weight: 300; color: transparent; -webkit-text-stroke: 1px var(--gold-deep); text-shadow: none; }
	.wk.wk .steps.tl.no-img-m .tl-dot { top: 14px; }
}

/* ================= Visit on phones: today's hours with "See all hours", no map drawing ================= */
/* The times stay on one line ("10 am – 6 pm" broke after the dash in narrow columns); the day name wraps instead. */
.wk.wk .hours li > span:last-child { flex: none; white-space: nowrap; }
.wk.wk .hours-more { display: none; }
@media (max-width: 600px) {
	.wk.wk .visit-media:not(.one) { grid-template-columns: minmax(0, 1fr); }
	.wk.wk .visit-media:not(.one) a.map, .wk.wk .visit-media:not(.one) .map { display: none; }
	.wk.wk div:not(.hours-open) > .hours li:not(.today) { display: none; }
	.wk.wk .hours-more { display: inline-flex; align-items: center; min-height: 40px; margin-top: 4px; padding: 0; border: 0; background: none; font: 700 14px/1.2 var(--sans); color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold-deep); text-underline-offset: 4px; cursor: pointer; }
}

/* ================= Computers: a slim booking bar that stays on screen after the first screen ================= */
.wk.wk .bkpill { position: fixed; left: 50%; bottom: 20px; z-index: 66; display: none; align-items: center; gap: 16px; max-width: calc(100vw - 220px); padding: 7px 8px 7px 20px; border-radius: 999px; background-color: rgba(15, 18, 23, .95); color: #fff; box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06); transform: translate(-50%, 160%); transition: transform .4s cubic-bezier(.2, .7, .2, 1); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.wk.wk .bkpill.on { transform: translate(-50%, 0); }
@media (min-width: 861px) { .wk.wk .bkpill { display: flex; } }
.wk.wk .bp-status { display: inline-flex; align-items: center; gap: 9px; min-width: 0; font-size: 13.5px; line-height: 1.3; white-space: nowrap; color: rgba(255, 255, 255, .82); }
.wk.wk .bp-status i { flex: none; width: 8px; height: 8px; border-radius: 50%; background-color: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, .22); }
.wk.wk .bp-status.closed i { background-color: #f5b74a; box-shadow: 0 0 0 3px rgba(245, 183, 74, .22); }
.wk.wk .bkpill .bp-book { min-height: 44px; padding: 0 20px; font-size: 14.5px; white-space: nowrap; }
.wk.wk .bp-call { display: inline-flex; align-items: center; gap: 7px; font: 700 14px/1 var(--sans); color: #fff; text-decoration: none; white-space: nowrap; }
.wk.wk .bp-call svg { width: 16px; height: 16px; color: var(--gold); }
.wk.wk .bp-call:hover { text-decoration: underline; text-underline-offset: 4px; }
.wk.wk .bp-x { display: grid; place-items: center; flex: none; width: 34px; height: 34px; margin-left: -4px; border: 0; border-radius: 50%; background: none; color: rgba(255, 255, 255, .6); cursor: pointer; }
.wk.wk .bp-x:hover { background-color: rgba(255, 255, 255, .1); color: #fff; }
.wk.wk .bp-x svg { width: 16px; height: 16px; }
@media (max-width: 1100px) { .wk.wk .bp-status { display: none; } .wk.wk .bkpill { padding-left: 8px; } }
body.wk-pill-on .wk.wk .toast { bottom: 92px; }
/* While the booking panel or the tray is open, "Ask our jeweller" (OM Catalog) steps aside so it can't cover their buttons. */
body.wk-modal-open .om-ai .om-ai-launch.om-ai-launch, body.wk-modal-open .om-ai .om-ai-panel, body.wk-modal-open .om-ai-starter { display: none !important; }
@media (prefers-reduced-motion: reduce) { .wk.wk .bkpill { transition: none; } }

/* ================= Ring style quiz: four picture questions, then three matching rings ================= */
.wk.wk .qz-sec .shead { display: block; }
.wk.wk .qz-sec .shead.center > div { margin-inline: auto; }
.wk.wk .qz-card [hidden] { display: none !important; }
.wk.wk .qz-pts { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 18px 0 0; padding: 0; list-style: none; font: 500 14.5px/1.3 var(--sans); color: var(--sub); }
.wk.wk .shead.center .qz-pts { justify-content: center; }
.wk.wk .qz-pts li { display: inline-flex; align-items: center; gap: 7px; }
.wk.wk .qz-pts svg { width: 16px; height: 16px; color: var(--gold-deep); }
.wk.wk .dark .qz-pts { color: var(--sub-night); }
.wk.wk .dark .qz-pts svg { color: var(--gold); }
.wk.wk .qz-card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: 540px; overflow: hidden; border: 1px solid var(--line); border-radius: calc(var(--r) * 2); background-color: #fff; color: var(--text); box-shadow: 0 50px 90px -50px rgba(15, 18, 23, .45); }
.wk.wk .dark .qz-card { border-color: transparent; box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .7); }
/* The stage: a drawing that follows the answers, then the top match turning */
.wk.wk .qz-stage { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 14px; min-width: 0; padding: clamp(24px, 3vw, 40px); border-right: 1px solid var(--line); background-color: #fff; isolation: isolate; }
.wk.wk .qz-art { position: relative; min-height: 300px; }
.wk.wk .qz-art > svg { width: 100%; max-width: 380px; height: auto; }
.wk.wk .qz-art > video, .wk.wk .qz-art > img { width: 100%; max-width: 460px; aspect-ratio: 1; height: auto; object-fit: contain; background: transparent; mix-blend-mode: multiply; }
.wk.wk .qz-art.is-photo > img { width: 82%; }
.wk.wk .qz-art.flash::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .7) 50%, transparent 70%); transform: translateX(-100%); animation: wkflash .9s ease both; pointer-events: none; }
.wk.wk .qz-picks { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; min-height: 32px; margin: 0; padding: 0; list-style: none; }
.wk.wk .qz-picks button { min-height: 32px; padding: 0 13px; border: 1px solid var(--line); border-radius: 999px; background-color: #fff; color: var(--ink); font: 600 13px/1 var(--sans); cursor: pointer; transition: border-color .2s; }
.wk.wk .qz-picks button:hover { border-color: var(--ink); }
/* Questions */
.wk.wk .qz-body { display: grid; align-content: start; min-width: 0; padding: clamp(24px, 3vw, 40px) clamp(22px, 3.2vw, 44px); }
.wk.wk .qz-top { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px 14px; }
.wk.wk .qz-back { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; margin-left: -6px; padding: 0 10px 0 4px; border: 0; border-radius: 999px; background: none; color: var(--ink); font: 700 14px/1 var(--sans); cursor: pointer; }
.wk.wk .qz-back:hover { background-color: var(--ivory); }
.wk.wk .qz-back svg { width: 18px; height: 18px; }
.wk.wk .qz-back[hidden] + .qz-count { grid-column: 1 / -1; }
.wk.wk .qz-count { margin: 0; font: 700 12.5px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); }
.wk.wk .qz-prog { grid-column: 1 / -1; height: 4px; overflow: hidden; border-radius: 4px; background-color: var(--ivory); }
.wk.wk .qz-prog span { display: block; height: 100%; width: 25%; border-radius: inherit; background-color: var(--gold-deep); transition: width .5s cubic-bezier(.2, .7, .2, 1); }
.wk.wk .qz-step { min-width: 0; margin: 0; padding: 0; border: 0; }
.wk.wk .qz-step:not([hidden]) { animation: wkqz .45s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes wkqz { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.wk.wk .qz-q { display: block; float: none; width: 100%; margin: 22px 0 18px; padding: 0; font: 400 clamp(22px, 2vw, 28px)/1.2 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.wk.wk .qz-q:focus { outline: none; }
.wk.wk .qz-hint { margin: -8px 0 16px; font-size: 14.5px; line-height: 1.5; color: var(--sub); }
.wk.wk .qz-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.wk.wk .qz-budgets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wk.wk .qz-opt { position: relative; display: grid; justify-items: center; align-content: start; gap: 6px; min-width: 0; padding: 14px 10px 14px; border: 1.5px solid var(--line); border-radius: 14px; background-color: #fff; color: var(--ink); text-align: center; cursor: pointer; transition: border-color .2s, box-shadow .25s, transform .25s; }
.wk.wk .qz-opt:hover { border-color: var(--field); transform: translateY(-2px); }
.wk.wk .qz-opt[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 16px 30px -22px rgba(15, 18, 23, .55); }
.wk.wk .qz-opt[aria-pressed="true"]::after { content: ""; position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 50%; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.wk.wk .qz-opt:focus-visible, .wk.wk .qz-skip:focus-visible, .wk.wk .qz-picks button:focus-visible, .wk.wk .qz-alts button:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.wk.wk .qz-pic { display: grid; place-items: center; width: 52px; height: 52px; color: var(--ink); }
.wk.wk .qz-pic svg { width: 46px; height: 46px; }
.wk.wk .qz-ph { padding: 8px 8px 14px; }
.wk.wk .qz-ph .qz-pic { width: 100%; height: auto; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px; background-color: #fff; }
.wk.wk .qz-metals .qz-pic { aspect-ratio: 1; }
.wk.wk .qz-ph .qz-pic img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.wk.wk .qz-ph:hover .qz-pic img { transform: scale(1.05); }
.wk.wk .qz-v0 img, .wk.wk .qz-ph:hover .qz-v0 img { transform: scale(1.38); }
.wk.wk .qz-sw .sw { width: 64px; height: 64px; }
.wk.wk .qz-trio { display: flex; justify-content: center; align-items: center; }
.wk.wk .qz-ph .qz-trio img { width: 40%; height: auto; aspect-ratio: 1; margin-inline: -5%; border: 1px solid var(--line); border-radius: 50%; background-color: #fff; mix-blend-mode: normal; }
.wk.wk .qz-ph .qz-trio img:nth-child(2) { position: relative; z-index: 1; width: 46%; }
.wk.wk .qz-gem svg { width: 58px; height: 58px; transform: scale(var(--f, 1)); }
.wk.wk .qz-l { display: inline-flex; align-items: center; gap: 7px; font: 700 14.5px/1.25 var(--sans); color: var(--ink); }
.wk.wk .qz-l .sw { width: 14px; height: 14px; }
.wk.wk .qz-x { font-size: 13px; line-height: 1.4; color: var(--sub); }
.wk.wk .qz-skip { display: inline-flex; align-items: center; min-height: 40px; margin-top: 10px; padding: 0 2px; border: 0; background: none; color: var(--ink); font: 700 14.5px/1.2 var(--sans); text-decoration: underline; text-decoration-color: var(--gold-deep); text-underline-offset: 5px; cursor: pointer; }
.wk.wk .qz-skip[aria-pressed="true"] { color: var(--gold-ink); }
.wk.wk .qz-wait { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 300px; margin: 0; font: 600 16px/1.3 var(--sans); color: var(--ink); }
.wk.wk .qz-wait svg { width: 22px; height: 22px; color: var(--gold-deep); animation: wkspin 1.1s linear infinite; }
@keyframes wkspin { to { transform: rotate(360deg); } }
/* Results */
.wk.wk .qz-done .qz-body { align-content: center; }
.wk.wk .qz-res:not([hidden]) { animation: wkqz .5s cubic-bezier(.2, .7, .2, 1) both; }
.wk.wk .qz-lbl { margin: 0; font: 700 12.5px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); }
.wk.wk .qz-name { margin: 8px 0 6px; font: 400 clamp(23px, 2vw, 30px)/1.2 var(--serif); color: var(--ink); }
.wk.wk .qz-name:focus { outline: none; }
.wk.wk .qz-meta { margin: 0; font-size: 15px; line-height: 1.5; color: var(--sub); }
.wk.wk .qz-meta a { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.wk.wk .qz-meta a svg { width: 15px; height: 15px; transition: transform .2s; }
.wk.wk .qz-meta a:hover svg { transform: translateX(3px); }
.wk.wk .qz-why { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.wk.wk .qz-why li { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px; border-radius: 999px; background-color: var(--ivory); font: 600 13px/1 var(--sans); color: var(--text); }
.wk.wk .qz-why li.on { background-color: #f4ecdb; color: var(--ink); }
.wk.wk .qz-why svg { width: 14px; height: 14px; color: var(--gold-ink); }
.wk.wk .qz-note { margin: 10px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--sub); }
.wk.wk .qz-alts-h { margin: 22px 0 10px; font: 700 12.5px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--sub); }
.wk.wk .qz-alts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.wk.wk .qz-alts button { display: grid; align-content: start; gap: 3px; min-width: 0; padding: 7px 7px 11px; border: 1.5px solid var(--line); border-radius: 14px; background-color: #fff; text-align: left; cursor: pointer; transition: border-color .2s, transform .25s; }
.wk.wk .qz-alts button:hover { border-color: var(--field); transform: translateY(-2px); }
.wk.wk .qz-alts button[aria-pressed="true"] { border-color: var(--gold-deep); }
.wk.wk .qz-alt-img { display: block; aspect-ratio: 4 / 3; margin-bottom: 4px; overflow: hidden; border-radius: 9px; background-color: #fff; }
.wk.wk .qz-alt-img img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.wk.wk .qz-alt-img img.v0 { transform: scale(1.35); }
.wk.wk .qz-alt-n { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font: 600 13px/1.3 var(--sans); color: var(--ink); }
.wk.wk .qz-alt-p { font-size: 12.5px; color: var(--sub); }
.wk.wk .qz-budget { margin: 16px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--sub); }
.wk.wk .qz-budget b { color: var(--ink); }
.wk.wk .qz-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.wk.wk .qz-acts .btn { min-height: 50px; padding: 0 22px; font-size: 15px; }
.wk.wk .qz-acts .btn-line svg { width: 18px; height: 18px; }
.wk.wk .qz-mail { display: grid; gap: 8px; margin-top: 16px; padding: 16px; border-radius: 14px; background-color: var(--ivory); }
.wk.wk .qz-mail label { font: 700 14px/1.2 var(--sans); color: var(--ink); }
.wk.wk .qz-mail-row { display: flex; gap: 8px; }
.wk.wk .qz-mail input[type="email"] { flex: 1; min-width: 0; height: 48px; padding: 0 14px; border: 1.5px solid var(--field); border-radius: 10px; background-color: #fff; font-size: 16px; color: var(--ink); }
.wk.wk .qz-mail input[type="email"]:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.wk.wk .qz-mail input[aria-invalid="true"] { border-color: #b3261e; }
.wk.wk .qz-mail .btn { min-height: 48px; padding: 0 18px; font-size: 14.5px; white-space: nowrap; }
.wk.wk .qz-mail-note { margin: 0; font-size: 13px; color: var(--sub); }
.wk.wk .qz-mail .err { margin: 0; }
.wk.wk .qz-sent { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; font: 600 14.5px/1.4 var(--sans); color: var(--ink); }
.wk.wk .qz-sent svg { flex: none; width: 18px; height: 18px; color: #2e7d4f; }
.wk.wk .qz-fine { margin: 14px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--sub); }
.wk.wk .qz-again { padding: 0; border: 0; background: none; color: var(--ink); font: 700 13.5px/1.5 var(--sans); text-decoration: underline; text-decoration-color: var(--gold-deep); text-underline-offset: 4px; cursor: pointer; }
@media (min-width: 1100px) {
	.wk.wk .qz-shapes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.wk.wk .qz-budgets { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
	.wk.wk .qz-card { grid-template-columns: minmax(0, 1fr); min-height: 0; }
	.wk.wk .qz-stage { grid-template-rows: auto; padding: 14px 16px 0; border-right: 0; }
	.wk.wk .qz-art { min-height: 0; height: 150px; }
	.wk.wk .qz-art > svg { max-width: 180px; max-height: 150px; }
	.wk.wk .qz-picks { display: none; }
	.wk.wk .qz-done .qz-art { height: auto; }
	.wk.wk .qz-done .qz-art > video, .wk.wk .qz-done .qz-art > img { max-width: 340px; }
	.wk.wk .qz-body { padding: 14px 16px 20px; }
	.wk.wk .qz-q { margin: 16px 0 14px; font-size: 21px; }
	.wk.wk .qz-hint { margin: -6px 0 12px; font-size: 13.5px; }
	.wk.wk .qz-opts { gap: 8px; }
	.wk.wk .qz-opt { padding: 10px 6px 11px; border-radius: 12px; }
	.wk.wk .qz-ph { padding: 6px 6px 10px; }
	.wk.wk .qz-pic { width: 42px; height: 42px; }
	.wk.wk .qz-pic svg { width: 38px; height: 38px; }
	.wk.wk .qz-gem svg { width: 46px; height: 46px; }
	.wk.wk .qz-l { font-size: 13.5px; }
	.wk.wk .qz-styles .qz-x { display: none; }
	.wk.wk .qz-opt[aria-pressed="true"]::after { top: 5px; right: 5px; width: 18px; height: 18px; background-size: 11px; }
	.wk.wk .qz-wait { min-height: 200px; }
}
@media (max-width: 600px) {
	.wk.wk .sec.qz-sec.qz-sec { padding-block: 56px 60px; }
	.wk.wk .qz-sec .lead { display: none; }
	.wk.wk .qz-sec .shead { margin-bottom: 26px; }
	.wk.wk .qz-done .qz-art > video, .wk.wk .qz-done .qz-art > img { max-width: 290px; }
	.wk.wk .qz-meta a { display: flex; width: fit-content; margin: 4px 0 0; }
	.wk.wk .qz-mail input[type="email"] { flex: none; }
	.wk.wk .qz-pts { margin-top: 14px; font-size: 13.5px; }
	.wk.wk .qz-acts { flex-direction: column; }
	.wk.wk .qz-acts .btn { width: 100%; }
	.wk.wk .qz-mail-row { flex-direction: column; }
	.wk.wk .qz-alts { gap: 8px; }
	.wk.wk .qz-alt-n { font-size: 12px; }
	.wk.wk .qz-alt-p { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
	.wk.wk .qz-step:not([hidden]), .wk.wk .qz-res:not([hidden]) { animation: none; }
	.wk.wk .qz-opt, .wk.wk .qz-ph .qz-pic img, .wk.wk .qz-prog span { transition: none; }
	.wk.wk .qz-opt:hover { transform: none; }
}

/* ================= "Drop a hint" (OM Catalog): a quiet link in the spotlight and the quiz results ================= */
.wk.wk .wk-hint[hidden] { display: none !important; }
.wk.wk button.wk-hint { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin: 0; padding: 0; border: 0; background: none; color: var(--ink); font: 700 15px/1.2 var(--sans); cursor: pointer; }
.wk.wk button.wk-hint span { text-decoration: underline; text-decoration-color: var(--gold-deep); text-underline-offset: 5px; }
.wk.wk button.wk-hint svg { width: 18px; height: 18px; flex: none; color: var(--gold-deep); }
.wk.wk button.wk-hint:hover span { text-decoration-thickness: 2px; }
.wk.wk button.wk-hint:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; border-radius: 4px; }
.wk.wk .dark .spot-cta button.wk-hint { color: #fff; }
.wk.wk .dark .spot-cta button.wk-hint svg { color: var(--gold); }
.wk.wk .qz-more { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; margin: 10px 0 0; }
.wk.wk .qz-more button.wk-hint { font-size: 13.5px; }
.wk.wk .qz-more button.wk-hint svg { width: 16px; height: 16px; }
.wk.wk .qz-fine + .qz-more { margin-top: 6px; }
@media (max-width: 600px) { .wk.wk .spot-cta button.wk-hint { align-self: center; } }

/* ================= "Email me my tray" (OM Catalog's saved-designs email), under the tray's pieces ================= */
.wk.wk .dr-mail { margin: 18px 28px 22px; border-radius: 14px; background-color: var(--ivory); scroll-margin: 18px 0 22px; }
.wk.wk .dr-mail-open { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 14px 16px; border: 0; border-radius: 14px; background: none; text-align: left; color: var(--ink); cursor: pointer; }
.wk.wk .dr-mail-open:focus-visible { outline-offset: -2px; border-radius: 14px; }
.wk.wk .dr-mail-open > span { flex: 1; min-width: 0; display: grid; gap: 2px; }
.wk.wk .dr-mail-open b { font: 600 15.5px/1.3 var(--sans); }
.wk.wk .dr-mail-open:hover b { text-decoration: underline; text-underline-offset: 3px; }
.wk.wk .dr-mail-open small { font-size: 13.5px; line-height: 1.4; color: var(--sub); }
.wk.wk .dr-mail-ic { flex: none; width: 22px; height: 22px; }
.wk.wk .dr-mail-open .chev { flex: none; width: 18px; height: 18px; transition: transform .2s; }
.wk.wk .dr-mail-open[aria-expanded="true"] .chev { transform: rotate(180deg); }
.wk.wk .dr-mail-form { display: grid; gap: 8px; padding: 2px 16px 16px; }
.wk.wk .dr-mail-form label { font: 700 14px/1.2 var(--sans); color: var(--ink); }
.wk.wk .dr-mail-row { display: flex; gap: 8px; }
.wk.wk .dr-mail-row input { flex: 1; min-width: 0; height: 48px; padding: 0 14px; border: 1.5px solid var(--field); border-radius: 10px; background-color: #fff; font-size: 16px; color: var(--ink); }
.wk.wk .dr-mail-row input:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.wk.wk .dr-mail-row input[aria-invalid="true"] { border-color: #b3261e; }
.wk.wk .dr-mail-row .btn { min-height: 48px; padding: 0 22px; font-size: 14.5px; white-space: nowrap; }
.wk.wk .dr-mail-form .err { margin: 0; }
.wk.wk .dr-sent { display: flex; align-items: center; gap: 8px; margin: 0; padding: 18px 16px; font: 600 14.5px/1.4 var(--sans); color: var(--ink); overflow-wrap: anywhere; }
.wk.wk .dr-sent:focus { outline: none; }
.wk.wk .dr-sent svg { flex: none; width: 18px; height: 18px; color: #2e7d4f; }
@media (max-width: 600px) { .wk.wk .dr-mail { margin-inline: 20px; } }
@media (prefers-reduced-motion: reduce) { .wk.wk .dr-mail-open .chev { transition: none; } }

/* ================= The shop (OM Catalog) follows the corner style =================
   Square or cut corners: the catalog, product pages, ring builder and their pop-ups take square corners
   too, and with cut corners the product pictures and the main buttons are cut as well. Round things
   (hearts, play buttons, colour swatches, counters) stay round. Rounded corners leave the shop's own design. */
body:is(.wk-square, .wk-cut) { --om-radius: 2px; --om-radius-lg: 2px; --om-btn-radius: 2px; --om-rv-cta-radius: 2px; --om-end-btn-radius: 2px; --om-qv-radius: 2px; --om-tile-radius: 2px; }
body:is(.wk-square, .wk-cut) :is(.om-refined, .om-builder, .om-product-gallery, .om-design-modern, .om-cdesign-modern, .om-reels) { --om-r: 2px; --om-r-lg: 2px; --om-rb-radius: 2px; --om-thumb-radius: 2px; --om-media-radius: 2px; --om-radius-d: 2px; --om-radius-lg-d: 2px; }
body:is(.wk-square, .wk-cut) :is(.om-card-image, .om-qv-btn, .om-badge, .om-chip, .om-card-choose, .om-set-ask, .om-card-play--label, .om-search, .om-search-input, .om-search-submit, .om-sort-select, .om-filter-nav, .om-filter-dropdowns select, .om-grid-size-btn, .om-filter-picked, .om-sticky-tools, .om-st-btn, .om-end-card, .om-compare-tray, .om-compare-open,
	.om-main-media, .om-media-count, .om-thumb-label, .om-thumb-btn, .om-watch-video, .om-save-toggle--page, .om-btn, .om-trust > li, .om-pill-text, .om-option, .om-options-form, .om-details, .om-inquiry, .om-booking-frame, .om-sticky-cta, .om-inquiry-submit, .om-sg-print, .om-acc, .om-ts-open, .om-ts-card, .om-ts-pick, .om-ts-toggle, .om-ts-toggle button,
	.om-rb-way, .om-rb-way-tag, .om-rb-pill, .om-rb-chip, .om-rb-next, .om-rb-continue, .om-rb-book, .om-rb-guide-go, .om-rb-pick-choose, .om-rb-pick-media, .om-rb-pick-tag, .om-rb-hero-tag, .om-rb-tip, .om-rb-next-steps, .om-rb-q-card > span, .om-rb-q-seg, .om-rb-q-seg label > span, .om-rb-q-shape > span, .om-rb-email-form button, .om-rb-email-form input[type="email"], .om-rb-done-img,
	.om-quick-view, .om-qv-share, .om-hint-dialog, .om-hint-chip, .om-hint-send, .om-hint-field :is(input, select, textarea), .om-hint-preview, .om-hint-finish, .om-hint-item, .om-hint-thumb, .om-saved-btn, .om-saved-email input, .om-saved-photo, .om-saved-float, .om-toast, .om-toast-undo, .om-dcmp-dialog, .om-dcmp-strip, .om-dcmp-media, .om-dcmp-select, .om-rv-panel, .om-rv-more) { border-radius: 2px !important; }
/* Cut: the pictures and the main buttons (no outlines to break at the cuts). */
body.wk-cut :is(.om-card-image, .om-main-media, .om-btn--solid, .om-builder-btn, .om-sticky-cta, .om-inquiry-submit, .om-rb-next, .om-rb-continue, .om-rb-book, .om-qv-btn--bar, .om-rb-way) {
	--c: 10px; border-radius: 0 !important;
	clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}
body.wk-cut :is(.om-card-image, .om-rb-way) { --c: 14px; }
body.wk-cut .om-main-media { --c: 20px; border-color: transparent !important; }
body.wk-cut .om-qv-btn--bar { --c: 7px; }
body.wk-cut .om-rb-way { border-color: transparent !important; background-color: var(--paper, #f6f3ee) !important; }
body.wk-cut :is(.om-btn--solid, .om-builder-btn, .om-sticky-cta, .om-inquiry-submit, .om-rb-next, .om-rb-continue, .om-rb-book):focus-visible { outline-offset: -4px; }

/* ================= Hero, centred: the words above, the piece in a wide display case below =================
   Hero › Layout › "Centred, with a display case". The case shows the turning piece on the left and
   its name, price and the other pieces on the right; phones show the case first, then the words. */
.wk.wk .hero.lay-center .hero-grid { grid-template-columns: minmax(0, 1fr); justify-items: center; min-height: 0; padding: clamp(40px, 4.4vw, 64px) var(--gut) clamp(40px, 4.6vw, 64px); text-align: center; }
.wk.wk .hero.lay-center .hero-copy { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 1000px; padding: 0; }
.wk.wk .hero.lay-center .h1 { font-size: clamp(40px, 5vw, 74px); }
.wk.wk .hero.lay-center .lead { max-width: 72ch; margin-inline: auto; text-wrap: balance; }
.wk.wk .hero.lay-center .hero-call { display: none; }
.wk.wk .hero.lay-center :is(.hero-cta, .hero-note) { justify-content: center; }
.wk.wk .hero.lay-center .hero-media.slot { position: relative; display: block; width: min(100%, 1100px); height: clamp(320px, 29vw, 390px); margin-top: clamp(32px, 3.4vw, 48px); padding: 0; overflow: hidden; }
.wk.wk .hero.lay-center .hero-media .sc-stage { inset: 18px auto 18px 4%; width: 48%; }
.wk.wk .hero.lay-center .hero-media .sc-foot { inset: 0 6% 0 56%; flex-direction: column; align-items: flex-start; justify-content: center; gap: 20px; text-align: left; }
.wk.wk .hero.lay-center .sc-lab { margin: 0 0 -8px; font: 700 11px/1.2 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-ink); }
.wk.wk .hero.lay-center .sc-cap { gap: 12px; font-size: 15px; }
.wk.wk .hero.lay-center .sc-cap b { display: block; font: 400 clamp(24px, 2.3vw, 32px)/1.12 var(--serif); letter-spacing: -.01em; }
.wk.wk .hero.lay-center .sc-meta { display: block; margin-top: 6px; }
.wk.wk .hero.lay-center .sc-sep { display: none; }
.wk.wk .hero.lay-center .hero-media .sc-thumbs button { width: 60px; height: 60px; }
.wk.wk .hero.lay-center .trust { justify-content: center; margin-top: clamp(24px, 2.6vw, 34px); padding-top: 0; border-top: 0; }
@media (max-width: 860px) {
	.wk.wk .hero.lay-center .hero-grid { padding: 16px var(--gut) 36px; }
	.wk.wk .hero.lay-center .hero-media.slot { order: -1; height: clamp(236px, 64vw, 320px); min-height: 0; max-height: none; margin: 0 0 26px; }
	.wk.wk .hero.lay-center .hero-media .sc-stage { inset: 10px 10px 72px; width: auto; }
	.wk.wk .hero.lay-center .hero-media .sc-foot { inset: auto 12px 12px; flex-direction: row; justify-content: center; gap: 0; }
	.wk.wk .hero.lay-center :is(.sc-cap, .sc-lab) { display: none; }
	.wk.wk .hero.lay-center .hero-media .sc-thumbs button { width: 48px; height: 48px; }
	.wk.wk .hero.lay-center .trust { gap: 8px 18px; margin-top: 22px; }
}
@media (max-width: 600px) {
	.wk.wk .hero.lay-center .lead-d { display: none; }
	.wk.wk .hero.lay-center .lead-m { display: block; margin-top: 16px; }
	.wk.wk .hero.lay-center .trust li { font-size: 13.5px; }
}

/* ================= Daylight look =================
   Wulf Kit › Settings › Look, or one page's own choice (the "Home (daylight)" template uses it): warm paper
   and white instead of night, ink buttons, gold kept for small accents, a hallmark stamp in the hero and the
   three golds under the big headlines. Cards lose their hairlines: white on paper sections, paper on white. */
body.wk-day .wk { --paper: #f6f3ee; --paper-2: #eee9e1; --line: #e4ded4; --tint: rgba(122, 91, 36, .075); --tint-2: rgba(122, 91, 36, .14); --wg: #c6cbd2; --yg: #c9a45f; --rg: #d29a83; }
body.wk-day .wk.wk :focus-visible { outline-color: var(--ink); }
/* One flourish per title: the starred words in gold italics. */
body.wk-day .wk.wk .gold-em, body.wk-day .wk.wk .hero .gold-em { font-style: italic; font-weight: 300; color: var(--gold-hd); }
body.wk-day .wk.wk .h3 .gold-em { color: var(--gold-ink); }
body.wk-day .wk.wk .dark .gold-em { color: var(--gold); }
body.wk-day .wk.wk .sec.ivory { background-color: var(--paper); }

/* Sections designed dark (page banners, calls to action, the 4Cs, films) are printed "designed dark, on a
   light background": page banners and a film at the top take the hero's paper, the rest a deeper paper, so
   the backgrounds still alternate. A colour set in Style › Section still wins, and a section given a dark
   colour of its own stays dark with light text. */
body.wk-day :where(.wk.wk .sec.is-light) { background-color: var(--paper-2); }
body.wk-day :where(.wk.wk .pgh.is-light) { background: linear-gradient(180deg, #fbfaf8 0%, var(--paper) 100%); }
body.wk-day :where(.wk.wk .sec.cta-card.is-light) { background-color: var(--bg); }
body.wk-day .wk.wk .cta-card.is-light .cta-box { border-color: transparent; background-color: var(--paper); }
body.wk-day .wk.wk .ft { box-shadow: inset 0 1px 0 var(--line); }

/* Top bar and header: light, with a hairline. */
body.wk-day .wk.wk .announce { background-color: var(--paper-2); color: var(--text); border-bottom-color: var(--line); }
body.wk-day .wk.wk .announce a { color: var(--ink); }
body.wk-day .wk:not(.hd-ink) .hd.hd, body.wk-day .wk.hd-ink .hd.hd:is(.solid, .mega-on) { background-color: #fff; color: var(--ink); box-shadow: 0 1px 0 var(--line); }
body.wk-day .wk.wk .hd .logo svg { color: var(--gold-deep); }
body.wk-day .wk:not(.hd-ink) .hd .lg-solid { display: block; }
body.wk-day .wk:not(.hd-ink) .hd .lg-solid + .lg-top, body.wk-day .wk:not(.hd-ink) .hd .lg-top:has(+ .lg-solid) { display: none; }
body.wk-day .wk:not(.hd-ink) .hd.hd .btn-book.btn-book, body.wk-day .wk.hd-ink .hd.hd:is(.solid, .mega-on) .btn-book.btn-book { background-color: var(--ink); color: #fff; }
body.wk-day .wk:not(.hd-ink) .hd.hd .btn-book.btn-book:hover, body.wk-day .wk.hd-ink .hd.hd:is(.solid, .mega-on) .btn-book.btn-book:hover { background-color: #2a313c; }
/* A dark header (.hd-ink: Look "Always dark", or a dark background chosen for it) stays dark at the top, with a fine
   gold line under it. Its button is black with a fine light outline (along the cut) and turns white on hover; colours
   set in the header's own Style tab still win. */
body.wk-day .wk.hd-ink .hd:not(.solid):not(.mega-on) { box-shadow: 0 1px 0 rgba(214, 185, 127, .3); }
body.wk-day .wk.hd-ink .hd:not(.solid):not(.mega-on) .btn-book { --bw: 1px; --bd: rgba(255, 255, 255, .55); border-width: 1px; border-color: rgba(255, 255, 255, .55); background-color: transparent; color: #fff; letter-spacing: .015em; }
body.wk-day .wk.hd-ink .hd:not(.solid):not(.mega-on) .btn-book:is(:hover, :focus-visible) { --bd: #fff; border-color: #fff; background-color: #fff; color: var(--ink); }
/* Once the page scrolls the bar trims a little (it moves up a few pixels: no layout shift) and casts a soft shadow. */
body.wk-day .wk.wk .hd { transition: background .25s, color .25s, box-shadow .3s, transform .35s cubic-bezier(.2, .7, .2, 1); }
body.wk-day .wk.wk .hd .logo img { transform-origin: left center; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
body.wk-day .wk.wk .hd.is-scrolled { transform: translateY(-8px); }
body.wk-day .wk.wk .hd.is-scrolled .logo img { transform: translateY(4px) scale(.88); }
body.wk-day .wk:not(.hd-ink) .hd.hd.is-scrolled, body.wk-day .wk.hd-ink .hd.hd.is-scrolled:is(.solid, .mega-on) { box-shadow: 0 1px 0 var(--line), 0 14px 30px -22px rgba(15, 18, 23, .35); }
body.wk-day .wk.hd-ink .hd.is-scrolled:not(.solid):not(.mega-on) { box-shadow: 0 1px 0 rgba(214, 185, 127, .3), 0 14px 30px -20px rgba(0, 0, 0, .7); }

/* Buttons: ink first, a soft paper tint second, gold only as an accent. */
body.wk-day .wk.wk .btn-gold { border-color: var(--ink); background-color: var(--ink); color: #fff; }
body.wk-day .wk.wk .btn-gold:hover { border-color: #2a313c; background-color: #2a313c; color: #fff; }
body.wk-day .wk.wk :is(.btn-line, .btn-ghost) { border-color: transparent; background-color: var(--tint); color: var(--ink); }
body.wk-day .wk.wk :is(.btn-line, .btn-ghost):hover { border-color: var(--ink); background-color: var(--ink); color: #fff; }
body.wk-day .wk.wk .btn { font-weight: 650; letter-spacing: .005em; }

/* Hero */
body.wk-day .wk.wk .hero { background: linear-gradient(180deg, #fbfaf8 0%, var(--paper) 100%); color: var(--ink); }
body.wk-day .wk.wk .hero .h1 { color: var(--ink); letter-spacing: -.02em; }
body.wk-day .wk.wk .hero-copy .lead { color: var(--sub); }
body.wk-day .wk.wk .hero .kicker { display: block; margin-bottom: 22px; font: 600 14px/1.4 var(--sans); letter-spacing: .01em; text-transform: none; color: var(--text); }
body.wk-day .wk.wk .hero .kicker::before { content: var(--mark, "WULF \25C6  1971"); display: var(--mark-d, inline-block); margin: 0 10px 0 0; padding: 6px 9px 5px; border: 1px solid currentColor; border-radius: 2px; font: 700 10px/1 var(--sans); letter-spacing: .2em; vertical-align: 1px; color: var(--ink); border-color: var(--gold-hd); }
body.wk-day .wk.wk :is(.hero:not(.lay-vitrine) .h1, .reel-chapter .shead .h2)::after { content: ""; display: block; width: 84px; height: 2px; margin-top: 24px; background: linear-gradient(90deg, var(--wg) 0 33.3%, var(--yg) 33.3% 66.6%, var(--rg) 66.6%); }
body.wk-day .wk.wk .hero.lay-center .h1::after { margin-inline: auto; }
body.wk-day .wk.wk .hero-note { color: var(--sub); }
body.wk-day .wk.wk .hero-note svg { color: var(--gold-deep); }
body.wk-day .wk.wk .hero-call { color: var(--sub); }
body.wk-day .wk.wk .hero-call a { color: var(--ink); }
body.wk-day .wk.wk .hero .trust { border-top-color: var(--line); }
body.wk-day .wk.wk .hero .trust li { color: var(--text); }
body.wk-day .wk.wk .hero .trust svg { color: var(--gold-ink); }
body.wk-day .wk.wk .hero-cta .btn-ghost { min-height: 0; padding: 6px 0; border: 0; background: none; box-shadow: inset 0 -1.5px 0 var(--gold-deep); color: var(--ink); }
body.wk-day .wk.wk .hero-cta .btn-ghost:hover { background: none; color: var(--gold-ink); }
body.wk-day .wk.wk .hero-cta .btn-ghost::after { content: "\2192"; margin-left: 2px; }
@media (min-width: 861px) { body.wk-day .wk.wk .hero-cta { align-items: center; gap: 28px; } }
@media (max-width: 600px) {
	body.wk-day .wk.wk .hero-cta .btn-ghost { min-height: 52px; padding: 0 26px; background-color: var(--tint); box-shadow: none; }
	body.wk-day .wk.wk .hero-cta .btn-ghost::after { content: none; }
	body.wk-day .wk.wk .hero .kicker::before { display: var(--mark-d, table); margin: 0 auto 12px; }
	body.wk-day .wk.wk .hero:not(.lay-center):not(.lay-vitrine) .kicker::before { margin-left: 0; }
}
body.wk-day .wk.wk .hero-media.slot { background-color: #fff; }
body.wk-day .wk.wk .hero-media .sc-thumbs button { border-color: transparent; background-color: var(--paper); }
body.wk-day .wk.wk .hero-media .sc-thumbs button[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--ink); }

/* Booking bar: a white bar resting on the hero's paper. */
body.wk-day .wk.wk .bkbar-sec { padding-bottom: clamp(44px, 5vw, 72px); background-color: var(--paper); }
body.wk-day .wk.wk .bkbar { border-color: transparent; box-shadow: none; }
body.wk-day .wk.wk :is(.bkbar select, .field input, .field select, .field textarea, .qz-mail input[type="email"], .dr-mail-row input, .sheet-search input, .hd-search input) { border: 0; border-bottom: 1.5px solid var(--field); border-radius: 0; background-color: var(--paper); }
body.wk-day .wk.wk :is(.bkbar select, .field input, .field select, .field textarea):hover { border-bottom-color: var(--ink); }

/* Cards and panels: the fill does the work. */
body.wk-day .wk.wk :is(.path, .sc .path, .spot-cards button, .faq-help, .tray-card, .studio-card, .st-tease, .qz-card, .after, .box) { border-color: transparent; box-shadow: none; }
body.wk-day .wk.wk :is(.path, .sc .path, .spot-cards button):hover { box-shadow: none; }
body.wk-day .wk.wk .sec:not(.ivory):not(.dark):not(.is-light) :is(.path, .sc .path, .sc .feat .path, .spot-cards button, .faq-help, .tray-card, .st-tease, .after, .box) { background-color: var(--paper); }
body.wk-day .wk.wk .sec:not(.ivory):not(.dark):not(.is-light) :is(.spc-img, .st-tease-img) { background-color: transparent; }
body.wk-day .wk.wk .sec:not(.ivory):not(.dark):not(.is-light) .spot-ring { background-color: var(--paper); box-shadow: none; }
body.wk-day .wk.wk .sec:not(.ivory):not(.dark):not(.is-light) .spot-ring > :is(video, img) { mix-blend-mode: multiply; }
body.wk-day .wk.wk :is(.sec.ivory, .sec.dark, .sec.is-light) :is(.path, .sc .path, .spot-cards button, .faq-help, .tray-card, .st-tease, .after, .box, .studio-card, .qz-card, .spot-ring) { background-color: #fff; }
/* Inner pages: category tiles, reviews, services, promises, steps, boxed lists, product and post pictures. */
body.wk-day .wk.wk :is(.tile, .rev, .svc, .vals li, .steps li, .lists.boxed > div, .card .slot, .post .slot, .cr-frame, .split-media, .pgh-media, .hc, .mega-feature, .dr-thumb) { border-color: transparent; }
body.wk-day .wk.wk .sec:not(.ivory):not(.dark):not(.is-light) :is(.tile, .rev, .svc, .vals li, .steps:not(.tl) li, .lists.boxed > div) { background-color: var(--paper); }
body.wk-day .wk.wk :is(.sec.ivory, .sec.is-light) :is(.tile, .rev, .svc, .vals li, .steps:not(.tl) li, .lists.boxed > div) { background-color: #fff; }
body.wk-day .wk.wk .hc { background-color: var(--tint); }
body.wk-day .wk.wk .spot-media::before { display: none; }
body.wk-day .wk.wk .spot-ring { box-shadow: none; }

/* Choices: a soft tint, ink when chosen. */
body.wk-day .wk.wk :is(.opt, .spot-metals button, .qz-picks button) { border-color: transparent; background-color: var(--tint); color: var(--ink); }
body.wk-day .wk.wk :is(.opt, .spot-metals button, .qz-picks button):hover { border-color: transparent; background-color: var(--tint-2); }
body.wk-day .wk.wk :is(.opt[aria-checked="true"], .opt[aria-pressed="true"], .spot-metals button[aria-checked="true"]) { border-color: var(--ink); background-color: var(--ink); color: #fff; }
body.wk-day .wk.wk .qz-opt { border-color: transparent; background-color: var(--tint); }
body.wk-day .wk.wk .qz-opt:hover { border-color: transparent; background-color: var(--tint-2); }
body.wk-day .wk.wk .qz-opt[aria-pressed="true"] { border-color: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); }
body.wk-day .wk.wk .qz-ph .qz-pic { background-color: transparent; }
body.wk-day .wk.wk .spot-cards button[aria-pressed="true"] { border-color: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); }
body.wk-day .wk.wk :is(.alts button, .spot-pick button, .sc-arr) { border-color: transparent; background-color: var(--tint); }
body.wk-day .wk.wk .alts button[aria-pressed="true"], body.wk-day .wk.wk .spot-pick button[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--ink); }
body.wk-day .wk.wk .sc-tag { border-color: transparent; background-color: #fff; }
body.wk-day .wk.wk .sc .feat .sc-arr { border-color: var(--gold); background-color: var(--gold); }
body.wk-day .wk.wk .sc .wide .path-go { border-color: transparent; background-color: var(--tint); }
body.wk-day .wk.wk .sc .wide .sc-arr { border-color: var(--ink); }
body.wk-day .wk.wk .ctl-head b span { border-color: transparent; background-color: var(--tint); }
body.wk-day .wk.wk :is(.path-ic, .vs-list .v-ic) { background-color: var(--tint); }

/* Ring designer: a white card on paper, no shadow. */
body.wk-day .wk.wk :is(.preview, .preview .main) { background-color: #fff; }

/* Values: the photo framed in the three golds, an ink "since" tag. */
body.wk-day .wk.wk .vs-media::before { border-color: var(--yg); }

/* Steps: the three golds along the line, small hallmark tags on the photos. */
body.wk-day .wk.wk .steps.tl::before { background: linear-gradient(90deg, var(--wg), var(--yg) 50%, var(--rg)); }
body.wk-day .wk.wk .steps.tl li:nth-child(3n+1) .tl-dot { background-color: var(--wg); box-shadow: 0 0 0 5px rgba(198, 203, 210, .3); }
body.wk-day .wk.wk .steps.tl li:nth-child(3n+2) .tl-dot { background-color: var(--yg); box-shadow: 0 0 0 5px rgba(201, 164, 95, .24); }
body.wk-day .wk.wk .steps.tl li:nth-child(3n) .tl-dot { background-color: var(--rg); box-shadow: 0 0 0 5px rgba(210, 154, 131, .24); }
body.wk-day .wk.wk .tl-img .tl-n { left: 16px; bottom: 16px; padding: 7px 10px 6px; border-radius: 2px; background-color: rgba(15, 18, 23, .72); font: 700 11px/1 var(--sans); letter-spacing: .18em; text-shadow: none; }
body.wk-day .wk.wk .tl-img::after { background: linear-gradient(180deg, rgba(11, 14, 20, 0) 60%, rgba(11, 14, 20, .35)); }
@media (max-width: 1023px) { body.wk-day .wk.wk .steps.tl::before { background: linear-gradient(180deg, var(--wg), var(--yg) 50%, var(--rg)); } }

/* Questions */
body.wk-day .wk.wk .fh-img { box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--yg); }

/* Films: the words in ink on paper; the film plays in a dark display case with a fine metal edge (the films
   are bright lines on black, made to melt into a dark background). */
body.wk-day .wk.wk .reel:not(.reel-chapter) { background: var(--paper-2); color: var(--text); }
body.wk-day .wk.wk .reel:not(.reel-chapter).l-hero { background: linear-gradient(180deg, #fbfaf8 0%, var(--paper) 100%); }
body.wk-day .wk.wk .reel:not(.reel-chapter) :is(.h1, .h2, .h3) { color: var(--ink); }
body.wk-day .wk.wk .reel:not(.reel-chapter) .eyebrow { color: var(--sub); }
body.wk-day .wk.wk .reel:not(.reel-chapter) :is(.lead, .reel-text) { color: var(--sub); }
body.wk-day .wk.wk .reel:not(.reel-chapter) .reel-text a { color: var(--ink); }
body.wk-day .wk.wk .reel:not(.reel-chapter) .trust { border-top-color: var(--line); }
body.wk-day .wk.wk .reel:not(.reel-chapter) .trust li { color: var(--text); }
body.wk-day .wk.wk .reel:not(.reel-chapter) .trust svg { color: var(--gold-ink); }
body.wk-day .wk.wk .reel:not(.reel-chapter) .reel-watch-link { color: var(--ink); }
body.wk-day .wk.wk .reel:not(.reel-chapter) .reel-watch-link .rw-ic { border-color: rgba(15, 18, 23, .28); }
body.wk-day .wk.wk .reel:not(.reel-chapter) .reel-watch-link .rw-t { text-decoration-color: rgba(122, 91, 36, .45); }
body.wk-day .wk.wk .reel:not(.reel-chapter) .reel-watch-link:hover .rw-ic { border-color: var(--ink); background-color: var(--ink); color: #fff; }
body.wk-day .wk.wk .reel:not(.reel-chapter) .reel-watch-link:hover .rw-t { text-decoration-color: var(--ink); }
body.wk-day .wk.wk .reel:not(.reel-chapter) .reel-note-ed { border-color: var(--line); color: var(--sub); }
body.wk-day .wk.wk .reel:not(.reel-chapter) :is(.reel-cues .rc-p, .ft-tab .rc-p) { background-color: var(--gold-deep); }
/* The chapters beside the film: numbered steps, small buttons, years on a line, tabs. */
body.wk-day .wk.wk .reel:not(.reel-chapter) :is(.cs-steps, .cs-steps li) { border-color: var(--line); }
body.wk-day .wk.wk .reel:not(.reel-chapter) .cs-steps :is(.rc, .rc-n, .rc-x) { color: var(--sub); }
body.wk-day .wk.wk .reel:not(.reel-chapter) .cs-steps .rc-l { color: var(--text); }
body.wk-day .wk.wk .reel:not(.reel-chapter) .cs-steps :is(.rc:hover, .rc[aria-current]) .rc-l { color: var(--ink); }
body.wk-day .wk.wk .reel:not(.reel-chapter) .cs-steps :is(.rc[aria-current], .rc.is-done) .rc-n { color: var(--gold-ink); }
body.wk-day .wk.wk .reel:not(.reel-chapter) .cs-chips .rc { border-color: transparent; background-color: var(--tint); color: var(--ink); }
body.wk-day .wk.wk .reel:not(.reel-chapter) .cs-chips .rc:hover { border-color: transparent; background-color: var(--tint-2); color: var(--ink); }
body.wk-day .wk.wk .reel:not(.reel-chapter) .cs-chips .rc[aria-current] { border-color: var(--ink); background-color: var(--ink); color: #fff; }
body.wk-day .wk.wk .reel:not(.reel-chapter) .cs-timeline .rc { color: var(--sub); }
body.wk-day .wk.wk .reel:not(.reel-chapter) .cs-timeline .rc::before { background-color: var(--line); }
body.wk-day .wk.wk .reel:not(.reel-chapter) .cs-timeline .rc::after { border-color: var(--sub); background-color: var(--paper-2); }
body.wk-day .wk.wk .reel:not(.reel-chapter) .cs-timeline :is(.rc:hover, .rc[aria-current]) { color: var(--ink); }
body.wk-day .wk.wk .reel:not(.reel-chapter) .cs-timeline :is(.rc[aria-current], .rc.is-done)::after { border-color: var(--gold-deep); background-color: var(--gold-deep); }
body.wk-day .wk.wk .reel:not(.reel-chapter) .reel-tl-cap { color: var(--ink); }
body.wk-day .wk.wk .reel:not(.reel-chapter) .ft-tabs { border-bottom-color: var(--line); }
body.wk-day .wk.wk .reel:not(.reel-chapter) :is(.ft-tab, .ft-tab .ft-n) { color: var(--sub); }
body.wk-day .wk.wk .reel:not(.reel-chapter) :is(.ft-tab:hover, .ft-tab[aria-selected="true"]) { color: var(--ink); }
body.wk-day .wk.wk .reel:not(.reel-chapter) .ft-tab[aria-selected="true"] .ft-n { color: var(--gold-ink); }
body.wk-day .wk.wk .reel:not(.reel-chapter) .ft-panel .h3 { color: var(--ink); }
body.wk-day .wk.wk .reel:not(.reel-chapter) .ft-panel p { color: var(--sub); }
/* The case: inset from the page edge at the top of a page, beside the words further down. */
body.wk-day .wk.wk .reel-stage { border-radius: var(--r); overflow: hidden; }
@media (min-width: 901px) {
	body.wk-day .wk.wk .l-hero .reel-stage { min-height: 0; margin: clamp(28px, 3.4vw, 48px) max(var(--gut), calc((100vw - var(--max)) / 2)) clamp(28px, 3.4vw, 48px) 0; }
	body.wk-day .wk.wk .l-hero .reel-hero-cues { padding-right: max(var(--gut), calc((100vw - var(--max)) / 2)); }
}
@media (max-width: 900px) {
	body.wk-day .wk.wk .l-hero .reel-stage { margin: 14px var(--gut) 0; }
	body.wk-day .wk.wk :is(.l-split .reel-stage, .l-split.side-left .reel-stage, .l-tabs .ft-stage, .l-tabs.side-right .ft-stage) { margin-inline: 0; }
}

/* The 4Cs: the controls in ink, the diamond in its own dark case. */
body.wk-day .wk.wk .seg { background-color: var(--tint); }
body.wk-day .wk.wk .tip { border-color: transparent; background-color: var(--tint); }
body.wk-day .wk.wk .viz { border-color: transparent; }

/* A fine metal edge (white, yellow and rose gold) around the dark cases. */
body.wk-day .wk.wk :is(.reel-stage, .viz)::after {
	content: ""; position: absolute; inset: 0; z-index: 4; padding: 1.5px; border-radius: inherit; pointer-events: none;
	background: linear-gradient(135deg, var(--wg), var(--yg) 50%, var(--rg));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* Footer: paper-2 instead of night. */
body.wk-day .wk.wk .ft { background-color: var(--paper-2); color: var(--sub); }
body.wk-day .wk.wk .ft .logo { color: var(--ink); }
body.wk-day .wk.wk .ft .logo svg { color: var(--gold-deep); }
body.wk-day .wk.wk .news { border-bottom-color: var(--line); }
body.wk-day .wk.wk .news .h3 { color: var(--ink); }
body.wk-day .wk.wk .news input { border: 0; border-bottom: 1.5px solid var(--field); border-radius: 0; background-color: #fff; color: var(--ink); }
body.wk-day .wk.wk .news input::placeholder { color: #737982; }
body.wk-day .wk.wk .news input:focus { border-color: var(--ink); }
body.wk-day .wk.wk .cols :is(h3, h4) { color: var(--ink); }
body.wk-day .wk.wk .cols a { color: var(--sub); }
body.wk-day .wk.wk .cols a:hover { color: var(--ink); }
body.wk-day .wk.wk .legal { border-top-color: var(--line); color: var(--sub); }

/* ================= Corner style (Settings › Corners, or one page's own choice) =================
   Square: crisp corners on buttons, cards, fields and frames. Cut: the corners cut away like a step-cut
   stone. Dots, metal swatches and faces stay round either way. */
body.wk-square .wk.wk :is(.btn, .opt, .seg, .seg button, .bkpill, .status, .sc-tag, .map-tag, .pgh-cap, .qz-picks button, .qz-back, .qz-why li, .qz-opt, .qz-alts button, .qz-mail, .qz-card, .qz-ph .qz-pic, .qz-alt-img, .spot-metals button, .spot-cards button, .spc-img, .spot-ring, .spot-save, .save, .spot-pick button, .spot-pick img, .path, .sc .path, .sc-arr, .sc .feat .path-go, .sc .wide .path-go, .path-ic, .v-ic, .bkbar, .bkbar select, .field input, .field select, .field textarea, .news input, .hd-search input, .sheet-search input, .dr-mail, .dr-mail-open, .dr-mail-row input, .qz-mail input, .studio-card, .preview, .preview .main, .alts button, .alts button img, .shape-opts .opt, .ctl-head b span, .tile, .card .slot, .card .badge, .svc, .svc-ph, .vals li, .rev, .tip, .viz, .reel-stage, .box, .after, .tray-card, .tray-card .thumbs div, .tl-img, .vs-media img, .vs-badge, .faq-help, .st-tease, .st-tease-img, .hero-media.slot, .hero-media .sc-thumbs button, .hero-media .sc-thumbs img, .om-ask-tabs, .om-ask-tab, .faq-list .pm, .mega-feature, .mega-shapes a, .post .slot, .pgh-media, .split-media, .st-photo, .cr-frame, .cta-media, .cta-card .cta-box, .lists.boxed > div, .bk-panel, .bk.pop .bk-panel, .bk-day, .bk-ctx, .bk-ctx img, .bk .bk-topics .opt, .bk-sum, .bk-sum-v li, .toast, .actbar a:not(.ab-ic)) { border-radius: 2px !important; }
body.wk-square .wk.wk .vs-media::before { border-radius: 2px !important; }
body.wk-square .wk.wk .steps.tl .tl-dot { border-radius: 1px; }

body.wk-cut .wk.wk :where(.btn, .bkpill, .qz-alts button, .qz-mail, .qz-card, .qz-ph .qz-pic, .qz-alt-img, .spot-cards button, .spc-img, .spot-ring, .spot-pick button, .path, .sc .path, .sc .feat .path-go, .sc .wide .path-go, .bkbar, .dr-mail, .dr-mail-open, .studio-card, .preview .main, .alts button, .tile, .card .slot, .svc, .vals li, .rev, .tip, .viz, .reel-stage, .box, .after, .tray-card, .tray-card .thumbs div, .tl-img, .vs-media img, .vs-badge, .faq-help, .st-tease, .st-tease-img, .hero.lay-center .hero-media.slot, .hero.lay-vitrine .hero-media.slot, .hero-media .sc-thumbs button, .mega-feature, .post .slot, .pgh-media, .split-media, .st-photo, .cr-frame, .cta-media, .cta-card .cta-box, .lists.boxed > div, .bk.pop .bk-panel, .bk-ctx, .bk-sum, .toast, .actbar a:not(.ab-ic)) {
	--c: 10px; border-radius: 0 !important;
	clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}
/* Cuts mean something only on what frames a piece: the cases, pictures, cards and main buttons. Fields, chips,
   tags, small icons and choices stay plain, with crisp corners. */
body.wk-cut .wk.wk :is(.opt, .seg, .seg button, .status, .sc-tag, .map-tag, .pgh-cap, .qz-picks button, .qz-back, .qz-why li, .qz-opt, .spot-metals button, .save, .spot-save, .sc-arr, .path-ic, .v-ic, .bkbar select, .field input, .field select, .field textarea, .news input, .hd-search input, .sheet-search input, .dr-mail-row input, .qz-mail input, .ctl-head b span, .card .badge, .faq-list .pm, .om-ask-tabs, .om-ask-tab, .bk-day, .bk .bk-topics .opt, .bk-sum-v li, .shape-opts .opt, .mega-shapes a, .bkbar-chip) { border-radius: 2px !important; }
body.wk-cut .wk.wk :where(.alts button, .spot-pick button, .hero-media .sc-thumbs button, .spc-img) img { border-radius: 0 !important; }
body.wk-cut .wk.wk :where(.btn, .opt, .qz-opt, .spot-metals button, .spot-cards button, .qz-picks button, .path, .alts button, .spot-pick button, .hero-media .sc-thumbs button, .bkbar select, .field input, .field select, .field textarea, .news input, .save, .spot-save, .sc-arr):focus-visible { outline-offset: -4px; }
/* Sizes: small tags and chips, buttons, cards, the large frames. */
body.wk-cut .wk.wk :is(.sc-tag, .status, .map-tag, .pgh-cap, .qz-why li, .bk-sum-v li, .ctl-head b span, .card .badge) { --c: 5px; }
body.wk-cut .wk.wk :is(.opt, .seg, .seg button, .om-ask-tabs, .om-ask-tab, .faq-list .pm, .qz-picks button, .qz-back, .spot-metals button, .sc-arr, .save, .spot-save, .alts button, .spot-pick button, .hero-media .sc-thumbs button, .qz-ph .qz-pic, .qz-alt-img, .spc-img, .tray-card .thumbs div, .bkbar select, .field input, .field select, .field textarea, .qz-mail input, .dr-mail-row input, .hd-search input, .sheet-search input) { --c: 7px; }
body.wk-cut .wk.wk :is(.btn, .bkpill, .actbar a:not(.ab-ic), .news input, .sc .feat .path-go, .sc .wide .path-go, .path-ic, .v-ic, .qz-opt, .shape-opts .opt, .bk .bk-topics .opt, .bk-day) { --c: 10px; }
body.wk-cut .wk.wk .btn.btn-sm { --c: 8px; }
/* An outlined button: a border stops where its corner is cut away, so the outline is drawn along the cut, in the
   colour its Elementor style sets (--bd, given with the border colour). */
body.wk-cut .wk.wk .btn { position: relative; }
body.wk-cut .wk.wk .btn::before { content: ""; position: absolute; inset: calc(-1 * var(--bw, 1.5px)); pointer-events: none; background-color: var(--bd, transparent);
	clip-path: polygon(evenodd, var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c), var(--c) 0, calc(var(--c) + var(--bw, 1.5px) * .4142) var(--bw, 1.5px), var(--bw, 1.5px) calc(var(--c) + var(--bw, 1.5px) * .4142), var(--bw, 1.5px) calc(100% - var(--c) - var(--bw, 1.5px) * .4142), calc(var(--c) + var(--bw, 1.5px) * .4142) calc(100% - var(--bw, 1.5px)), calc(100% - var(--c) - var(--bw, 1.5px) * .4142) calc(100% - var(--bw, 1.5px)), calc(100% - var(--bw, 1.5px)) calc(100% - var(--c) - var(--bw, 1.5px) * .4142), calc(100% - var(--bw, 1.5px)) calc(var(--c) + var(--bw, 1.5px) * .4142), calc(100% - var(--c) - var(--bw, 1.5px) * .4142) var(--bw, 1.5px), calc(var(--c) + var(--bw, 1.5px) * .4142) var(--bw, 1.5px)); }
body.wk-cut .wk.wk :is(.spot-cards button, .vs-badge, .tray-card, .dr-mail, .dr-mail-open, .toast, .qz-alts button, .qz-mail, .bk-ctx, .bk-sum, .mega-shapes a, .card .slot, .st-tease-img) { --c: 12px; }
body.wk-cut .wk.wk :is(.path, .sc .path, .bkbar, .faq-help, .box, .after, .tl-img, .st-tease, .tile, .svc, .vals li, .rev, .tip, .post .slot, .lists.boxed > div, .mega-feature, .preview .main) { --c: 16px; }
body.wk-cut .wk.wk :is(.qz-card, .studio-card, .spot-ring, .vs-media img, .split-media, .pgh-media, .st-photo, .cr-frame, .cta-media, .cta-card .cta-box, .bk.pop .bk-panel, .viz, .reel-stage) { --c: 24px; }
body.wk-cut .wk.wk .sc .feat .path { --c: 22px; }
body.wk-cut .wk.wk .hero.lay-center .hero-media.slot { --c: 28px; }
/* The display case and the values photo: a fine metal edge that follows the cut. */
body.wk-cut .wk.wk .hero.lay-center .hero-media.slot { background: linear-gradient(135deg, var(--wg), var(--yg) 50%, var(--rg)); }
body.wk-cut .wk.wk .hero.lay-center .hero-media.slot::before { --c: 27.1px; content: ""; position: absolute; inset: 1.5px; z-index: 0; background-color: #fff;
	clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c)); }
body.wk-cut .wk.wk .hero.lay-center .hero-media :is(.sc-stage, .sc-foot) { z-index: 1; }
body.wk-cut .wk.wk .vs-media::before { --c: 24px; inset: 16px -16px -16px 16px; border: 0; border-radius: 0; background: linear-gradient(135deg, var(--wg), var(--yg) 50%, var(--rg));
	clip-path: polygon(evenodd, var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c), var(--c) 0, calc(var(--c) + .5px) 1.2px, 1.2px calc(var(--c) + .5px), 1.2px calc(100% - var(--c) - .5px), calc(var(--c) + .5px) calc(100% - 1.2px), calc(100% - var(--c) - .5px) calc(100% - 1.2px), calc(100% - 1.2px) calc(100% - var(--c) - .5px), calc(100% - 1.2px) calc(var(--c) + .5px), calc(100% - var(--c) - .5px) 1.2px, calc(var(--c) + .5px) 1.2px); }
/* The dark cases (films, the 4Cs): the metal edge follows the cut. */
body.wk-cut .wk.wk :is(.reel-stage, .viz)::after { padding: 0; border-radius: 0; -webkit-mask: none; mask: none;
	clip-path: polygon(evenodd, var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c), var(--c) 0, calc(var(--c) + .62px) 1.5px, 1.5px calc(var(--c) + .62px), 1.5px calc(100% - var(--c) - .62px), calc(var(--c) + .62px) calc(100% - 1.5px), calc(100% - var(--c) - .62px) calc(100% - 1.5px), calc(100% - 1.5px) calc(100% - var(--c) - .62px), calc(100% - 1.5px) calc(var(--c) + .62px), calc(100% - var(--c) - .62px) 1.5px, calc(var(--c) + .62px) 1.5px); }
/* Chosen tiles: an ink bar along the bottom (an outline would break at the cut corners). */
body.wk-cut .wk.wk :is(.spot-cards button[aria-pressed="true"], .alts button[aria-pressed="true"], .spot-pick button[aria-pressed="true"], .hero-media .sc-thumbs button[aria-pressed="true"]) { box-shadow: inset 0 -2.5px 0 var(--ink); }
/* The steps' dots become small diamonds. */
body.wk-cut .wk.wk .steps.tl .tl-dot { border-radius: 1px; transform: rotate(45deg) scale(.86); }
body.wk-cut .wk.wk .steps.tl li.wk-rv:not(.in) .tl-dot { transform: rotate(45deg) scale(0); }
/* Square edges: the display case still gets its fine metal edge. */
body.wk-square .wk.wk .hero.lay-center .hero-media.slot { border: 1.5px solid transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, var(--wg), var(--yg) 50%, var(--rg)) border-box; }
body.wk-square .wk.wk .vs-media::before { border-color: var(--yg); }

/* ================= Daylight, kit 1.19: a first screen that sells the piece, titles with a chapter label,
   a tighter rhythm, the 1971 chapter, and a mark for each set (fine corner marks with square corners,
   step-cut lines with cut corners). Night is unchanged; the Display case hero is its own layout. ========= */

/* ---------- Rhythm: less empty space between sections (104 px instead of 136 px on a computer) ---------- */
body.wk-day .wk { --sec: clamp(58px, 6.6vw, 95px); }

/* ---------- Titles: a chapter label above, the title on the left, its intro and link on the right ---------- */
/* The labels above headings: ink, with the gold mark (small gold text reads brown on light paper). */
body.wk-day .wk.wk :is(.shead, .pgh, .split, .cta-box, .ps-intro) .eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 700 11.5px/1.2 var(--sans); letter-spacing: .2em; color: var(--text); }
body.wk-day .wk.wk :is(.shead, .pgh, .split, .cta-box, .ps-intro) .eyebrow::before { content: ""; flex: none; width: 7px; height: 7px; border: 1.5px solid currentColor; color: var(--gold-hd); }
body.wk-day.wk-cut .wk.wk :is(.shead, .pgh, .split, .cta-box, .ps-intro) .eyebrow::before { width: 10px; height: 10px; border: 0; background-color: currentColor; clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); }
body.wk-day .wk.wk .dark :is(.shead, .pgh, .split, .cta-box, .ps-intro) .eyebrow, body.wk-day .wk.wk .pgh.dark .eyebrow { color: var(--gold); }
/* On a page banner the label sits on its own line, a set distance above the title. */
body.wk-day .wk.wk .pgh .eyebrow { display: flex; width: fit-content; margin-bottom: 18px; }
body.wk-day .wk.wk .pgh.center .eyebrow { margin-inline: auto; }
/* Small gold text reads brown on light paper: links in text are ink with a gold underline, small labels ink, step
   numbers grey, the hallmark ink in a gold frame; icons take the heading gold (a graphic needs less contrast than text). */
body.wk-day .wk.wk :is(.prose, .faq-a, .split-text) a { color: var(--ink); text-decoration-color: var(--gold-hd); text-decoration-thickness: 1.5px; }
body.wk-day .wk.wk :is(.bk-eye, .qz-count, .qz-lbl, .sc-lab, .st-tease-copy .eyebrow) { color: var(--text); }
body.wk-day .wk.wk .dark :is(.bk-eye, .qz-count, .qz-lbl, .sc-lab, .st-tease-copy .eyebrow) { color: var(--gold); }
body.wk-day .wk.wk :is(.path-n, .vs-n) { color: var(--sub); }
body.wk-day .wk.wk .ctl-head b span { color: var(--ink); }
body.wk-day .wk.wk :is(.trust svg, .tick-list svg, .cta-call svg, .qz-why svg, .tip svg, .pgh:not(.dark) .trust svg, .hero .trust svg, .reel:not(.reel-chapter) .trust svg, .path-ic, .v-ic, .bk-ti, .lists .v-ic, .vs-list .v-ic) { color: var(--gold-hd); }
body.wk-day .wk.wk .shead .h2 { margin-top: 0; letter-spacing: -.015em; }
body.wk-day .wk.wk .shead.sh-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: end; gap: 14px clamp(32px, 6vw, 110px); }
body.wk-day .wk.wk .shead.sh-split > div { max-width: none; min-width: 0; }
body.wk-day .wk.wk .sh-side { display: grid; justify-items: start; gap: 14px; padding-bottom: 6px; }
body.wk-day .wk.wk .sh-side .lead { max-width: 46ch; margin: 0; }
body.wk-day .wk.wk .sh-side .qz-pts { justify-content: flex-start; margin: 0; }
@media (max-width: 860px) {
	body.wk-day .wk.wk .shead.sh-split { grid-template-columns: minmax(0, 1fr); }
	body.wk-day .wk.wk .sh-side { padding-bottom: 0; }
}
@media (max-width: 600px) {
	body.wk-day .wk.wk .st-phone-card:not(.st-open) .shead.sh-split { display: none; }
}

/* ---------- The Display case hero ---------- */
.wk.wk .hero.lay-vitrine { position: relative; overflow: hidden; }
.wk.wk .hero.lay-vitrine .hero-grid {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.72fr) minmax(0, 1fr); grid-template-areas: "top top top" "l case r";
	column-gap: var(--vt-cg, clamp(32px, 3.4vw, 52px)); row-gap: var(--vt-rg, clamp(26px, 2.6vw, 38px)); align-items: center; justify-items: stretch;
	width: 100%; min-height: 0; max-width: calc(var(--max) + 2 * var(--gut)); margin-inline: auto; padding: clamp(22px, 2.2vw, 32px) var(--gut) clamp(96px, 8.4vw, 124px); text-align: left;
}
.wk.wk .lay-vitrine .vt-top { grid-area: top; text-align: center; }
.wk.wk .lay-vitrine .h1 { margin: 0; font-size: clamp(38px, 4.5vw, 68px); line-height: 1.02; }
.wk.wk .lay-vitrine .h1::after { display: none; }
.wk.wk .lay-vitrine .kicker { margin-bottom: 14px; }
.wk.wk .lay-vitrine .vt-l { grid-area: l; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.wk.wk .lay-vitrine .vt-l .lead { max-width: 30ch; margin: 0; font-size: clamp(16.5px, 1.25vw, 18px); line-height: 1.6; text-align: left; text-wrap: pretty; }
.wk.wk .lay-vitrine .vt-l .lead-d { display: none; }
.wk.wk .lay-vitrine .vt-l .lead-m { display: block; }
body .wk.wk .lay-vitrine .hero-cta { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 16px; margin-top: 30px; }
.wk.wk .lay-vitrine .hero-note { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px; margin-top: 22px; font-size: 14.5px; }
.wk.wk .lay-vitrine .hero-call { margin-top: 18px; }
.wk.wk .lay-vitrine .vt-case { grid-area: case; position: relative; min-width: 0; }
.wk.wk .lay-vitrine .hero-media.slot { position: relative; z-index: 1; display: block; width: 100%; height: clamp(380px, min(38vw, 100vh - 350px), 580px); min-height: 0; max-height: none; margin: 0; padding: 0; overflow: hidden; border-radius: var(--r); background-color: #fff; }
.wk.wk .lay-vitrine .hero-media .sc-stage { position: absolute; inset: 7% 9% 15%; width: auto; height: auto; max-width: none; aspect-ratio: auto; }
.wk.wk .lay-vitrine .sc-item video, .wk.wk .lay-vitrine .sc-item img { transform: scale(1.16); }
/* The shelf the piece stands on, a plate with its number, and "360°". */
.wk.wk .vt-shelf { position: absolute; left: 14%; right: 14%; bottom: 13%; z-index: 2; height: 1px; pointer-events: none; background: linear-gradient(90deg, rgba(198, 203, 210, 0), var(--wg, #c6cbd2) 18%, var(--yg, #c9a45f) 50%, var(--rg, #d29a83) 82%, rgba(210, 154, 131, 0)); }
.wk.wk :is(.vt-no, .vt-turn) { position: absolute; bottom: 4.6%; z-index: 2; display: inline-flex; align-items: center; gap: 6px; font: 700 10.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--sub); pointer-events: none; }
.wk.wk .vt-no { left: 6%; color: var(--gold-ink); }
.wk.wk .vt-no i { font: italic 400 15px/1 var(--serif); letter-spacing: 0; text-transform: none; }
.wk.wk .vt-turn { right: 6%; }
.wk.wk .vt-turn svg { width: 14px; height: 14px; }
/* Square corners: fine gold marks in the corners, like the view through a loupe. */
.wk.wk .vt-mk { display: none; position: absolute; z-index: 2; width: 22px; height: 22px; border: 0 solid var(--gold-deep); pointer-events: none; }
body.wk-day.wk-square .wk.wk .vt-mk { display: block; }
.wk.wk .vt-mk.tl { top: 16px; left: 16px; border-width: 1.5px 0 0 1.5px; }
.wk.wk .vt-mk.tr { top: 16px; right: 16px; border-width: 1.5px 1.5px 0 0; }
.wk.wk .vt-mk.bl { bottom: 16px; left: 16px; border-width: 0 0 1.5px 1.5px; }
.wk.wk .vt-mk.br { right: 16px; bottom: 16px; border-width: 0 1.5px 1.5px 0; }
body.wk-day.wk-square .wk.wk .lay-vitrine .vt-no { left: 52px; }
body.wk-day.wk-square .wk.wk .lay-vitrine .vt-turn { right: 52px; }
body.wk-square .wk.wk .hero.lay-vitrine .hero-media.slot { border: 0; border-radius: 2px; box-shadow: 0 0 0 1px var(--line), 0 40px 80px -50px rgba(15, 18, 23, .22); }
/* Cut corners: the case is the table of an emerald cut, with a fine metal edge; three step rows ripple out
   around it, joined at the corners (drawn by the script to the case's size). */
.wk.wk .steprows { --sr: 50px; display: none; position: absolute; inset: calc(-1 * var(--sr)); z-index: 0; pointer-events: none; }
body.wk-day.wk-cut .wk.wk .steprows { display: block; }
.wk.wk .steprows svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--gold-deep); stroke-width: 1; }
body.wk-cut .wk.wk .lay-vitrine .hero-grid { --vt-rg: clamp(40px, 4.2vw, 62px); --vt-cg: clamp(56px, 5.4vw, 80px); }
body.wk-cut .wk.wk .hero.lay-vitrine .hero-media.slot { --c: 44px; background: linear-gradient(135deg, var(--wg), var(--yg) 50%, var(--rg)); }
body.wk-cut .wk.wk .hero.lay-vitrine .hero-media.slot::before { --c: 43.1px; content: ""; position: absolute; inset: 1.5px; z-index: 0; background-color: #fff;
	clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c)); }
body.wk-cut .wk.wk .lay-vitrine .hero-media :is(.sc-stage, .glow, .sweep) { z-index: 1; }
body.wk-cut .wk.wk .lay-vitrine .vt-case { filter: drop-shadow(0 30px 36px rgba(15, 18, 23, .09)); }
/* Right: the piece's name and price, the other pieces, the trust points. */
.wk.wk .lay-vitrine .vt-r { grid-area: r; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; text-align: left; }
.wk.wk .lay-vitrine .sc-lab { display: flex; align-items: baseline; gap: 12px; margin: 0 0 14px; font: 700 11px/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-ink); }
.wk.wk .lay-vitrine .vt-of { font-weight: 600; letter-spacing: .14em; color: var(--sub); }
.wk.wk .lay-vitrine .sc-cap { display: grid; justify-items: start; gap: 16px; margin: 0; font-size: 15px; color: var(--sub); }
.wk.wk .lay-vitrine .sc-cap b { display: block; font: 400 clamp(24px, 2.05vw, 31px)/1.12 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.wk.wk .lay-vitrine .sc-meta { display: block; margin-top: 8px; }
.wk.wk .lay-vitrine .sc-sep { display: none; }
.wk.wk .lay-vitrine .sc-cap a { display: inline-flex; align-items: center; gap: 8px; padding-bottom: 3px; font: 700 15px/1.3 var(--sans); color: var(--ink); text-decoration: none; box-shadow: inset 0 -1.5px 0 var(--gold-deep); }
.wk.wk .lay-vitrine .sc-cap a svg { width: 16px; height: 16px; }
.wk.wk .lay-vitrine .sc-thumbs { display: flex; gap: 10px; margin-top: 28px; }
.wk.wk .lay-vitrine .sc-thumbs button { width: 60px; height: 60px; padding: 4px; border: 0; border-radius: 2px; background-color: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.wk.wk .lay-vitrine .sc-thumbs button:hover { box-shadow: inset 0 0 0 1px var(--ink); transform: translateY(-2px); }
.wk.wk .lay-vitrine .sc-thumbs button[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--ink); }
.wk.wk .lay-vitrine .sc-thumbs img { width: 100%; height: 100%; object-fit: contain; border-radius: 0; }
body.wk-cut .wk.wk .lay-vitrine .sc-thumbs button { --c: 9px; border-radius: 0; box-shadow: none;
	clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c)); }
body.wk-cut .wk.wk .lay-vitrine .sc-thumbs button[aria-pressed="true"] { box-shadow: inset 0 -2.5px 0 var(--ink); }
.wk.wk .lay-vitrine .trust { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; width: 100%; margin: 30px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line); }
.wk.wk .lay-vitrine .trust li { font-size: 14.5px; }
@media (max-width: 1100px) and (min-width: 861px) {
	.wk.wk .hero.lay-vitrine .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); grid-template-areas: "top top" "l case" "r case"; }
}
/* Phones: the headline, the case (the other pieces on its edge), then the words and buttons. */
@media (max-width: 860px) {
	.wk.wk .hero.lay-vitrine .hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "case" "r" "l"; row-gap: 0; padding: 18px var(--gut) 40px; }
	.wk.wk .lay-vitrine .kicker { margin-bottom: 10px; }
	.wk.wk .lay-vitrine .h1 { font-size: clamp(34px, 10.4vw, 44px); line-height: 1.04; }
	.wk.wk .lay-vitrine .vt-case { margin-top: 20px; }
	body.wk-day.wk-cut .wk.wk .lay-vitrine .vt-case { margin-top: 36px; }
	.wk.wk .lay-vitrine .hero-media.slot { height: clamp(250px, 70vw, 330px); }
	.wk.wk .lay-vitrine .hero-media .sc-stage { inset: 6% 6% 16%; }
	.wk.wk .lay-vitrine .vt-r { position: relative; z-index: 2; flex-direction: row; justify-content: center; margin-top: -30px; }
	.wk.wk .lay-vitrine .vt-r :is(.sc-lab, .sc-cap, .trust) { display: none; }
	.wk.wk .lay-vitrine .sc-thumbs { margin: 0; gap: 8px; }
	.wk.wk .lay-vitrine .sc-thumbs button { width: 50px; height: 50px; box-shadow: inset 0 0 0 1px var(--line), 0 6px 14px -8px rgba(15, 18, 23, .3); }
	.wk.wk .lay-vitrine :is(.vt-no, .vt-turn) { top: 14px; bottom: auto; }
	body.wk-day.wk-square .wk.wk .lay-vitrine .vt-no { left: 40px; }
	body.wk-day.wk-square .wk.wk .lay-vitrine .vt-turn { right: 40px; }
	.wk.wk .lay-vitrine .vt-shelf { bottom: 19%; }
	.wk.wk .lay-vitrine .vt-l { align-items: stretch; margin-top: 22px; text-align: center; }
	.wk.wk .lay-vitrine .vt-l .lead { max-width: none; font-size: 16.5px; text-align: center; }
	body .wk.wk .lay-vitrine .hero-cta { align-items: stretch; gap: 10px; margin-top: 20px; }
	.wk.wk .lay-vitrine .hero-note { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin-top: 14px; font-size: 13.5px; }
	.wk.wk .lay-vitrine .steprows { --sr: 18px; }
	body.wk-cut .wk.wk .hero.lay-vitrine .hero-media.slot { --c: 26px; }
	body.wk-cut .wk.wk .hero.lay-vitrine .hero-media.slot::before { --c: 25.1px; }
	.wk.wk .vt-mk { width: 16px; height: 16px; }
	.wk.wk .vt-mk.tl, .wk.wk .vt-mk.tr { top: 12px; }
	.wk.wk .vt-mk.tl, .wk.wk .vt-mk.bl { left: 12px; }
	.wk.wk .vt-mk.tr, .wk.wk .vt-mk.br { right: 12px; }
	.wk.wk .vt-mk.bl, .wk.wk .vt-mk.br { bottom: 12px; }
}

/* ---------- Booking bar: a white card resting on the hero's edge; phones: one tap per topic ---------- */
@media (min-width: 861px) {
	body .wk.wk .bkbar-sec.dock-up, body.wk-day .wk.wk .bkbar-sec.dock-up { position: relative; z-index: 3; margin-top: calc(-1 * clamp(56px, 5.4vw, 72px)); padding-top: 0; padding-bottom: clamp(18px, 2vw, 28px); background: transparent; }
	.wk.wk .dock-up .bkbar, body.wk-day .wk.wk .dock-up .bkbar { background-color: #fff; box-shadow: 0 0 0 1px var(--line), 0 30px 60px -34px rgba(15, 18, 23, .32); }
	body.wk-cut .wk.wk .dock-up .bkbar { box-shadow: none; filter: drop-shadow(0 18px 26px rgba(15, 18, 23, .1)); }
}
.wk.wk .bkbar-chips { display: none; }
@media (max-width: 860px) {
	.wk.wk .bkbar.has-chips :is(.bkbar-f, .bkbar-n, .btn) { display: none; }
	.wk.wk .bkbar.has-chips .bkbar-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
	.wk.wk .bkbar-chip { display: inline-flex; align-items: center; min-height: 42px; padding: 0 15px; border-radius: 999px; background-color: var(--ivory); font: 600 14px/1.2 var(--sans); color: var(--ink); text-decoration: none; }
	.wk.wk .bkbar-chip:hover { background-color: var(--ink); color: #fff; }
	body.wk-day .wk.wk .bkbar-chip { border-radius: 2px; background-color: var(--paper); }
	body.wk-day .wk.wk .bkbar-chip:hover { background-color: var(--ink); color: #fff; }
}

/* ---------- "Since 1971": the one dark chapter on a light page ---------- */
body.wk-day .wk.wk .reel.reel-chapter { position: relative; overflow: hidden; background: #0d1015; color: #c3c8d0; }
body.wk-day .wk.wk .reel-chapter::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(52% 70% at 74% 42%, rgba(214, 185, 127, .13), rgba(214, 185, 127, 0) 62%); }
body.wk-day.wk-square .wk.wk .reel-chapter::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: 64px 64px; background-position: center;
	-webkit-mask: radial-gradient(70% 80% at 70% 45%, #000, transparent 75%); mask: radial-gradient(70% 80% at 70% 45%, #000, transparent 75%); }
body.wk-day.wk-cut .wk.wk .reel-chapter::after { content: ""; position: absolute; top: 50%; left: 72%; width: 1500px; height: 1100px; opacity: .5; pointer-events: none; transform: translate(-50%, -50%);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1500 1100' fill='none' stroke='%23d6b97f' stroke-opacity='.16'%3E%3Cpolygon points='170,0 1330,0 1500,170 1500,930 1330,1100 170,1100 0,930 0,170'/%3E%3Cpolygon points='290,110 1210,110 1390,290 1390,810 1210,990 290,990 110,810 110,290'/%3E%3Cpolygon points='400,210 1100,210 1290,400 1290,700 1100,890 400,890 210,700 210,400'/%3E%3Cpath d='M170,0 L400,210 M1330,0 L1100,210 M1500,170 L1290,400 M1500,930 L1290,700 M1330,1100 L1100,890 M170,1100 L400,890 M0,930 L210,700 M0,170 L210,400'/%3E%3C/svg%3E") center / contain no-repeat; }
body.wk-day .wk.wk .reel-chapter .reel-grid { position: relative; z-index: 1; }
body.wk-day .wk.wk .reel-chapter .reel-head .eyebrow { color: var(--gold); }
body.wk-day .wk.wk .reel-chapter .reel-head .h2 { font-size: clamp(38px, 4.1vw, 62px); line-height: 1.02; letter-spacing: -.02em; color: #fff; }
body.wk-day .wk.wk .reel-chapter .reel-head .lead { max-width: 44ch; margin-top: 24px; font-size: clamp(16.5px, 1.2vw, 18px); line-height: 1.65; color: #b4bac4; }
body.wk-day .wk.wk .reel-chapter .btn-gold { border-color: var(--gold); background-color: var(--gold); color: #1d1608; }
body.wk-day .wk.wk .reel-chapter .btn-gold:hover { border-color: #e4cc98; background-color: #e4cc98; color: #1d1608; }
.wk.wk .reel-more { min-height: 0; padding-bottom: 3px; color: #fff; text-decoration: none; box-shadow: inset 0 -1.5px 0 var(--gold); }
.wk.wk .reel-more:hover { color: var(--gold); }
.wk.wk .reel-col { position: relative; min-width: 0; }
.wk.wk .l-split.side-left .reel-col { order: -1; }
.wk.wk .reel-col .reel-cues { margin-top: 26px; }
/* The promise, signed. */
.wk.wk .reel-promise { margin: 32px 0 0; padding: 26px 0 0; border-top: 1px solid var(--line-night); }
.wk.wk .reel-promise blockquote { margin: 0; font: italic 300 clamp(23px, 2.2vw, 31px)/1.22 var(--serif); letter-spacing: -.01em; color: #fff; quotes: "\201C" "\201D"; }
.wk.wk .reel-promise blockquote::before { content: open-quote; color: var(--gold); }
.wk.wk .reel-promise blockquote::after { content: close-quote; color: var(--gold); }
.wk.wk .reel-promise figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 18px; }
.wk.wk .rp-face { flex: none; width: 50px; height: 50px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--night), 0 0 0 3px var(--gold-deep); }
.wk.wk .reel-promise .sig-svg { flex: none; width: 120px; height: auto; color: var(--gold); }
.wk.wk .reel-promise figcaption span { display: grid; font: 400 13.5px/1.4 var(--sans); color: var(--sub-night); }
.wk.wk .reel-promise figcaption b { font-weight: 700; color: #fff; }
body.wk-day .wk.wk .reel:not(.reel-chapter) .reel-promise { border-top-color: var(--line); }
body.wk-day .wk.wk .reel:not(.reel-chapter) .reel-promise :is(blockquote, figcaption b) { color: var(--ink); }
body.wk-day .wk.wk .reel:not(.reel-chapter) .reel-promise blockquote::before, body.wk-day .wk.wk .reel:not(.reel-chapter) .reel-promise blockquote::after, body.wk-day .wk.wk .reel:not(.reel-chapter) .reel-promise .sig-svg { color: var(--gold-ink); }
body.wk-day .wk.wk .reel:not(.reel-chapter) .reel-promise figcaption span { color: var(--sub); }
body.wk-day .wk.wk .reel:not(.reel-chapter) .rp-face { box-shadow: 0 0 0 2px var(--paper-2), 0 0 0 3px var(--yg); }
/* Phones: the title, the film and its years, then the promise and the buttons. */
@media (max-width: 900px) {
	body.wk-day .wk.wk .reel-chapter .reel-grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
	body.wk-day .wk.wk .reel-chapter .reel-copy { display: contents; }
	body.wk-day .wk.wk .reel-chapter .reel-head { order: 1; }
	body.wk-day .wk.wk .reel-chapter .reel-col { order: 2; margin-top: 28px; }
	body.wk-day .wk.wk .reel-chapter .reel-promise { order: 3; }
	body.wk-day .wk.wk .reel-chapter .reel-cta { order: 4; }
	body.wk-day .wk.wk .reel-chapter .reel-head .h2 { font-size: clamp(34px, 9.4vw, 42px); }
}

/* ---------- Steps on phones: a small photo beside the words ---------- */
@media (max-width: 599px) {
	.wk.wk .steps.tl.img-side-m li { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "img h" "img p"; column-gap: 16px; align-content: start; }
	.wk.wk .steps.tl.img-side-m .tl-img { grid-area: img; width: 96px; height: 96px; margin: 0; aspect-ratio: auto; border-radius: 12px; }
	.wk.wk .steps.tl.img-side-m .tl-img::after { display: none; }
	.wk.wk .steps.tl.img-side-m .tl-img .tl-n, body.wk-day .wk.wk .steps.tl.img-side-m .tl-img .tl-n { left: 6px; bottom: 6px; padding: 5px 6px 4px; border-radius: 2px; background-color: rgba(15, 18, 23, .72); font: 700 10px/1 var(--sans); letter-spacing: .14em; color: #fff; -webkit-text-stroke: 0; text-shadow: none; }
	.wk.wk .steps.tl.img-side-m .h3 { grid-area: h; align-self: end; margin: 0; }
	.wk.wk .steps.tl.img-side-m p { grid-area: p; margin-top: 6px; }
	.wk.wk .steps.tl.img-side-m .tl-dot { top: 6px; }
	/* Without photos the hollow numbers stand on their own (no dark tag behind them in the Daylight look). */
	body.wk-day .wk.wk .steps.tl.no-img-m .tl-img .tl-n { left: auto; bottom: auto; padding: 0; border-radius: 0; background: none; font-family: var(--serif); letter-spacing: 0; }
}

/* ---------- "Sell gold & diamonds" (the wide card): a slim strip instead of a half-empty card ---------- */
@media (min-width: 861px) {
	body.wk-day .wk.wk .sc .wide .path { grid-template-columns: minmax(0, 1fr) clamp(220px, 24vw, 340px); min-height: 0; }
	body.wk-day .wk.wk .sc .wide .path-body { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 40px; row-gap: 6px; align-items: center; padding: 30px 36px 30px 92px; }
	body.wk-day .wk.wk .sc .wide :is(.path-t, .path-x) { grid-column: 1; }
	body.wk-day .wk.wk .sc .wide .path-go { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
	body.wk-day .wk.wk .sc .wide .path-n { top: 50%; left: 36px; transform: translateY(-50%); }
	body.wk-day .wk.wk .sc .wide .sc-media { padding: 10px 28px; }
	body.wk-day .wk.wk .sc .wide .sc-media > img { max-height: 132px; }
}

/* ---------- Visit: the photo and map grow, so both boxes end together ---------- */
@media (min-width: 861px) {
	body.wk-day .wk.wk .visit > .box:first-child { display: flex; flex-direction: column; }
	body.wk-day .wk.wk .visit .visit-media { flex: 1 1 auto; min-height: clamp(280px, 26vw, 380px); }
	body.wk-day .wk.wk .visit .visit-media .slot { height: 100%; aspect-ratio: auto; }
	body.wk-day .wk.wk .visit .visit-media .slot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
	/* The map as a band under the photo: side by side, the growing box turned both into thin strips. */
	body.wk-day .wk.wk .visit .visit-media:not(.one) { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(clamp(240px, 22vw, 320px), 1fr) clamp(150px, 13vw, 190px); min-height: 0; }
	body.wk-day .wk.wk .visit .visit-media:not(.one):has(> div.map) { grid-template-rows: minmax(clamp(200px, 18vw, 260px), 1fr) clamp(240px, 20vw, 290px); }
	body.wk-day .wk.wk .visit .visit-media:not(.one) .map { overflow: hidden; border-left: 0; border-top: 1px solid var(--line); }
	body.wk-day .wk.wk .visit .visit-media:not(.one) .map iframe { min-height: 0; }
}

/* ---------- Page banners: the picture in the same case as the homepage's piece ---------- */
body.wk-day .wk.wk .pgh-case { position: relative; min-width: 0; }
body.wk-day .wk.wk .pgh-case .pgh-media { position: relative; z-index: 1; }
body.wk-day .wk.wk .pgh-media.fit-cover .vt-mk { border-color: #fff; }
body.wk-day.wk-square .wk.wk .pgh-case .pgh-media { border: 0; border-radius: 2px; box-shadow: 0 0 0 1px var(--line), 0 40px 80px -50px rgba(15, 18, 23, .3); }
body.wk-day.wk-cut .wk.wk .pgh-case { margin: 34px; filter: drop-shadow(0 30px 36px rgba(15, 18, 23, .1)); }
body.wk-day.wk-cut .wk.wk .pgh-case .steprows { --sr: 34px; }
/* The whole banner fits the first screen of a laptop: less space around it, and the case never taller than the window allows. */
@media (min-width: 861px) {
	body.wk-day .wk.wk .pgh { padding-block: clamp(40px, 4vw, 60px); }
	body.wk-day .wk.wk .pgh-case .pgh-media { max-height: max(300px, calc(100svh - 300px)); }
}
/* As a banner opens, its step-cut lines open out from the piece and the piece settles into the case (transform and
   clip only: no layout shift, and the picture shows at once). */
@keyframes wk-sr-open { from { clip-path: inset(calc(var(--sr) - 1px)); } to { clip-path: inset(0); } }
@keyframes wk-piece-in { from { transform: translateY(14px) scale(.975); } }
body.wk-day.wk-cut .wk.wk .pgh-case .steprows { animation: wk-sr-open 1.3s cubic-bezier(.2, .7, .2, 1) .15s backwards; }
body.wk-day .wk.wk .pgh-case .pgh-media > img { animation: wk-piece-in 1.1s cubic-bezier(.2, .7, .2, 1) backwards; }
@media (prefers-reduced-motion: reduce) { body.wk-day .wk.wk .pgh-case :is(.steprows, .pgh-media > img) { animation: none; } }
.wk.wk .pgh-media .pgh-v { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: contain; background-color: #fff; opacity: 0; transition: opacity .6s ease; }
.wk.wk .pgh-media .pgh-v.is-playing { opacity: 1; }
@media (max-width: 860px) {
	body.wk-day.wk-cut .wk.wk .pgh-case { margin: 22px; }
	body.wk-day.wk-cut .wk.wk .pgh-case .steprows { --sr: 22px; }
}
@media (prefers-reduced-motion: reduce) { .wk.wk .pgh-media .pgh-v { display: none; } }

/* ---------- Reviews from another plugin (its shortcode): its widget under the section's title ---------- */
/* .wk-foreign: the kit's base styles stay out (see kit-reset.css and scope-css.py); the plugin's own look applies. */
.wk.wk .rev-plugin { min-width: 0; }

/* ================= Reviews and promises by the Book buttons (Wulf Kit › Settings) =================
   The Google rating, one short review and the promises, where visitors decide: under a banner's or a call
   to action's buttons, under the visit form's button, in the booking window and on product pages. Quiet:
   small type under a fine line, one row each. */
.wk.wk .assure { display: grid; justify-items: start; gap: 12px; max-width: 620px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.wk.wk .assure[hidden] { display: none; }
.wk.wk .as-rate { display: flex; align-items: center; gap: 10px; margin: 0; font: 500 14px/1.4 var(--sans); color: var(--sub); }
.wk.wk .as-rate a { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.wk.wk .as-rate a:hover > span:last-child { text-decoration: underline; text-decoration-color: var(--gold-hd); text-underline-offset: 3px; }
.wk.wk .as-rate b { font-weight: 700; color: var(--ink); }
.wk.wk .as-stars { position: relative; flex: none; display: block; width: 80px; height: 15px; }
.wk.wk .as-stars > span { position: absolute; top: 0; bottom: 0; left: 0; display: block; overflow: hidden; }
.wk.wk .as-stars > span:first-child { right: 0; color: var(--line); }
.wk.wk .as-stars > span:last-child { width: var(--r, 100%); color: var(--gold-hd); }
.wk.wk .as-stars svg { display: block; width: 80px; max-width: none; height: 15px; fill: currentColor; }
.wk.wk .as-quote { margin: 0; padding: 0; }
.wk.wk .as-quote blockquote { margin: 0; padding: 0; border: 0; background: none; quotes: "\201C" "\201D"; }
.wk.wk .as-quote p { margin: 0; font: italic 400 16.5px/1.5 var(--serif); color: var(--text); }
.wk.wk .as-quote p::before { content: open-quote; }
.wk.wk .as-quote p::after { content: close-quote; }
.wk.wk .as-quote figcaption { margin-top: 6px; font: 700 12.5px/1.3 var(--sans); letter-spacing: .02em; color: var(--sub); }
.wk.wk .as-prom { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 0; padding: 0; list-style: none; }
.wk.wk .as-prom li { display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 0; font: 600 13.5px/1.3 var(--sans); color: var(--text); }
.wk.wk .as-prom svg { flex: none; width: 17px; height: 17px; color: var(--gold-hd); }
.wk.wk .as-more a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold-hd); text-underline-offset: 4px; }
.wk.wk .as-more a:hover { text-decoration-thickness: 2px; }
.wk.wk .as-prom .as-more svg { width: 15px; height: 15px; color: currentColor; }
/* Page banners: one slim strip along the banner's foot (the banner itself keeps fitting the first screen) */
.wk.wk .pgh-strip { border-top: 1px solid var(--line); }
.wk.wk .pgh-strip:not(.ivory):not(.dark):not(.is-light) { border-bottom: 1px solid var(--line); }
body.wk-day :where(.wk.wk .pgh-strip.is-light) { background-color: var(--paper); } /* where the banner's paper gradient ends */
.wk.wk .pgh-strip .wrap { padding-block: 14px; }
.wk.wk .assure.as-strip { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 28px; max-width: none; margin: 0; padding: 0; border: 0; }
.wk.wk .as-strip .as-prom { display: contents; }
/* Phones: the banner strip's promises two by two, with the rating and "Our promises" across; in the
   narrower visit form and booking window they stay one per line, centred. */
@media (max-width: 600px) {
	.wk.wk .assure.as-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; justify-items: start; }
	.wk.wk .as-strip :is(.as-rate, .as-more) { grid-column: 1 / -1; justify-self: center; }
	.wk.wk .as-strip .as-prom li { align-items: flex-start; }
	.wk.wk .as-strip .as-prom li svg { margin-top: 1px; }
	.wk.wk .as-prom li { font-size: 13px; }
	.wk.wk :is(.as-form, .bk-proof) .as-prom { gap: 7px 16px; }
}
/* Centred sections, and the visit form (its button spans the form) */
.wk.wk .cta-center .assure, .wk.wk .assure.as-form { justify-items: center; margin-inline: auto; text-align: center; }
.wk.wk .cta-center .as-prom, .wk.wk .as-form .as-prom { justify-content: center; }
.wk.wk .assure.as-form { max-width: none; margin-top: 0; padding-top: 16px; }
.wk.wk .as-form .as-prom { gap: 6px 16px; }
.wk.wk .as-form .as-prom li { font-size: 13px; }
/* Booking window: under the steps on phones and in the side panel; on the showroom picture of a wide popup */
.wk.wk .bk-proof { justify-items: center; max-width: none; margin: 0; padding-top: 14px; text-align: center; }
.wk.wk .bk-proof .as-prom { justify-content: center; gap: 6px 16px; }
.wk.wk .bk-proof .as-quote p { font-size: 15.5px; }
@media (min-width: 900px) { .wk.wk .bk.pop .bk-proof { display: none; } }
.wk.wk .bk .as-more { display: none; } /* no leaving the booking halfway */
.wk.wk .assure.as-dark { gap: 10px; max-width: none; margin-top: 12px; padding-top: 14px; border-top-color: rgba(255, 255, 255, .2); }
.wk.wk .as-dark .as-rate { color: rgba(255, 255, 255, .86); }
.wk.wk .as-dark .as-rate b { color: #fff; }
.wk.wk .as-dark .as-stars > span:first-child { color: rgba(255, 255, 255, .3); }
.wk.wk .as-dark .as-stars > span:last-child { color: var(--gold); }
.wk.wk .as-dark .as-quote p { font-size: 16px; color: #fff; }
.wk.wk .as-dark .as-quote figcaption { color: rgba(255, 255, 255, .75); }
/* Product pages (OM Catalog): under the buttons */
.wk.wk-assure { margin-top: 18px; background: none; }
.wk.wk-assure .assure { margin-top: 0; }

/* ================= Welcome back: the saved designs, for visitors who return ================= */
.wk.wk .wb { position: fixed; left: 20px; bottom: 20px; z-index: 67; display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 40px); padding: 8px 8px 8px 10px; border: 1px solid var(--line); border-radius: 16px; background-color: #fff; color: var(--text); box-shadow: 0 24px 50px -22px rgba(15, 18, 23, .45); opacity: 0; transform: translateY(calc(100% + 40px)); transition: transform .45s cubic-bezier(.2, .7, .2, 1), opacity .3s ease, bottom .3s ease; }
.wk.wk .wb.on { opacity: 1; transform: none; }
.wk.wk .wb-view { display: flex; align-items: center; gap: 12px; min-width: 0; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.wk.wk .wb-thumbs { display: flex; flex: none; }
.wk.wk .wb-thumbs > span { display: grid; place-items: center; width: 44px; height: 44px; margin-left: -12px; overflow: hidden; border: 2px solid #fff; border-radius: 10px; background-color: var(--ivory); box-shadow: 0 0 0 1px var(--line); color: var(--gold-hd); }
.wk.wk .wb-thumbs > span:first-child { margin-left: 0; }
.wk.wk .wb-thumbs img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transform: scale(1.35); }
.wk.wk .wb-thumbs svg { width: 20px; height: 20px; }
.wk.wk .wb-txt { display: grid; gap: 2px; min-width: 0; font: 500 14px/1.3 var(--sans); }
.wk.wk .wb-txt b { font: 400 17px/1.15 var(--serif); color: var(--ink); }
.wk.wk .wb-sub { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--sub); }
.wk.wk .wb-v { font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold-hd); text-underline-offset: 3px; }
.wk.wk .wb-view:hover .wb-v { text-decoration-thickness: 2px; }
.wk.wk .wb .wb-book { flex: none; min-height: 42px; padding: 0 16px; font-size: 14px; white-space: nowrap; }
.wk.wk .wb-x { display: grid; place-items: center; flex: none; width: 36px; height: 36px; margin: 0 0 0 -6px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--sub); cursor: pointer; }
.wk.wk .wb-x:hover { background-color: var(--ivory); color: var(--ink); }
.wk.wk .wb-x svg { width: 16px; height: 16px; }
body.wk-pill-on .wk.wk .wb { bottom: 92px; }
body.wk-modal-open .wk.wk .wb { display: none; }
body.wk-square .wk.wk .wb, body.wk-cut .wk.wk .wb, body.wk-square .wk.wk .wb-thumbs > span, body.wk-cut .wk.wk .wb-thumbs > span { border-radius: 2px; }
/* Phones: "Your 3 saved designs" beside the pictures (the whole of it opens the list), then the button */
@media (max-width: 860px) {
	.wk.wk .wb { left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); max-width: none; gap: 8px; padding: 8px; }
	body.wk-bar-on .wk.wk .wb { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
	.wk.wk .wb-view { flex: 1; gap: 10px; }
	.wk.wk .wb-thumbs > span { width: 40px; height: 40px; margin-left: -16px; }
	.wk.wk .wb-thumbs > span:nth-child(n+3) { display: none; }
	.wk.wk .wb-txt b, .wk.wk .wb-dot { display: none; }
	.wk.wk .wb-sub { overflow: visible; white-space: normal; font: 700 14px/1.25 var(--sans); color: var(--ink); }
	.wk.wk .wb-v { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.wk.wk .wb .wb-book { min-height: 42px; padding: 0 14px; font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) { .wk.wk .wb { transition: none; } }

/* ================= Phone bar with a Text button: Call · Text · Book ================= */
@media (max-width: 860px) {
	.wk.wk .actbar.has-text { display: flex; }
	.wk.wk .actbar.has-text a.ab-ic { flex: none; }
	.wk.wk .actbar.has-text a.main { flex: 1 1 auto; min-width: 0; }
}

/* ---------- After a banner's strip, OM Catalog's sections (video highlights, the catalog) start a little lower ---------- */
:where(.e-con, .elementor-section, .elementor-element):has(.wk-pagehero .pgh-strip) + .e-con.wk-om-box,
:where(.e-con, .elementor-section, .elementor-element):has(.wk-pagehero .pgh-strip) + .elementor-element.wk-om-box { padding-top: clamp(28px, 3.4vw, 44px); }
:where(.e-con, .elementor-section, .elementor-element):has(.wk-pagehero .pgh-strip) + :where(.e-con, .elementor-section, .elementor-element):not(.wk-om-box) .om-reels { margin-top: clamp(28px, 3.4vw, 44px); }

/* ================= Spotlight on page banners (Wulf Kit › Settings › Spotlight; Banner › Picture › Spotlight) =================
   Like a showroom downlight: a small bright lamp just under the header with a soft bloom; a beam that is brightest
   by the lamp, fades with distance and softens as it spreads; the light it throws on the wall behind the words and
   on the floor; a few motes of dust drifting in it. A fine grain keeps the dark gradients smooth. The dark showroom
   is a warm near-black; the warm light is the same light on warm paper. Paint only, behind the words: nothing
   moves but the dust, and the light comes on once as the page opens. */
.wk.wk .pgh.spot { position: relative; isolation: isolate; }
.wk.wk .pgh-spot { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; --sx: var(--spot-x, 50%); }
.wk.wk .pgh-spot > * { position: absolute; }
.wk.wk :is(.ps-beam, .ps-wall, .ps-src, .ps-dust) { left: var(--sx); translate: -50% 0; }
/* The beam starts inside the lamp, above the banner, so it is already a little wide where it comes in */
.wk.wk .ps-beam { top: -110px; width: 2600px; height: calc(100% + 110px); filter: blur(2px); -webkit-mask: radial-gradient(farthest-side at 50% 0, #000 0%, rgb(0 0 0 / .82) 26%, rgb(0 0 0 / .46) 52%, rgb(0 0 0 / .14) 80%, transparent 100%) 50% 0 / 100% 240% no-repeat; mask: radial-gradient(farthest-side at 50% 0, #000 0%, rgb(0 0 0 / .82) 26%, rgb(0 0 0 / .46) 52%, rgb(0 0 0 / .14) 80%, transparent 100%) 50% 0 / 100% 240% no-repeat; }
.wk.wk .ps-beam::before, .wk.wk .ps-beam::after { content: ""; position: absolute; inset: 0; }
.wk.wk .ps-wall { top: 0; width: min(1200px, 160%); height: 100%; }
.wk.wk .ps-src { top: -1px; width: 560px; height: 180px; }
.wk.wk .ps-dust { top: 0; width: 1000px; height: 100%; -webkit-mask-image: conic-gradient(at 50% -110px, transparent 156deg, #000 166deg, #000 194deg, transparent 204deg); mask-image: conic-gradient(at 50% -110px, transparent 156deg, #000 166deg, #000 194deg, transparent 204deg); }
.wk.wk .ps-grain { inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: .06; mix-blend-mode: overlay; }
/* The dark showroom (and a dark banner with the light): warm near-black, the light warm white fading to amber */
.wk.wk .pgh.spot-room { background-color: #0b0a09; background-image: radial-gradient(120% 95% at var(--spot-x, 50%) -8%, #1d1a16 0%, #13110f 40%, #0c0b0a 78%); }
.wk.wk :is(.spot-room, .spot-night) .ps-beam::before { background: conic-gradient(at 50% 0, transparent 146deg, rgb(226 190 128 / .02) 150deg, rgb(226 190 128 / .05) 156deg, rgb(226 190 128 / .09) 162deg, rgb(230 196 136 / .13) 168deg, rgb(234 202 146 / .155) 174deg, rgb(236 206 152 / .165) 180deg, rgb(234 202 146 / .155) 186deg, rgb(230 196 136 / .13) 192deg, rgb(226 190 128 / .09) 198deg, rgb(226 190 128 / .05) 204deg, rgb(226 190 128 / .02) 210deg, transparent 214deg); }
.wk.wk :is(.spot-room, .spot-night) .ps-beam::after { background: conic-gradient(at 50% 0, transparent 164deg, rgb(255 238 204 / .04) 167deg, rgb(255 238 204 / .1) 170deg, rgb(255 240 210 / .16) 173deg, rgb(255 242 214 / .2) 176.5deg, rgb(255 244 220 / .22) 180deg, rgb(255 242 214 / .2) 183.5deg, rgb(255 240 210 / .16) 187deg, rgb(255 238 204 / .1) 190deg, rgb(255 238 204 / .04) 193deg, transparent 196deg); }
.wk.wk :is(.spot-room, .spot-night) .ps-wall { background: radial-gradient(46% 60% at 50% 22%, rgb(236 204 150 / .12), rgb(224 186 124 / .045) 55%, transparent 80%), radial-gradient(54% 24% at 50% 103%, rgb(232 196 136 / .16), transparent 74%); }
.wk.wk :is(.spot-room, .spot-night) .ps-src { background: radial-gradient(64px 12px at 50% 0, rgb(255 250 238), rgb(255 234 190 / .6) 55%, transparent), radial-gradient(220px 64px at 50% 0, rgb(244 214 160 / .3), transparent), radial-gradient(280px 170px at 50% 0, rgb(226 190 128 / .1), transparent); }
.wk.wk .pgh-strip.spot-room { background-color: #0c0b0a; border-top-color: rgb(214 185 127 / .14); }
/* The piece's case in the dark showroom is lit by the lamp: warm white, brightest at the top; the white of the photo
   (or turning video) takes on that light. A picture background set in Elementor still wins. */
.wk.wk :where(.spot-room) .pgh-media:where(:not(.fit-cover)) { background-color: #f8f2e7; background-image: radial-gradient(70% 45% at 50% 0%, #fffefb, transparent 70%), linear-gradient(180deg, #fffcf6 0%, #f3ebdd 100%); }
.wk.wk .spot-room .pgh-media:not(.fit-cover) > :is(img, .pgh-v) { mix-blend-mode: multiply; }
.wk.wk .spot-room .pgh-media:not(.fit-cover) .pgh-v { background-color: transparent; }
/* Warm light on paper: the same light, brighter than the warm paper around it */
.wk.wk .pgh.spot-light { background-color: #ebe3d6; background-image: radial-gradient(120% 95% at var(--spot-x, 50%) -8%, #f8f4ec 0%, #f0e9de 42%, #e9e0d2 80%); }
.wk.wk .spot-light .ps-beam::before { background: conic-gradient(at 50% 0, transparent 146deg, rgb(255 252 246 / .05) 150deg, rgb(255 252 246 / .14) 156deg, rgb(255 252 247 / .26) 162deg, rgb(255 253 248 / .38) 168deg, rgb(255 253 249 / .46) 174deg, rgb(255 254 250 / .5) 180deg, rgb(255 253 249 / .46) 186deg, rgb(255 253 248 / .38) 192deg, rgb(255 252 247 / .26) 198deg, rgb(255 252 246 / .14) 204deg, rgb(255 252 246 / .05) 210deg, transparent 214deg); }
.wk.wk .spot-light .ps-beam::after { background: conic-gradient(at 50% 0, transparent 164deg, rgb(255 255 254 / .14) 168deg, rgb(255 255 254 / .4) 173deg, rgb(255 255 255 / .6) 180deg, rgb(255 255 254 / .4) 187deg, rgb(255 255 254 / .14) 192deg, transparent 196deg); }
.wk.wk .spot-light .ps-wall { background: radial-gradient(46% 60% at 50% 24%, rgb(255 253 249 / .72), rgb(255 252 246 / .28) 55%, transparent 80%), radial-gradient(54% 24% at 50% 103%, rgb(255 252 246 / .55), transparent 74%); }
.wk.wk .spot-light .ps-src { background: radial-gradient(64px 12px at 50% 0, #fff, rgb(255 248 232 / .85) 55%, transparent), radial-gradient(220px 64px at 50% 0, rgb(236 210 160 / .3), transparent); }
.wk.wk .spot-light .ps-dust { display: none; }
.wk.wk .spot-light .ps-grain { opacity: .035; mix-blend-mode: multiply; }
.wk.wk .pgh-strip.spot-light { background-color: #ebe3d6; }
/* Dust: a few motes drifting slowly in the light */
.wk.wk .ps-dust i { position: absolute; left: calc(50% + var(--x) * var(--k, 1)); top: var(--y); width: var(--s, 2px); height: var(--s, 2px); border-radius: 50%; background-color: rgb(255 242 216); box-shadow: 0 0 5px 1px rgb(255 226 170 / .5); opacity: 0; animation: wk-mote var(--d, 22s) ease-in-out var(--dl, 0s) infinite alternate; }
@keyframes wk-mote { 0% { opacity: 0; transform: translate(0, 0); } 18% { opacity: var(--o, .6); } 60% { opacity: calc(var(--o, .6) * .45); } 100% { opacity: var(--o, .6); transform: translate(var(--dx, 16px), var(--dy, -34px)); } }
.wk.wk .ps-dust i:nth-child(1) { --x: -40px; --y: 18%; --s: 2.4px; --o: .8; --d: 19s; --dx: 14px; --dy: -30px; }
.wk.wk .ps-dust i:nth-child(2) { --x: 62px; --y: 30%; --s: 2px; --o: .6; --d: 24s; --dl: -6s; --dx: -18px; --dy: -26px; }
.wk.wk .ps-dust i:nth-child(3) { --x: -118px; --y: 46%; --s: 2.8px; --o: .5; --d: 27s; --dl: -11s; --dx: 20px; --dy: -40px; }
.wk.wk .ps-dust i:nth-child(4) { --x: 140px; --y: 58%; --s: 2.2px; --o: .6; --d: 21s; --dl: -3s; --dx: -12px; --dy: -36px; }
.wk.wk .ps-dust i:nth-child(5) { --x: 8px; --y: 64%; --s: 3px; --o: .45; --d: 30s; --dl: -15s; --dx: 16px; --dy: -44px; }
.wk.wk .ps-dust i:nth-child(6) { --x: -190px; --y: 74%; --s: 2px; --o: .55; --d: 23s; --dl: -9s; --dx: 22px; --dy: -28px; }
.wk.wk .ps-dust i:nth-child(7) { --x: 210px; --y: 80%; --s: 2.4px; --o: .45; --d: 26s; --dl: -18s; --dx: -20px; --dy: -32px; }
.wk.wk .ps-dust i:nth-child(8) { --x: -70px; --y: 86%; --s: 2px; --o: .5; --d: 20s; --dl: -4s; --dx: 10px; --dy: -24px; }
.wk.wk .ps-dust i:nth-child(9) { --x: 96px; --y: 12%; --s: 1.8px; --o: .7; --d: 18s; --dl: -12s; --dx: -10px; --dy: -20px; }
.wk.wk .ps-dust i:nth-child(10) { --x: -12px; --y: 40%; --s: 1.8px; --o: .65; --d: 25s; --dl: -20s; --dx: -16px; --dy: -38px; }
.wk.wk .ps-dust i:nth-child(11) { --x: 170px; --y: 36%; --s: 2.6px; --o: .4; --d: 29s; --dl: -7s; --dx: 12px; --dy: -42px; }
.wk.wk .ps-dust i:nth-child(12) { --x: -150px; --y: 22%; --s: 2.2px; --o: .5; --d: 22s; --dl: -14s; --dx: 18px; --dy: -22px; }
/* Coming on: the lamp, then the beam and the light on the wall, then the dust */
@keyframes wk-spot-on { from { opacity: 0; } }
.wk.wk .ps-src { animation: wk-spot-on .7s ease-out .1s backwards; }
.wk.wk :is(.ps-beam, .ps-wall) { animation: wk-spot-on 1.4s cubic-bezier(.2, .7, .2, 1) .3s backwards; }
.wk.wk .ps-dust { animation: wk-spot-on 2s ease .9s backwards; }
@media (max-width: 600px) { .wk.wk .pgh-spot { --k: .55; } .wk.wk .ps-src { width: 380px; } }
.wk.wk .spot-idle .ps-dust i { animation-play-state: paused; } /* off screen */
@media (prefers-reduced-motion: reduce) { .wk.wk .pgh-spot > * { animation: none; } .wk.wk .ps-dust { display: none; } }
/* The original gold spotlight (1.26; Spotlight look › Original gold spotlight): a glow at the top, a bright cone with
   gold edges over warm paper on a light banner (a gold beam on a dark one), a pool of light at its foot, and now and
   then a small glint. It comes on once as the page opens. */
.wk.wk .spot-orig .pgh-spot { --spot: 201 164 95; animation: wk-spot-on 1.6s cubic-bezier(.2, .7, .2, 1) .15s backwards; }
.wk.wk .spot-orig .pgh-spot::before, .wk.wk .po-beam, .wk.wk .po-pool { position: absolute; left: var(--sx); translate: -50% 0; }
.wk.wk .spot-orig .pgh-spot::before { content: ""; top: -40px; width: 340px; height: 120px; }
.wk.wk .po-beam { top: -60px; width: 1600px; height: calc(100% + 60px); filter: blur(5px); -webkit-mask-image: linear-gradient(#000 0 52%, rgb(0 0 0 / .5) 85%, transparent); mask-image: linear-gradient(#000 0 52%, rgb(0 0 0 / .5) 85%, transparent); }
.wk.wk .po-beam::before { content: ""; position: absolute; inset: 0; background: conic-gradient(at 50% 0%, transparent 154deg, rgb(var(--spot) / var(--edge, .26)) 157.5deg, transparent 161deg, transparent 199deg, rgb(var(--spot) / var(--edge, .26)) 202.5deg, transparent 206deg); filter: blur(9px); }
.wk.wk .po-pool { bottom: -6%; width: 1000px; height: 34%; }
.wk.wk .pgh.orig-light { background: linear-gradient(180deg, #ebe3d5 0%, #f1ebe1 60%, #f4efe7 100%); }
.wk.wk .orig-light .po-beam { background: conic-gradient(at 50% 0%, transparent 157deg, rgb(255 251 244 / .55) 160deg, rgb(255 252 247 / .96) 165deg, #fffdfa 180deg, rgb(255 252 247 / .96) 195deg, rgb(255 251 244 / .55) 200deg, transparent 203deg); }
.wk.wk .orig-light .po-pool { background: radial-gradient(closest-side, #fffdfa, rgb(255 252 247 / .7) 55%, rgb(255 252 247 / 0)); }
.wk.wk .orig-light .pgh-spot::before { background: radial-gradient(closest-side, #fffdf7, rgb(var(--spot) / .3) 55%, transparent); }
.wk.wk .pgh-strip.orig-light { background-color: #f4efe7; }
.wk.wk .orig-night .pgh-spot { --spot: 214 185 127; --edge: .32; }
.wk.wk .orig-night .po-beam { background: conic-gradient(at 50% 0%, transparent 156deg, rgb(var(--spot) / .07) 160deg, rgb(var(--spot) / .17) 166deg, rgb(240 220 178 / .24) 180deg, rgb(var(--spot) / .17) 194deg, rgb(var(--spot) / .07) 200deg, transparent 204deg); }
.wk.wk .orig-night .po-pool { background: radial-gradient(closest-side, rgb(var(--spot) / .2), rgb(var(--spot) / .07) 55%, transparent); }
.wk.wk .orig-night .pgh-spot::before { background: radial-gradient(closest-side, rgb(255 238 200 / .55), rgb(var(--spot) / .18) 55%, transparent); }
.wk.wk .spot-orig .pgh-spot > i { left: calc(var(--sx) + var(--gx) * var(--gk, 1)); top: var(--gy); width: var(--gs, 10px); aspect-ratio: 1; background-color: rgb(var(--spot)); clip-path: polygon(50% 0, 57% 43%, 100% 50%, 57% 57%, 50% 100%, 43% 57%, 0 50%, 43% 43%); opacity: 0; animation: wk-glint 6s ease-in-out var(--gd) infinite; }
.wk.wk .orig-night .pgh-spot > i { background-color: rgb(255 240 210); }
.wk.wk .spot-orig .pgh-spot > i:nth-of-type(1) { --gx: -270px; --gy: 34%; --gd: .6s; }
.wk.wk .spot-orig .pgh-spot > i:nth-of-type(2) { --gx: 240px; --gy: 20%; --gd: 2.1s; --gs: 8px; }
.wk.wk .spot-orig .pgh-spot > i:nth-of-type(3) { --gx: -150px; --gy: 74%; --gd: 3.4s; --gs: 7px; }
.wk.wk .spot-orig .pgh-spot > i:nth-of-type(4) { --gx: 320px; --gy: 64%; --gd: 4.6s; }
.wk.wk .spot-orig .pgh-spot > i:nth-of-type(5) { --gx: 60px; --gy: 9%; --gd: 5.3s; --gs: 7px; }
@keyframes wk-glint { 0%, 74%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); } 82% { opacity: .85; transform: scale(1) rotate(45deg); } 90% { opacity: 0; transform: scale(.4) rotate(90deg); } }
@media (max-width: 600px) { .wk.wk :where(.spot-orig) .pgh-spot { --gk: .45; --edge: .18; } } /* a dark banner keeps its stronger edges, as before */
.wk.wk .spot-orig.spot-idle .pgh-spot > i { animation-play-state: paused; } /* off screen */
@media (prefers-reduced-motion: reduce) { .wk.wk .spot-orig .pgh-spot { animation: none; } .wk.wk .spot-orig .pgh-spot > i { display: none; } }
/* The dark showroom in the Daylight look: a gold main button and a fine light outline, as in the "Since 1971" chapter */
body.wk-day .wk.wk .pgh.dark .btn-gold { border-color: var(--gold); background-color: var(--gold); color: #1d1608; }
body.wk-day .wk.wk .pgh.dark .btn-gold:hover { border-color: #e4cc98; background-color: #e4cc98; color: #1d1608; }
body.wk-day .wk.wk .pgh.dark .btn-ghost { --bd: rgba(255, 255, 255, .55); --bw: 1px; border: 1px solid rgba(255, 255, 255, .55); background-color: transparent; color: #fff; }
body.wk-day .wk.wk .pgh.dark .btn-ghost:hover { --bd: #fff; border-color: #fff; background-color: #fff; color: #0f1217; }