/* ==========================================================================
   Saraf · chapters (Elementor widgets). Each chapter paints its own ground, feathered
   at the edges, so the page reads as one sheet. All markup lives inside .sf-w.
   ========================================================================== */
/* Elementor integration: our widgets take the full width, zero chrome around them */
.elementor-element[class*="elementor-widget-sf-"] { inline-size: 100%; }
.elementor-widget[class*="elementor-widget-sf-"] > .elementor-widget-container { margin: 0; padding: 0; }
.e-con:has(.elementor-widget[class*="elementor-widget-sf-"]) { --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; --gap: 0px; --row-gap: 0px; --column-gap: 0px; --content-width: 100%; --width: 100%; --margin-top: 0px; --margin-bottom: 0px; max-width: 100% !important; }
.e-con:has(.elementor-widget[class*="elementor-widget-sf-"]) > .e-con-inner { max-width: 100% !important; padding: 0 !important; }
/* WoodMart wraps Elementor pages in its own container: our pages run edge to edge */
body.elementor-page main.wd-content-layout.container, body.elementor-page .main-page-wrapper > .container, body.elementor-page .wd-content-area, body.elementor-page .site-content, body.elementor-page .main-page-wrapper .container.main-page-wrapper { max-width: 100% !important; width: 100% !important; padding-inline: 0 !important; margin: 0 !important; }
body.elementor-page .main-page-wrapper { padding-top: 0 !important; padding-bottom: 0 !important; }
body.elementor-page .wd-page-content > .container, body.elementor-page .wd-page-content > .wd-content-layout { max-width: 100% !important; padding: 0 !important; }

/* theme armour: everything inside inherits our type; the theme's h2/p/a rules lose on specificity */
:where(.sf-w.sf-w *) { color: inherit; font-family: inherit; letter-spacing: inherit; text-transform: none; }
.sf-w.sf-w { color: var(--on-ground); font-family: var(--f-sans); font-size: var(--fs-body); line-height: 1.6; text-align: start; }
:where(.sf-w.sf-w a, .sf-w.sf-w button) { -webkit-tap-highlight-color: transparent; text-decoration: none; }
:where(.sf-w.sf-w img, .sf-w.sf-w video) { max-width: 100%; height: auto; display: block; border: 0; }
:where(.sf-w.sf-w p, .sf-w.sf-w h1, .sf-w.sf-w h2, .sf-w.sf-w h3, .sf-w.sf-w h4, .sf-w.sf-w ul) { margin: 0; }
:where(.sf-w.sf-w ul) { padding: 0; list-style: none; }
/* our buttons beat the theme's own .btn rules */
.sf-w.sf-w .btn { background: var(--bg) !important; color: var(--fg) !important; border: 1.5px solid transparent; box-shadow: none; min-height: 50px; padding: .8em 1.6em; border-radius: 999px; font-size: 1rem; font-weight: 600; text-transform: none; letter-spacing: 0; }
.sf-w.sf-w .btn:hover { background: var(--bg-h) !important; color: var(--fg-h) !important; box-shadow: 0 14px 28px -12px rgba(42,28,21,.45); }
.sf-w.sf-w .btn--ghost, .sf-w.sf-w .btn--ghost-light, .sf-w.sf-w .btn--paper { border-color: currentColor; }
.sf-w.sf-w .btn--paper { border-color: var(--sf-line); }
.sf-w.sf-w .btn--lg { min-height: 58px; padding: .95em 2em; font-size: 1.08rem; }
.sf-w.sf-w .btn--sm { min-height: 42px; padding: .6em 1.2em; font-size: .95rem; }

/* ---------- chapter ground ---------- */
.chapter { position: relative; isolation: isolate; overflow-x: clip; overflow-y: visible; color: var(--on-ground); padding-block: clamp(56px, 7vw, 96px); }
.chapter > .chapter__bg { --fe: 22vh; position: absolute; inset: calc(var(--fe) * -.5) 0; z-index: -1; pointer-events: none; background: var(--ground);
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.08) calc(var(--fe)*.2), rgba(0,0,0,.4) calc(var(--fe)*.5), rgba(0,0,0,.85) calc(var(--fe)*.8), #000 var(--fe), #000 calc(100% - var(--fe)), rgba(0,0,0,.85) calc(100% - var(--fe)*.8), rgba(0,0,0,.4) calc(100% - var(--fe)*.5), rgba(0,0,0,.08) calc(100% - var(--fe)*.2), transparent 100%);
	        mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.08) calc(var(--fe)*.2), rgba(0,0,0,.4) calc(var(--fe)*.5), rgba(0,0,0,.85) calc(var(--fe)*.8), #000 var(--fe), #000 calc(100% - var(--fe)), rgba(0,0,0,.85) calc(100% - var(--fe)*.8), rgba(0,0,0,.4) calc(100% - var(--fe)*.5), rgba(0,0,0,.08) calc(100% - var(--fe)*.2), transparent 100%); }
.chapter:not([data-tone]) > .chapter__bg { background: transparent; }
@media (max-width: 767px) { .chapter > .chapter__bg { --fe: 9vh; } .chapter { padding-block: clamp(48px, 10vw, 72px); } }
/* living ground: a layer INSIDE the chapter (never fixed), feathered like the ground. Two pre-blurred discs drift with the
   scroll (transform only, JS scrub) and a paper tint breathes (opacity only), so the page drifts between paper tones. */
.chapter > .chapter__glow { --fe: 22vh; position: absolute; inset: calc(var(--fe) * -.5) 0; z-index: -1; overflow: hidden; pointer-events: none;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.4) calc(var(--fe)*.5), #000 var(--fe), #000 calc(100% - var(--fe)), rgba(0,0,0,.4) calc(100% - var(--fe)*.5), transparent 100%);
	        mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.4) calc(var(--fe)*.5), #000 var(--fe), #000 calc(100% - var(--fe)), rgba(0,0,0,.4) calc(100% - var(--fe)*.5), transparent 100%); }
.chapter__glow i { position: absolute; border-radius: 50%; will-change: transform; }
.chapter__glow-t { inset: 0; border-radius: 0; background: var(--ground-2); opacity: 0; }
.chapter__glow-a { width: 58vw; height: 58vw; max-width: 920px; max-height: 920px; inset-inline-start: -14vw; top: 4%; background: radial-gradient(circle, rgba(30,140,140,.22) 0%, rgba(30,140,140,.08) 42%, transparent 68%); }
.chapter__glow-b { width: 44vw; height: 44vw; max-width: 720px; max-height: 720px; inset-inline-end: -8vw; bottom: -4%; background: radial-gradient(circle, rgba(144,120,78,.24) 0%, rgba(144,120,78,.08) 42%, transparent 68%); }
.chapter[data-tone="espresso"] .chapter__glow-a { background: radial-gradient(circle, rgba(30,140,140,.3) 0%, rgba(30,140,140,.1) 42%, transparent 68%); }
.chapter[data-tone="espresso"] .chapter__glow-b { background: radial-gradient(circle, rgba(196,174,134,.2) 0%, rgba(196,174,134,.06) 42%, transparent 68%); }
@media (max-width: 767px) { .chapter > .chapter__glow { --fe: 9vh; } .chapter__glow-a { width: 90vw; height: 90vw; max-width: 600px; max-height: 600px; inset-inline-start: -30vw; } .chapter__glow-b { display: none; } }
/* a dark chapter gets a rich field, not a flat block */
.chapter[data-tone="espresso"] > .chapter__bg { background: radial-gradient(90% 70% at 50% 30%, var(--sf-espresso-2) 0%, var(--sf-espresso) 62%, #140D0B 100%); }
.chapter[data-tone="wine"] > .chapter__bg { background: radial-gradient(90% 70% at 50% 30%, #7A1414 0%, var(--sf-wine) 60%, var(--sf-wine-deep) 100%); }
/* the gold hairline under headings on dark grounds */
.chapter[data-tone="espresso"] .chead > .h2::after, .chapter[data-tone="wine"] .chead > .h2::after { content: ""; display: block; width: 72px; height: 1px; margin-top: 22px; background: linear-gradient(90deg, var(--sf-gold-soft), transparent); }
.chapter[data-tone="espresso"] .chead--center > .h2::after, .chapter[data-tone="wine"] .chead--center > .h2::after { margin-inline: auto; background: linear-gradient(90deg, transparent, var(--sf-gold-soft), transparent); }

/* ---------- slab: a frame with a live edge corner, the signature container ---------- */
.slab { position: relative; overflow: hidden; border-radius: 26px 26px 26px 90px; background: var(--surface); box-shadow: var(--sf-shadow); }
.slab > img, .slab > video { width: 100%; height: 100%; object-fit: cover; }
.slab--tall { aspect-ratio: 9 / 14; }
.slab--wide { aspect-ratio: 4 / 3; }
.slab__badge { position: absolute; bottom: 16px; inset-inline-start: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(247,242,235,.92); color: var(--sf-ink); font-size: .85rem; font-weight: 600; }
.slab__badge .sf-ico { width: 14px; height: 14px; }

/* ==========================================================================
   01 · HERO "the studio table" (paper, light)
   ========================================================================== */
.hero { padding: 0; }
.hero > .chapter__bg { display: none; }
.hero__stage { position: relative; min-height: 100vh; min-height: 100lvh; display: flex; align-items: center; overflow: clip; isolation: isolate; background: radial-gradient(80% 60% at 30% 50%, var(--sf-paper-2), var(--sf-paper) 70%); }
/* the resin glow: two soft discs that drift (transform only, pre-blurred gradients, no filter) */
.hero__glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero__glow i { position: absolute; border-radius: 50%; }
.hero__glow-a { width: 60vw; height: 60vw; max-width: 900px; max-height: 900px; inset-inline-start: -10vw; top: 10%; background: radial-gradient(circle, rgba(30,140,140,.42) 0%, rgba(30,140,140,.14) 40%, transparent 68%); animation: sfGlowA 18s ease-in-out infinite alternate; }
.hero__glow-b { width: 46vw; height: 46vw; max-width: 700px; max-height: 700px; inset-inline-end: 8vw; bottom: -10%; background: radial-gradient(circle, rgba(144,120,78,.36) 0%, rgba(144,120,78,.12) 42%, transparent 68%); animation: sfGlowB 22s ease-in-out infinite alternate; }
@keyframes sfGlowA { from { transform: translate(0, 0) scale(1); } to { transform: translate(8vw, -6vh) scale(1.12); } }
@keyframes sfGlowB { from { transform: translate(0, 0) scale(1); } to { transform: translate(-6vw, 5vh) scale(1.1); } }
/* spotlight that follows the pointer (JS writes --mx --my) */
.hero__spot { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .6s; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.55), transparent 70%); mix-blend-mode: soft-light; }
.hero--spot.is-live .hero__spot { opacity: 1; }
.hero__in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(16px, 3vw, 48px); padding-block: calc(var(--hdr-h) + 24px) 80px; min-height: 100vh; min-height: 100lvh; }
.hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.hero__title { font-family: var(--f-display); font-size: var(--fs-mega); font-weight: 700; line-height: .86; letter-spacing: 0; color: var(--sf-ink); text-wrap: balance; margin: 0; }
.hero__title em { font-style: normal; color: var(--sf-wine); }
.hero__title .w { display: inline-block; }
.hero__lead { font-size: var(--fs-lead); line-height: 1.45; color: var(--sf-ink-soft); max-width: 34ch; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.hero__facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 10px; padding-top: 18px; border-top: 1px solid var(--sf-line); font-size: .92rem; color: var(--sf-ink-soft); width: 100%; max-width: 520px; }
.hero__facts li { position: relative; padding-inline-start: 14px; }
.hero__facts li::before { content: ""; position: absolute; inset-inline-start: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--sf-gold); }
/* the scene: slab + floats; everything positioned in % of the scene so phones keep the composition */
.hero__scene { position: relative; aspect-ratio: 1 / .92; width: 100%; max-width: 680px; justify-self: center; perspective: 1400px; }
.hero__slab { position: absolute; inset: 10% 4% 8%; transform-style: preserve-3d; will-change: transform; }
.hero__slab-img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: contain; filter: drop-shadow(0 40px 40px rgba(42,28,21,.28)); animation: sfBob 7s ease-in-out infinite; }
.hero__slab-shadow { position: absolute; inset: auto 12% -6% 12%; height: 10%; border-radius: 50%; background: radial-gradient(ellipse, rgba(42,28,21,.28), transparent 70%); transform: translateZ(-80px); }
.hero__float { position: absolute; width: var(--w, 16%); z-index: 2; will-change: transform; pointer-events: none; }
.hero__float img { width: 100%; height: auto !important; filter: drop-shadow(0 22px 22px rgba(42,28,21,.28)); animation: sfBob 6.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1.6s); }
.hero__float--top-start { top: 0; inset-inline-start: -4%; }
.hero__float--top-end { top: 4%; inset-inline-end: -2%; }
.hero__float--bottom-start { bottom: -2%; inset-inline-start: 6%; }
.hero__float--bottom-end { bottom: 6%; inset-inline-end: -6%; }
@keyframes sfBob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-14px) rotate(1.2deg); } }
.hero__scroll { position: absolute; z-index: 3; bottom: 26px; inset-inline-end: var(--gutter); display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--sf-ink-soft); font-family: var(--f-sans); font-size: .82rem; font-weight: 600; letter-spacing: .14em; }
.hero__drip { position: relative; width: 2px; height: 54px; background: rgba(42,28,21,.14); overflow: hidden; border-radius: 2px; }
.hero__drip i { position: absolute; inset-inline: 0; top: 0; height: 22px; background: var(--sf-gold); border-radius: 2px; animation: sfDrip 1.9s var(--ease-out) infinite; }
@keyframes sfDrip { 0% { transform: translateY(-24px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(60px); opacity: 0; } }
.hero__after { display: block; height: 0; }
@media (max-width: 1024px) { .hero__in { gap: 24px; } .hero__title { font-size: clamp(3.6rem, 2rem + 8vw, 8rem); } }
@media (max-width: 767px) {
	.hero__stage { min-height: 0; }
	.hero__in { grid-template-columns: 1fr; min-height: 0; padding-block: calc(var(--hdr-h) + 10px) 90px; gap: 10px; }
	.hero__scene { order: -1; max-width: 100%; aspect-ratio: 1 / .78; margin-top: 4px; }
	.hero__slab { inset: 8% 6% 10%; }
	.hero__float--top-start { width: 20%; } .hero__float--bottom-end { width: 18%; }
	.hero__copy { gap: 14px; }
	.hero__title { font-size: clamp(3.8rem, 20vw, 5.6rem); }
	.hero__lead { font-size: 1.05rem; }
	.hero__ctas { width: 100%; }
	.hero__ctas .btn { flex: 1 1 45%; min-height: 52px; padding-inline: 1em; }
	.hero__facts { gap: 6px 14px; font-size: .85rem; }
	.hero__scroll { display: none; }
	.hero__glow-a { width: 120vw; height: 120vw; inset-inline-start: -30vw; top: -10%; }
	.hero__glow-b { display: none; }
	.hero__slab-img, .hero__float img { animation: none; }
}

/* ==========================================================================
   02 · MARQUEE
   ========================================================================== */
.marquee { padding: 0; z-index: 2; }
.marquee > .chapter__bg { --fe: 0px; inset: 0; mask-image: none; -webkit-mask-image: none; }
.marquee__row { overflow: hidden; padding-block: 16px; border-block: 1px solid var(--on-ground-line); }
.marquee__track { display: flex; align-items: center; width: max-content; white-space: nowrap; font-family: var(--f-display); font-weight: 700; font-size: clamp(1.8rem, 1.2rem + 2.2vw, 3rem); line-height: 1; color: var(--on-ground); }
.marquee__item { padding-inline: .9em; }
.marquee__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sf-gold); flex: none; }
/* second row: one paper step deeper, thinner, smaller, slower and reversed (speed comes from data-marquee) */
.marquee__row--b { padding-block: 12px; border-top: 0; background: var(--ground-2); }
.marquee__row--b .marquee__track { font-weight: 400; font-size: clamp(1.3rem, 1rem + 1.4vw, 2.1rem); color: var(--on-ground-soft); }
.marquee__row--b .marquee__dot { width: 6px; height: 6px; background: var(--on-ground-line); }
@media (max-width: 767px) { .marquee__row--b { padding-block: 9px; } }

/* ==========================================================================
   03 · CATEGORIES mosaic
   ========================================================================== */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 240px; grid-auto-flow: dense; gap: 16px; }
.tile { position: relative; display: block; overflow: hidden; border-radius: var(--radius); isolation: isolate; color: var(--sf-paper); }
.tile--wide { grid-column: span 2; }
.tile--tall { grid-row: span 2; }
.tile__frame { position: absolute; inset: 0; background: var(--sf-paper-2); }
.tile__img { width: 100%; height: 100% !important; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.tile:hover .tile__img { transform: scale(1.06); }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,13,11,.85), rgba(20,13,11,.25) 48%, transparent 75%); transition: opacity .4s; }
.tile__box { position: absolute; inset-inline: 22px; bottom: 20px; z-index: 1; display: flex; flex-direction: column; gap: 4px; padding-inline-end: 52px; }
.tile__title { font-family: var(--f-display); font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.8rem); font-weight: 700; line-height: 1; }
.tile__sub { font-size: .92rem; color: #DCCBB9; opacity: .9; }
.tile__go { position: absolute; inset-inline-end: 0; bottom: 0; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--sf-paper); color: var(--sf-ink); transition: transform .4s var(--ease-out), background .3s; }
.tile:hover .tile__go { background: var(--sf-gold-soft); transform: translateX(-4px); }
@media (max-width: 1024px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 220px; } .tile--wide { grid-column: span 2; } }
@media (max-width: 767px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 170px; gap: 10px; } .tile--tall { grid-row: span 2; } .tile__box { inset-inline: 12px; bottom: 12px; padding-inline-end: 0; } .tile__title { font-size: 1.15rem; } .tile__sub, .tile__go { display: none; } }

/* ==========================================================================
   04 · PICKS (WooCommerce products inside the chapter)
   ========================================================================== */
.picks__grid .products.wd-grid-g, .picks__grid .products { --wd-col-lg: 4 !important; --wd-col-md: 3 !important; --wd-col-sm: 2 !important; --wd-gap-lg: 24px; --wd-gap-sm: 12px; display: grid !important; grid-template-columns: repeat(var(--wd-col-lg), minmax(0, 1fr)); gap: 44px 24px; }
.picks__grid .products .wd-product { width: auto !important; max-width: none !important; margin: 0 !important; }
@media (max-width: 1024px) { .picks__grid .products { grid-template-columns: repeat(var(--wd-col-md), minmax(0, 1fr)); } }
@media (max-width: 767px) { .picks__grid .products { grid-template-columns: repeat(var(--wd-col-sm), minmax(0, 1fr)); gap: 28px 12px; } }
.picks__grid .wd-product .product-element-top { background: var(--surface); }
.picks .chead { margin-block-end: clamp(28px, 4vw, 48px); }

/* ==========================================================================
   05 · WORKSHOPS (the dark chapter)
   ========================================================================== */
.ws__in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.ws__cards { display: grid; gap: 12px; margin-bottom: 28px; }
.wscard { position: relative; display: grid; gap: 6px; padding: 20px; padding-inline-end: 64px; border-radius: 18px; background: var(--surface); border: 1px solid var(--on-ground-line); color: var(--on-ground); transition: background .35s, border-color .35s, transform .5s var(--ease-out), box-shadow .5s; }
.wscard:hover { border-color: var(--sf-gold); transform: translateY(-3px); box-shadow: var(--sf-shadow-sm); }
.wscard__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.wscard__name { font-family: var(--f-display); font-size: 1.9rem; font-weight: 700; line-height: 1; }
.wscard__price { font-family: var(--f-sans); font-weight: 700; color: var(--on-ground-accent); white-space: nowrap; }
.wscard__meta { font-size: .88rem; color: var(--on-ground-soft); }
.wscard__text { color: var(--on-ground); line-height: 1.5; }
.wscard__go { position: absolute; inset-inline-end: 18px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--on-ground-line); color: var(--on-ground-accent); transition: background .3s, color .3s; }
.wscard:hover .wscard__go { background: var(--on-ground-accent); color: var(--sf-paper); }
.ws__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.ws__media { display: flex; justify-content: center; }
.ws__media .slab { width: min(100%, 360px); max-height: 600px; transform-style: preserve-3d; }
.ws__video { opacity: 0; transition: opacity .8s; }
.ws__video.is-playing { opacity: 1; }
.ws__media .slab video[poster] { background: var(--sf-paper-2) center / cover no-repeat; }
@media (max-width: 900px) { .ws__in { grid-template-columns: 1fr; } .ws__media { order: -1; } .ws__media .slab { width: min(78%, 340px); } }
@media (max-width: 767px) { .wscard { padding: 16px 18px 16px 54px; } .wscard__name { font-size: 1.25rem; } }

/* ==========================================================================
   06 · PROCESS (horizontal track, pinned on desktop)
   ========================================================================== */
.process { padding-block: clamp(64px, 9vw, 128px) 0; }
.process__pin { padding-bottom: clamp(64px, 9vw, 128px); }
.process__head .chead { margin-block-end: clamp(28px, 4vw, 56px); }
.process__track { position: relative; display: flex; gap: clamp(18px, 2.5vw, 40px); padding-inline: var(--gutter); width: max-content; will-change: transform; }
.process__line { position: absolute; inset-inline: var(--gutter); top: 26px; height: 1px; background: var(--on-ground-line); }
.process__line i { position: absolute; inset-inline-start: 0; top: 0; height: 100%; width: var(--w, 0%); background: linear-gradient(90deg, var(--sf-resin), var(--sf-resin-deep)); transition: width .2s linear; }
.step { position: relative; width: clamp(260px, 26vw, 380px); flex: none; display: grid; gap: 12px; padding-top: 48px; }
.step__n { position: absolute; top: 8px; inset-inline-start: 0; font-family: var(--f-latin); font-size: 1rem; letter-spacing: .2em; color: var(--on-ground-accent); background: var(--ground, var(--sf-paper)); padding-inline-end: 10px; }
.chapter:not([data-tone]) .step__n { background: var(--sf-paper); }
.step__frame { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 18px 18px 18px 56px; background: var(--surface); box-shadow: var(--sf-shadow-sm); }
.step__img { width: 100%; height: 100% !important; object-fit: cover; transition: transform 1.3s var(--ease-out); }
.step:hover .step__img { transform: scale(1.05); }
.step__title { font-family: var(--f-display); font-size: var(--fs-h3); font-weight: 700; line-height: 1; color: var(--on-ground); }
.step__text { color: var(--on-ground-soft); line-height: 1.5; max-width: 32ch; }
@media (max-width: 1024px) {
	.process__track { width: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 18px; }
	.process__line { display: none; }
	.step { width: auto; padding-top: 36px; }
}
@media (max-width: 767px) { .process__track { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 12px; } .step__frame { border-radius: 12px 12px 12px 36px; } .step__title { font-size: 1.15rem; } .step__text { font-size: .9rem; } }

/* ==========================================================================
   07 · CUSTOM (full-bleed photo with a paper card)
   ========================================================================== */
.custom { padding: 0; min-height: 80vh; display: flex; align-items: center; }
.custom > .chapter__bg { display: none; }
.custom__media { position: absolute; inset: -8% 0; z-index: -1; overflow: hidden; }
.custom__pic, .custom__img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; }
.custom__veil { position: absolute; inset: 0; background: linear-gradient(to left, rgba(20,13,11,.15), rgba(20,13,11,.55)); }
.custom__in { padding-block: clamp(72px, 10vw, 140px); display: flex; justify-content: flex-start; }
.custom__card { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; max-width: 560px; padding: clamp(28px, 4vw, 52px); border-radius: 26px 26px 26px 90px; background: rgba(245,239,231,.94); color: var(--sf-ink); box-shadow: var(--sf-shadow); --on-ground: var(--sf-ink); --on-ground-soft: var(--sf-ink-soft); --on-ground-accent: var(--sf-wine); }
.custom__card .lead { max-width: 40ch; }
.custom__card .h2 { max-width: 12ch; }
.custom--pin { min-height: 100vh; min-height: 100lvh; }
.custom--pin .custom__img { will-change: transform; transform-origin: 50% 50%; }
.custom--pin .custom__card { transition: none; will-change: transform, opacity; }
@media (max-width: 767px) { .custom { min-height: 0; } .custom__in { padding-block: 60px 72px; } .custom__card { border-radius: 18px 18px 18px 60px; padding: 24px 22px 28px; } .custom__veil { background: linear-gradient(to top, rgba(20,13,11,.5), rgba(20,13,11,.15)); } }

/* ==========================================================================
   08 · STORY
   ========================================================================== */
.story__in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.story__media { position: relative; }
.story__float { position: absolute; width: 36%; bottom: -8%; inset-inline-start: -6%; border-radius: 18px; overflow: hidden; box-shadow: var(--sf-shadow); border: 6px solid var(--ground); }
.story__float img { aspect-ratio: 1; object-fit: cover; }
.story__copy { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.story__text { font-size: var(--fs-lead); line-height: 1.55; color: var(--on-ground-soft); max-width: 46ch; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; width: 100%; padding-top: 18px; border-top: 1px solid var(--on-ground-line); }
.facts li { display: grid; gap: 2px; }
.facts b { font-family: var(--f-display); font-weight: 700; font-size: 1.9rem; line-height: 1; color: var(--on-ground); font-variant-numeric: tabular-nums; }
.facts span { font-size: .88rem; color: var(--on-ground-soft); }
@media (max-width: 900px) { .story__in { grid-template-columns: 1fr; } .story__media { margin-bottom: 36px; } .story__float { width: 40%; bottom: -12%; } }
@media (max-width: 767px) { .facts { grid-template-columns: 1fr 1fr; } .facts b { font-size: 1.3rem; } }

/* ==========================================================================
   09 · INSTAGRAM
   ========================================================================== */
.ig__handle { display: flex; align-items: center; gap: 14px; color: var(--on-ground); }
.ig__handle .sf-ico { width: 34px; height: 34px; color: var(--on-ground-accent); }
.ig__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.ig__item { position: relative; display: block; overflow: hidden; border-radius: 14px; aspect-ratio: 1; background: var(--surface); }
.ig__item img { width: 100%; height: 100% !important; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.ig__item:hover img { transform: scale(1.07); }
.ig__hover { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(102,12,12,.55); color: var(--sf-paper); opacity: 0; transition: opacity .35s; }
.ig__hover .sf-ico { width: 28px; height: 28px; }
.ig__item:hover .ig__hover { opacity: 1; }
.ig__cta { display: flex; justify-content: center; margin-top: 32px; }
@media (max-width: 767px) { .ig__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .ig__item { border-radius: 10px; } }

/* ==========================================================================
   10 · CONTACT (the river ends in a pool)
   ========================================================================== */
.contact__in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.contact__copy { position: relative; display: flex; flex-direction: column; gap: 22px; }
.contact__details { display: grid; gap: 12px; }
.contact__details li { display: flex; align-items: center; gap: 12px; color: var(--on-ground); }
.contact__details .sf-ico { color: var(--on-ground-accent); width: 20px; height: 20px; }
.contact__details a { color: var(--on-ground); }
.contact__pool { display: none; }
.contact__pool ellipse { fill: var(--sf-resin); stroke: none; opacity: .25; }
.form { display: grid; gap: 18px; padding: clamp(22px, 3vw, 36px); border-radius: 26px 26px 26px 80px; background: var(--surface); box-shadow: var(--sf-shadow-sm); border: 1px solid var(--on-ground-line); }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form__field { display: grid; gap: 6px; font-size: .9rem; color: var(--on-ground-soft); }
.form__field--full { grid-column: 1 / -1; }
.form__field input, .form__field textarea { width: 100%; min-height: 50px; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--on-ground-line); background: var(--ground); color: var(--on-ground); font: inherit; font-size: 1rem; transition: border-color .25s, box-shadow .25s; }
.form__field textarea { min-height: 110px; resize: vertical; }
.form__field input:focus, .form__field textarea:focus { outline: 0; border-color: var(--sf-gold); box-shadow: 0 0 0 3px rgba(144,120,78,.2); }
.form__hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.form__actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.form__wa { display: inline-flex; align-items: center; gap: 8px; color: var(--on-ground); font-weight: 500; border-bottom: 1px solid var(--accent-line); padding-bottom: 2px; }
.form__wa .sf-ico { width: 20px; height: 20px; color: #25D366; }
.form__msg { min-height: 1.4em; font-size: .95rem; color: var(--on-ground-accent); }
.form.is-sending { opacity: .6; pointer-events: none; }
.form.is-done .form__grid, .form.is-done .form__actions { display: none; }
.form.is-done .form__msg { font-family: var(--f-display); font-size: 2rem; font-weight: 700; color: var(--on-ground); }
@media (max-width: 900px) { .contact__in { grid-template-columns: 1fr; } .contact__pool { display: none; } }
@media (max-width: 600px) { .form__grid { grid-template-columns: 1fr; } .form { border-radius: 18px 18px 18px 56px; padding: 20px 18px 24px; } .form__submit { width: 100%; } }

/* ==========================================================================
   11 · PAGE HERO (inner pages)
   ========================================================================== */
.phero { padding: calc(var(--hdr-h) + clamp(40px, 7vw, 96px)) 0 clamp(40px, 6vw, 80px); min-height: 46vh; display: flex; align-items: flex-end; }
.phero--tall { min-height: 68vh; }
.phero > .chapter__bg { --fe: 0px; inset: 0; mask-image: none; -webkit-mask-image: none; }
.phero__media { position: absolute; inset: -8% 0; z-index: -1; overflow: hidden; }
.phero__media img { width: 100%; height: 100% !important; object-fit: cover; }
.phero__veil { position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,13,11,.9) 0%, rgba(20,13,11,.45) 50%, rgba(20,13,11,.3) 100%); }
.phero__in { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.phero__in > * { max-width: 820px; }
.phero__title { font-family: var(--f-display); font-size: clamp(3.6rem, 2rem + 6vw, 8rem); font-weight: 700; line-height: .9; letter-spacing: 0; color: var(--on-ground); text-wrap: balance; }
.phero__title em { font-style: normal; font-weight: 400; color: var(--on-ground-accent); }
.phero--img .phero__title { color: var(--sf-paper); }
.phero--img .phero__title em { color: var(--sf-gold-soft); }
.phero__lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--on-ground-soft); max-width: 60ch; }
.phero--img .phero__lead { color: #E6D9CB; }
@media (max-width: 767px) { .phero { min-height: 0; padding-top: calc(var(--hdr-h) + 36px); } .phero--tall { min-height: 56vh; } .phero__title { font-size: clamp(2.4rem, 11vw, 3.4rem); } }

/* ==========================================================================
   12 · TEXT chapter
   ========================================================================== */
.textc__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.textc--image-end .textc__media { order: 2; }
.textc--narrow .textc__in, .textc--wide .textc__in { grid-template-columns: 1fr; }
.textc--narrow .textc__copy { max-width: 760px; margin-inline: auto; }
.textc__copy { display: flex; flex-direction: column; gap: 10px; }
.textc__copy .chead { margin-block-end: 18px; }
.textc__media .slab { aspect-ratio: 4 / 5; }
.textc__cta { margin-top: 14px; }
@media (max-width: 900px) { .textc__in { grid-template-columns: 1fr; } .textc--image-end .textc__media { order: 0; } .textc__media .slab { aspect-ratio: 4 / 3; } }

/* ==========================================================================
   13 · WORKSHOPS IN DETAIL
   ========================================================================== */
.wsd__list { display: grid; gap: clamp(28px, 4vw, 48px); }
.wsd__item { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(20px, 3vw, 36px); border-radius: 26px 26px 26px 90px; background: var(--surface); border: 1px solid var(--on-ground-line); }
.wsd__item:nth-child(even) .wsd__media { order: 2; }
.wsd__item:nth-child(even) { border-radius: 26px 26px 90px 26px; }
.wsd__media .slab { aspect-ratio: 4 / 5; max-width: 420px; }
.wsd__body { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.wsd__name { font-family: var(--f-display); font-weight: 700; color: var(--on-ground); font-size: clamp(2.2rem, 1.5rem + 2vw, 3.4rem); line-height: 1; }
.wsd__who { color: var(--on-ground-accent); font-weight: 500; }
.wsd__rows { display: grid; gap: 0; width: 100%; border-top: 1px solid var(--on-ground-line); }
.wsd__rows li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--on-ground-line); }
.wsd__rows b { font-family: var(--f-sans); font-weight: 600; white-space: nowrap; color: var(--on-ground); }
.wsd__note { font-size: .92rem; line-height: 1.55; color: var(--on-ground-soft); }
@media (max-width: 900px) { .wsd__item { grid-template-columns: 1fr; } .wsd__item:nth-child(even) .wsd__media { order: 0; } .wsd__media .slab { aspect-ratio: 16 / 10; max-width: none; } }
@media (max-width: 767px) { .wsd__item, .wsd__item:nth-child(even) { border-radius: 18px 18px 18px 56px; padding: 16px 16px 24px; } .wsd__body .btn { width: 100%; } }

/* ==========================================================================
   14 · FAQ
   ========================================================================== */
.faq__in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.faq__list { display: grid; gap: 10px; }
.faq__item { border-radius: 16px; background: var(--surface); border: 1px solid var(--on-ground-line); padding: 0 22px; transition: background .3s; }
.faq__item[open] { background: var(--ground); }
.faq__q { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; cursor: pointer; list-style: none; font-family: var(--f-sans); font-size: 1.1rem; font-weight: 600; color: var(--on-ground); }
.faq__q::-webkit-details-marker { display: none; }
.faq__plus { position: relative; flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--on-ground-line); }
.faq__plus::before, .faq__plus::after { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 1.5px; background: var(--on-ground-accent); translate: -50% -50%; transition: transform .35s var(--ease-out); }
.faq__plus::after { transform: rotate(90deg); }
.faq__item[open] .faq__plus::after { transform: rotate(0); }
.faq__a { padding: 0 0 20px; color: var(--on-ground-soft); line-height: 1.6; max-width: 60ch; }
@media (max-width: 900px) { .faq__in { grid-template-columns: 1fr; } }

/* ==========================================================================
   Editor canvas: everything static and editable
   ========================================================================== */
body.elementor-editor-active .hero__cover, body.elementor-editor-active .sf-wa, body.elementor-editor-active .sf-dock { display: none !important; }
body.elementor-editor-active .ws__video { opacity: 1; }
body.elementor-editor-active .hero__slab-img, body.elementor-editor-active .hero__float img { animation: none; }
body.elementor-editor-active .process__track { width: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.elementor-editor-active .chapter__glow-t { opacity: .35; }


/* ==========================================================================
   Native Elementor / WoodMart widgets on our pages: section heads and spacing through classes
   ========================================================================== */
.sf-sec.e-con { --padding-top: clamp(56px, 8vw, 110px); --padding-bottom: clamp(56px, 8vw, 110px); --content-width: var(--wrap); }
.sf-sec.e-con > .e-con-inner { padding-inline: var(--gutter); }
.sf-sec--paper2.e-con { background: var(--sf-paper-2); }
.sf-eyebrow .elementor-heading-title { font-family: var(--f-latin); font-size: .76rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--sf-wine); direction: ltr; display: inline-flex; align-items: center; gap: .8em; }
.sf-eyebrow .elementor-heading-title::before { content: ""; width: 34px; height: 1px; background: currentColor; opacity: .7; }
.sf-h2 .elementor-heading-title { font-family: var(--f-display); font-size: var(--fs-h2); font-weight: 700; line-height: .92; color: var(--sf-ink); text-wrap: balance; max-width: 16ch; }
.sf-h2 .elementor-heading-title em { font-style: normal; color: var(--sf-wine); }
.sf-lead, .sf-lead p { font-size: var(--fs-lead); line-height: 1.5; color: var(--sf-ink-soft); max-width: 48ch; }
.sf-more .elementor-button { background: transparent !important; color: var(--sf-ink) !important; border: 0; border-bottom: 1.5px solid var(--sf-gold); border-radius: 0 !important; padding: 0 0 .15em !important; font-family: var(--f-sans); font-weight: 600; font-size: 1rem; }
.sf-more .elementor-button:hover { color: var(--sf-wine) !important; }
.sf-head.e-con { --gap: 12px; --padding-bottom: clamp(24px, 4vw, 44px); }
.sf-head-row.e-con { --flex-direction: row; --justify-content: space-between; --align-items: flex-end; --flex-wrap: wrap; }


/* ---------- section head widget (above WoodMart widgets) ---------- */
.shead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 40px; flex-wrap: wrap; max-width: var(--wrap); margin-inline: auto; padding: clamp(56px, 7vw, 96px) var(--gutter) clamp(24px, 4vw, 40px); }
.shead__main { display: flex; flex-direction: column; gap: 14px; }
.shead--center { justify-content: center; text-align: center; }
.shead--center .shead__main { align-items: center; }
.shead .link-more { margin-bottom: .4em; }
/* ---------- WoodMart categories grid on our pages: one shape for every tile, name on a paper pill ---------- */
/* home categories · classic row: five equal portrait tiles on a hairline, the name set under each in display type */
.sf-wd-cats .wd-cats { --wd-gap-lg: 22px; --wd-gap-md: 16px; --wd-gap-sm: 12px; }
.sf-wd-cats .wd-cat { box-shadow: none !important; }
.sf-wd-cats .wd-cat-inner { position: relative; border-radius: 0; overflow: visible; background: none; }
.sf-wd-cats .wd-cat-thumb { aspect-ratio: 4 / 5; overflow: hidden; margin: 0 0 14px; border-radius: 2px; border: 0; background: var(--sf-paper-2); isolation: isolate; }
.sf-wd-cats .wd-cat-thumb a, .sf-wd-cats .wd-cat-thumb .wd-cat-image { display: block; height: 100%; }
.sf-wd-cats .wd-cat-thumb img { width: 100% !important; height: 100% !important; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.sf-wd-cats .wd-cat:hover .wd-cat-thumb img { transform: scale(1.04); }
html body .sf-wd-cats .wd-cat .wd-cat-content, html body .sf-wd-cats .wd-cat.cat-design-default .wd-cat-content, html body .sf-wd-cats .wd-cat-content.hover-mask { position: static !important; inset: auto !important; width: auto !important; margin: 0 !important; padding: 0 !important; background: none !important; box-shadow: none !important; text-align: center; opacity: 1 !important; transform: none !important; }
html body .sf-wd-cats .wd-cat-content.hover-mask::before, html body .sf-wd-cats .wd-cat-content.hover-mask::after, html body .sf-wd-cats .wd-cat.categories-with-shadow .wd-cat-inner::before, html body .sf-wd-cats .wd-cat-thumb::after { display: none !important; content: none !important; }
html body .sf-wd-cats .wd-cat.categories-with-shadow .wd-cat-inner, html body .sf-wd-cats .wd-cat.categories-with-shadow:hover .wd-cat-inner { box-shadow: none !important; }
html body .sf-wd-cats .wd-cat .wd-cat-inner { overflow: visible !important; }
html body .sf-wd-cats .wd-cat-content .wd-entities-title { position: static !important; inset: auto !important; display: block; font-family: var(--f-display); font-size: 1.75rem; font-weight: 700; line-height: 1; margin: 0; padding: 0; color: var(--sf-ink) !important; letter-spacing: 0; text-shadow: none; transition: color .25s; }
.sf-wd-cats .wd-cat-content .wd-entities-title a { color: inherit; }
html body .sf-wd-cats .wd-cat:hover .wd-cat-content .wd-entities-title { color: var(--sf-wine) !important; }
.sf-wd-cats .wd-cat-count, .sf-wd-cats .more-products, .sf-wd-cats .wd-cat-content::before, .sf-wd-cats .wd-cat-content::after, .sf-wd-cats .wd-cat-inner::after { display: none !important; content: none !important; }
@media (max-width: 767px) {
	.sf-wd-cats .wd-cats { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding: 0 var(--gutter) 10px; margin-inline: calc(-1 * var(--gutter)); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
	.sf-wd-cats .wd-cats::-webkit-scrollbar { display: none; }
	.sf-wd-cats .wd-cat { flex: 0 0 62vw; width: 62vw !important; max-width: 260px; scroll-snap-align: start; }
	.sf-wd-cats .wd-cat-thumb { margin-bottom: 10px; }
	.sf-wd-cats .wd-cat-content .wd-entities-title { font-size: 1.4rem; }
}
/* ---------- WoodMart products grid on our pages ---------- */
/* best sellers · Heath Ceramics treatment: the piece sits on a quiet cream square with no frame, name and price small under it, nothing else */
.sf-wd-products .products.wd-grid-g { --wd-gap-lg: 30px; --wd-gap-md: 20px; --wd-gap-sm: 12px; row-gap: 40px !important; }
html body .sf-wd-products .wd-product .product-element-top { background: var(--sf-paper-2); border: 0; border-radius: 2px; margin-bottom: 16px; }
html body .sf-wd-products .wd-product .product-image-link { aspect-ratio: 4 / 5; padding: 10%; }
html body .sf-wd-products .wd-product.sf-studio .product-image-link { padding: 0; }
html body .sf-wd-products .wd-product .wd-add-btn, html body .sf-wd-products .wd-product .wd-product-cats, html body .sf-wd-products .wd-product .product-labels, html body .sf-wd-products .wd-product .wd-buttons, html body .sf-wd-products .wd-product .wd-bottom-actions { display: none !important; }
html body .sf-wd-products .wd-product .wd-entities-title, html body .sf-wd-products .wd-product .wd-entities-title a { font-size: .95rem !important; font-weight: 500 !important; margin: 0 0 2px; }
html body .sf-wd-products .wd-product .price { font-size: .92rem; font-weight: 400; color: var(--sf-ink-soft); }
html body .sf-wd-products .wd-product .sf-inquiry-label { font-size: .88rem; }
html body .sf-wd-products .wd-product .sf-inquiry-label::before { width: 5px; height: 5px; }
@media (max-width: 767px) { .sf-wd-products .products.wd-grid-g { row-gap: 26px !important; } html body .sf-wd-products .wd-product .product-image-link { padding: 8%; } }

/* ==========================================================================
   16 · COMPARE "from trunk to table"
   ========================================================================== */
.cmp { position: relative; aspect-ratio: 16 / 9; max-height: 640px; border-radius: 24px 24px 24px 90px; overflow: hidden; background: var(--surface); box-shadow: var(--sf-shadow); touch-action: pan-y; user-select: none; isolation: isolate; }
.cmp__after, .cmp__before { position: absolute; inset: 0; }
.cmp__after img, .cmp__before img { width: 100%; height: 100% !important; object-fit: cover; }
.cmp__before { clip-path: inset(0 0 0 calc(100% - var(--pos))); }
.cmp__label { position: absolute; top: 18px; padding: 8px 14px; border-radius: 999px; background: rgba(247,242,235,.92); color: var(--sf-ink); font-size: .85rem; font-weight: 600; }
.cmp__label--before { inset-inline-start: 18px; }
.cmp__label--after { inset-inline-end: 18px; }
.cmp__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--sf-paper); box-shadow: 0 0 0 1px rgba(42,28,21,.15); pointer-events: none; }
.cmp__handle span { position: absolute; top: 50%; left: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: var(--sf-paper); box-shadow: 0 12px 30px -10px rgba(42,28,21,.5); }
.cmp__handle span::before, .cmp__handle span::after { content: ""; position: absolute; top: 50%; width: 8px; height: 8px; border-top: 2px solid var(--sf-ink); border-left: 2px solid var(--sf-ink); }
.cmp__handle span::before { left: 15px; transform: translateY(-50%) rotate(-45deg); }
.cmp__handle span::after { right: 15px; transform: translateY(-50%) rotate(135deg); }
.cmp__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.cmp__range::-webkit-slider-thumb { -webkit-appearance: none; width: 60px; height: 100%; }
@media (max-width: 767px) { .cmp { aspect-ratio: 4 / 3; border-radius: 16px 16px 16px 56px; } .cmp__handle span { width: 44px; height: 44px; margin: -22px 0 0 -22px; } }

/* ==========================================================================
   17 · CONFIGURATOR "design your piece"
   ========================================================================== */
.cfg__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.cfg__form { display: grid; gap: 22px; }
.cfg__step { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.cfg__step legend { font-weight: 600; color: var(--on-ground); display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.cfg__step legend b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--on-ground); color: var(--ground); font-family: var(--f-latin); font-size: .8rem; font-weight: 700; }
.cfg__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.cfg__opt { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--on-ground-line); background: var(--surface); color: var(--on-ground); cursor: pointer; transition: border-color .25s, background .25s, color .25s, transform .3s var(--ease-out); font-size: .95rem; }
.cfg__opt:hover { border-color: var(--sf-gold); }
.cfg__opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.cfg__opt:has(input:checked) { background: var(--on-ground); color: var(--ground); border-color: var(--on-ground); }
.cfg__opt:has(input:focus-visible) { outline: 3px solid var(--sf-gold); outline-offset: 2px; }
.cfg__opt--swatch i { width: 18px; height: 18px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.cfg__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 6px; }
.cfg__note { font-size: .88rem; color: var(--on-ground-soft); }
.cfg__frame { aspect-ratio: 1; max-width: 560px; justify-self: center; width: 100%; }
.cfg__img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; transition: opacity .6s var(--ease-out); }
.cfg__img--next { opacity: 0; }
.cfg__frame.is-switching .cfg__img--next { opacity: 1; }
.cfg__caption { position: absolute; inset-inline-start: 18px; bottom: 18px; display: grid; gap: 2px; padding: 10px 16px; border-radius: 16px; background: rgba(247,242,235,.94); color: var(--sf-ink); }
.cfg__caption b { font-family: var(--f-display); font-size: 1.4rem; font-weight: 700; line-height: 1; }
.cfg__caption small { font-size: .78rem; color: var(--sf-ink-soft); }
@media (max-width: 900px) { .cfg__in { grid-template-columns: 1fr; } .cfg__preview { order: -1; } .cfg__frame { max-width: 100%; } }

/* ---------- resin depth: gloss layer that moves against the tilt ---------- */
[data-gloss] { position: relative; }
[data-gloss]::after { content: ""; position: absolute; inset: -20%; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .5s; background: radial-gradient(38% 30% at var(--gx, 50%) var(--gy, 40%), rgba(255,255,255,.55), rgba(255,255,255,.12) 45%, transparent 70%); mix-blend-mode: soft-light; transform: translate(calc(var(--gdx, 0) * 1px), calc(var(--gdy, 0) * 1px)); }
[data-gloss].is-hover::after { opacity: 1; }
@media (hover: none) { [data-gloss]::after { display: none; } }

/* ---------- tactile lens over gallery images ---------- */
.sf-lens { position: fixed; z-index: 90; width: 180px; height: 180px; margin: -90px 0 0 -90px; border-radius: 50%; pointer-events: none; opacity: 0; transform: scale(.6); transition: opacity .25s, transform .35s var(--ease-out); background-repeat: no-repeat; background-color: var(--sf-paper); box-shadow: 0 0 0 2px rgba(247,242,235,.95), 0 0 0 3px rgba(42,28,21,.15), 0 30px 50px -20px rgba(42,28,21,.55), inset 0 0 40px rgba(255,255,255,.25); }
.sf-lens.is-on { opacity: 1; transform: scale(1); }
.sf-lens::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 -18px 30px rgba(255,255,255,.25), inset 0 14px 20px rgba(0,0,0,.08); }
@media (hover: none), (pointer: coarse) { .sf-lens { display: none; } }

/* WoodMart widgets on our pages sit on the site grid (the Elementor container around them is zeroed) */
.sf-wd-cats, .sf-wd-products, .elementor-widget-wd_product_categories.sf-wd-cats, .elementor-widget-wd_products.sf-wd-products { width: 100% !important; max-width: var(--wrap) !important; margin-inline: auto !important; padding-inline: var(--gutter) !important; padding-bottom: clamp(56px, 7vw, 96px); }
/* a gold hairline opens the best sellers, like the gold rule in Legima */
.sf-wd-products::before { content: none; }


/* ── hero · pour mode: the resin pours as you scroll (sticky stage + canvas), a looping clip on phones ── */
.hero--pour { height: var(--pour-len, 320vh); padding: 0; }
.hero--pour .hero__pour { height: 100%; }
.hero--pour .hero__pstage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; background: #2A1C15; isolation: isolate; }
.hero__pposter, .hero__pcv { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; display: block; margin: 0; }
.hero__pposter { z-index: 0; }
.hero__pcv { z-index: 1; opacity: 0; transition: opacity .5s; }
.hero--pour.is-frames .hero__pcv { opacity: 1; }
.hero__pvideo { display: none; }
/* classic full-bleed treatment: the photo stays clean, one soft shadow rises from the floor, the copy sits low in paper */
.hero__pveil { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(to top, rgba(28,18,14,.78) 0%, rgba(28,18,14,.52) 30%, rgba(28,18,14,.18) 58%, rgba(28,18,14,0) 80%); }
.hero__pveil::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 160px; background: linear-gradient(to bottom, rgba(28,18,14,.28), rgba(28,18,14,0)); }
.hero--pour .hero__in { position: relative; z-index: 3; display: block; height: 100%; min-height: 0; padding-block: calc(var(--hdr-h) + 12px) clamp(72px, 10vh, 120px); }
.hero--pour .hero__copy { position: absolute; inset-inline-start: var(--gutter); bottom: clamp(72px, 10vh, 120px); max-width: 640px; gap: 16px; }
.hero--pour .eyebrow { color: var(--sf-gold-soft, #C9B890); }
.hero--pour .hero__title { color: var(--sf-paper); font-weight: 700; }
.hero--pour .hero__title em { color: var(--sf-gold-soft, #C9B890); }
.hero--pour .hero__lead { color: rgba(247,242,235,.86); }
.hero--pour .hero__facts { color: rgba(247,242,235,.78); border-top-color: rgba(247,242,235,.22); }
.hero--pour .hero__facts li::before { background: var(--sf-gold-soft, #C9B890); }
html body .hero--pour .hero__ctas .btn--sand { background: transparent !important; color: var(--sf-paper) !important; border: 1.5px solid rgba(247,242,235,.7) !important; }
html body .hero--pour .hero__ctas .btn--sand:hover { background: rgba(247,242,235,.12) !important; border-color: var(--sf-paper) !important; }
.hero__phud { position: absolute; z-index: 3; bottom: 30px; inset-inline-end: var(--gutter); display: flex; align-items: center; gap: 12px; font-family: var(--f-sans); font-size: .72rem; font-weight: 600; letter-spacing: .2em; color: rgba(247,242,235,.85); direction: ltr; }
.hero__phud b { font-weight: 600; min-width: 3.2em; }
.hero__pbar { width: 140px; height: 2px; background: rgba(255,255,255,.3); overflow: hidden; border-radius: 2px; }
.hero__pbar i { display: block; height: 100%; width: 0; background: var(--sf-gold-soft, #C9B890); }
.hero--pour .hero__scroll { display: none; }
@media (max-width: 767px) {
	.hero--pour { height: auto; }
	.hero--pour .hero__pstage { position: relative; height: auto; display: flex; flex-direction: column; background: var(--sf-paper); }
	.hero__pposter, .hero__pcv, .hero__pveil, .hero__phud { display: none; }
	.hero__pvideo { display: block; position: relative; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-top: var(--hdr-h); background: var(--sf-paper-2); }
	.hero--pour .hero__in { display: block; height: auto; padding-block: 22px 72px; }
	.hero--pour .hero__copy { position: static; max-width: none; gap: 14px; }
	.hero--pour .eyebrow { font-size: .68rem; letter-spacing: .16em; white-space: nowrap; color: var(--sf-gold); }
	.hero--pour .hero__title, .hero--pour .hero__title em { color: var(--sf-ink); }
	.hero--pour .hero__title em { color: var(--sf-wine); }
	.hero--pour .hero__lead { color: var(--sf-ink-soft); }
	.hero--pour .hero__facts { color: var(--sf-ink-soft); border-top-color: var(--sf-line); }
	.hero--pour .hero__facts li::before { background: var(--sf-gold); }
	html body .hero--pour .hero__ctas .btn--sand { background: var(--sf-sand) !important; color: var(--sf-ink) !important; border-color: transparent !important; }
}
.cfg__step[hidden] { display: none !important; }

/* ---------- classic pass: quiet surfaces, no glows, square geometry ---------- */
.chapter__glow, .hero__glow, .contact__pool, .cfg .chapter__glow, .chapter__glow-t, .chapter__glow-a, .chapter__glow-b { display: none !important; }
.chapter > .chapter__bg { mask-image: none !important; -webkit-mask-image: none !important; --fe: 0px; inset: 0 !important; }
.chapter[data-tone="paper2"] > .chapter__bg { background: var(--sf-paper-2); }
.h2 em::after, .h2 em::before { display: none !important; }
.h2 em { background: none !important; box-shadow: none !important; text-decoration: none !important; }
.wscard { border-radius: 2px; background: transparent; border: 0; border-top: 1px solid var(--on-ground-line); padding: 18px 0; padding-inline-end: 56px; box-shadow: none !important; }
.wscard:last-child { border-bottom: 1px solid var(--on-ground-line); }
.wscard:hover { transform: none; box-shadow: none !important; border-color: var(--on-ground-line); }
.wscard__go { border-radius: 2px; }
.ws__media .slab, .story__media .slab, .textc__media .slab, .custom__card, .cfg__frame, .ig__item, .story__float, .step__img, .faq__item, .form__field input, .form__field textarea, .form, .sf-inquiry { border-radius: 2px !important; }
.custom__card { box-shadow: none !important; border: 1px solid var(--sf-line); background: rgba(250,247,242,.96); }
.story__float { box-shadow: none !important; border: 4px solid var(--sf-paper); }
.cfg__opt > span, .cfg__opt label, .cfg__opt { border-radius: 2px !important; }
.cfg__frame { box-shadow: none !important; border: 1px solid var(--sf-line); }
.cfg__caption { border-radius: 2px; box-shadow: none !important; }
.form { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
.form__field input, .form__field textarea { border: 0 !important; border-bottom: 1px solid var(--sf-line) !important; background: transparent !important; padding-inline: 0 !important; }
.form__field input:focus, .form__field textarea:focus { border-bottom-color: var(--sf-ink) !important; box-shadow: none !important; outline: none; }
.ig__handle .h2, .ig__handle { font-size: clamp(2rem, 1.5rem + 2vw, 3.2rem); }
.ig__grid { gap: 10px; }
.ig__hover { background: rgba(42,28,21,.45); }
.step__n { border-radius: 2px; }
.steps::before { opacity: .5; }
.phero > .chapter__bg { background: var(--sf-paper-2) !important; }
.phero--img > .chapter__bg { background: var(--sf-espresso) !important; }
.faq__item { border: 0; border-top: 1px solid var(--sf-line); background: transparent; }

/* ---------- reels: four vertical clips from the workshop ---------- */
.reels__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.reel { position: relative; margin: 0; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 2px; background: var(--sf-paper-2); border: 1px solid var(--sf-line); }
.reel__video { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; display: block; }
.reel__name { position: absolute; inset-inline: 0; bottom: 0; padding: 40px 16px 14px; color: var(--sf-paper); font-family: var(--f-display); font-size: 1.6rem; font-weight: 700; line-height: 1; background: linear-gradient(to top, rgba(28,18,14,.7), transparent); pointer-events: none; }
.reel__sound { position: absolute; top: 12px; inset-inline-end: 12px; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(245,237,227,.9); color: var(--sf-ink); cursor: pointer; }
.reel__sound .sf-ico { width: 18px; height: 18px; }
.reel__sound .reel__sound-on { display: none; }
.reel__sound[aria-pressed="true"] .reel__sound-on { display: block; }
.reel__sound[aria-pressed="true"] .reel__sound-off { display: none; }
@media (max-width: 900px) { .reels__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .reel__name { font-size: 1.3rem; } }

/* classic pass, part two: larger workshop media, square detail cards, story photo on the paper */
.ws__media .slab { width: min(100%, 520px); max-height: none; }
[class*="__card"], .wsd__card, .wsd__item, .faq__item, .textc__media .slab { border-radius: 2px !important; box-shadow: none !important; }
.story__media .slab img, .story__media img.story__img { mix-blend-mode: multiply; background: var(--sf-paper-2); }
.story__float { background: var(--sf-paper-2); }
/* page hero: the photo must not bleed under the next chapter */
.phero { overflow: clip !important; }
.phero__media { inset: 0 !important; }

.hero__pposter-wrap { position: absolute; inset: 0; z-index: 0; display: block; }
.hero__pposter-wrap .hero__pposter { position: absolute; inset: 0; }
@media (max-width: 767px) { .hero__pposter-wrap { display: none; } }

/* ---------- orbit: turn the table with the scroll ---------- */
.orbit { padding: 0; }
.orbit__pin { height: var(--orbit-len, 220vh); }
.orbit__stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: clamp(24px, 4vw, 64px); }
.orbit__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.orbit__copy .btn { margin-top: 6px; }
.orbit__frame { position: relative; aspect-ratio: 16 / 10; width: 100%; overflow: hidden; border-radius: 0; background: transparent; }
.orbit__poster, .orbit__cv { mix-blend-mode: multiply; }
.orbit__poster, .orbit__cv { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; display: block; }
.orbit__cv { opacity: 0; transition: opacity .4s; }
.orbit__frame.is-frames .orbit__cv { opacity: 1; }
.orbit__hud { position: absolute; inset-inline-start: 16px; bottom: 14px; display: flex; align-items: center; gap: 10px; font-family: var(--f-sans); font-size: .72rem; font-weight: 600; letter-spacing: .18em; color: var(--sf-ink-soft); direction: ltr; }
.orbit__bar { width: 120px; height: 2px; background: rgba(42,28,21,.15); overflow: hidden; }
.orbit__bar i { display: block; height: 100%; width: 0; background: var(--sf-wine); }
.orbit__hud b { min-width: 3em; font-weight: 600; }
@media (max-width: 900px) {
	.orbit__pin { height: auto; }
	.orbit__stage { position: static; height: auto; grid-template-columns: 1fr; padding-block: clamp(48px, 10vw, 72px); gap: 20px; }
	.orbit__frame { order: -1; aspect-ratio: 4 / 3; }
	.orbit__hud { display: none; }
}

/* ---------- night: one dark photograph, slow zoom, three words ---------- */
.night { padding: 0; min-height: 100vh; min-height: 100svh; display: grid; align-items: end; color: var(--sf-paper); background: var(--sf-espresso); isolation: isolate; overflow: clip; }
.night > .chapter__bg { display: none; }
.night__media { position: absolute; inset: 0; z-index: 0; will-change: transform; transform: scale(1.12); transform-origin: 50% 60%; }
.night__media img { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; display: block; }
.night__veil { position: absolute; inset: 0; background: linear-gradient(to top, rgba(31,21,18,.88) 0%, rgba(31,21,18,.45) 40%, rgba(31,21,18,.15) 70%, rgba(31,21,18,.25) 100%); }
.night__in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; padding-block: clamp(80px, 14vh, 160px) clamp(64px, 10vh, 120px); }
.night__eyebrow { color: var(--sf-gold-soft); }
.night__title { font-family: var(--f-display); font-weight: 700; font-size: clamp(3.6rem, 2rem + 7vw, 9.5rem); line-height: .9; color: var(--sf-paper); max-width: 14ch; margin: 0; }
.night__title em { font-style: normal; color: var(--sf-gold-soft); }
html body .btn.btn--paper-ghost { background: transparent !important; color: var(--sf-paper) !important; border: 1px solid rgba(250,247,242,.7) !important; }
html body .btn.btn--paper-ghost:hover { background: var(--sf-paper) !important; color: var(--sf-ink) !important; }
@media (max-width: 767px) { .night { min-height: 82svh; } .night__title { font-size: clamp(3rem, 15vw, 4.4rem); } .night__media { transform: scale(1.06); } }

/* ---------- colour story: the table stays, the resin runs through six tones with the scroll ---------- */
.cs { padding: 0; }
.cs__pin { height: calc(var(--cs-n, 6) * 70vh + 100vh); }
.cs__stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(24px, 4vw, 64px); }
.cs__copy { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.cs__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cs__item { display: grid; grid-template-columns: 18px 1fr; gap: 0 14px; align-items: baseline; padding: 6px 0; opacity: .32; transition: opacity .5s, transform .5s; transform: translateX(6px); }
.cs__item.is-on { opacity: 1; transform: none; }
.cs__dot { width: 14px; height: 14px; border-radius: 50%; background: var(--sw); box-shadow: 0 0 0 3px var(--sf-paper), 0 0 0 4px var(--sw); align-self: center; }
.cs__name { font-family: var(--f-display); font-size: clamp(2.4rem, 1.6rem + 2.6vw, 4.4rem); font-weight: 700; line-height: 1; color: var(--sf-ink); }
.cs__line { grid-column: 2; font-size: .95rem; color: var(--sf-ink-soft); max-height: 0; overflow: hidden; transition: max-height .5s; }
.cs__item.is-on .cs__line { max-height: 3em; }
.cs__media { position: relative; aspect-ratio: 4 / 3; border-radius: 2px; overflow: hidden; background: var(--sf-paper-2); }
.cs__img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; opacity: 0; transition: opacity .7s var(--ease-out); }
.cs__img.is-on { opacity: 1; }
.cs__swatch { position: absolute; inset-inline-end: 18px; top: 18px; width: 28px; height: 28px; border-radius: 50%; background: var(--sw, #1E8C8C); box-shadow: 0 0 0 3px rgba(250,247,242,.9); transition: background .6s; }
@media (max-width: 900px) {
	.cs__pin { height: auto; }
	.cs__stage { position: static; height: auto; grid-template-columns: 1fr; padding-block: clamp(48px, 10vw, 72px); gap: 18px; }
	.cs__media { order: -1; }
	.cs__list { display: flex; flex-wrap: wrap; gap: 8px; }
	.cs__item { grid-template-columns: 12px 1fr; gap: 0 8px; padding: 8px 12px; border: 1px solid var(--sf-line); border-radius: 2px; opacity: 1; transform: none; cursor: pointer; }
	.cs__item.is-on { border-color: var(--sf-ink); }
	.cs__name { font-size: 1.3rem; }
	.cs__line { display: none; }
	.cs__dot { width: 10px; height: 10px; box-shadow: none; }
}
/* ---------- film strip: the studio photographs moving against the scroll ---------- */
.strip { padding-bottom: clamp(56px, 7vw, 96px); overflow: clip; }
.strip__head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: clamp(20px, 3vw, 36px); }
.strip__viewport { cursor: grab; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.strip__viewport.is-dragging { cursor: grabbing; }
.strip__track { display: flex; gap: clamp(14px, 2vw, 28px); padding-inline: var(--gutter); will-change: transform; width: max-content; }
.strip__item { flex: none; width: clamp(220px, 24vw, 360px); display: grid; gap: 12px; color: var(--sf-ink); text-decoration: none; transform: rotate(calc((var(--i) - 4) * .6deg)); transition: transform .5s var(--ease-out); }
.strip__item:hover { transform: rotate(0) translateY(-6px); }
.strip__img { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px; background: var(--sf-paper-2); }
.strip__img img { width: 100%; height: 100% !important; object-fit: cover; display: block; pointer-events: none; }
.strip__meta { display: flex; justify-content: space-between; gap: 10px; font-size: .92rem; }
.strip__meta b { font-weight: 500; } .strip__meta small { color: var(--sf-ink-soft); font-size: .88rem; }
/* ---------- video band ---------- */
.band { padding: 0; min-height: 62vh; display: grid; align-items: center; color: var(--sf-paper); background: var(--sf-espresso); isolation: isolate; overflow: clip; }
.band > .chapter__bg { display: none; }
.band__media { position: absolute; inset: 0; z-index: 0; }
.band__video { width: 100% !important; height: 100% !important; object-fit: cover; display: block; opacity: 0; transition: opacity 1s; filter: saturate(.85) contrast(1.05); }
.band__video.is-playing { opacity: 1; }
.band__grain { position: absolute; inset: 0; opacity: .12; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); background-size: 180px 180px; }
.band__veil { position: absolute; inset: 0; background: linear-gradient(to left, rgba(31,21,18,.78), rgba(31,21,18,.25) 60%, rgba(31,21,18,.1)); }
.band__in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding-block: clamp(64px, 10vh, 120px); }
.band__eyebrow { color: var(--sf-gold-soft); }
.band__line { font-family: var(--f-display); font-size: clamp(2.4rem, 1.6rem + 3.4vw, 5.2rem); font-weight: 700; line-height: .95; max-width: 18ch; margin: 0; color: var(--sf-paper); }
.band__cta { display: inline-flex; gap: 8px; align-items: center; color: var(--sf-paper); font-weight: 600; border-bottom: 1px solid rgba(250,247,242,.5); padding-bottom: 2px; }
/* ---------- kinetic word in the hero ---------- */
.hero__title--kinetic em { display: inline-block; position: relative; min-width: 2.2em; }
.hero__title--kinetic em .kw { display: inline-block; }
.hero__title--kinetic em .kw.is-out { animation: kwOut .45s var(--ease-out) forwards; }
.hero__title--kinetic em .kw.is-in { animation: kwIn .55s var(--ease-out) forwards; }
@keyframes kwOut { to { opacity: 0; transform: translateY(-.35em); filter: blur(4px); } }
@keyframes kwIn { from { opacity: 0; transform: translateY(.35em); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
/* ---------- custom cursor (desktop, fine pointer only) ---------- */
.sf-cursor { position: fixed; left: 0; top: 0; z-index: 9999; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 1.5px solid var(--sf-ink); pointer-events: none; mix-blend-mode: multiply; opacity: 0; transition: width .3s, height .3s, margin .3s, opacity .3s, background .3s, border-color .3s; display: grid; place-items: center; font: 600 .68rem/1 var(--f-sans); letter-spacing: .08em; color: var(--sf-paper); }
html.sf-has-cursor .sf-cursor { opacity: 1; }
.sf-cursor.is-link { width: 40px; height: 40px; margin: -20px 0 0 -20px; border-color: var(--sf-wine); }
.sf-cursor.is-drag, .sf-cursor.is-label { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: var(--sf-ink); border-color: var(--sf-ink); mix-blend-mode: normal; }
.sf-cursor.is-dark { border-color: var(--sf-paper); mix-blend-mode: normal; }
@media (hover: none), (pointer: coarse) { .sf-cursor { display: none !important; } }
/* custom card: room for the longer brand headline */
.custom__card { max-width: 640px; }
.custom__card .h2 { max-width: 18ch; font-size: clamp(2.4rem, 1.4rem + 3vw, 4.4rem); }
/* the sticky stage is its own stacking context: give it the paper so the multiplied frames dissolve into it */
.orbit__pin, .orbit__stage { background: var(--sf-paper); }

/* ---------- workshops landing: hero on the brand gradient, Shai's line portrait, chips, facts, sticky bar ---------- */
.lp { padding: 0; color: var(--sf-paper); isolation: isolate; overflow: clip; }
.lp > .chapter__bg { display: none; }
.lp__grad { position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, #4E0909 0%, #6E1A12 30%, #A9584A 62%, #D9B9A6 86%, var(--sf-paper) 100%); }
.lp__grad::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 20% 20%, rgba(255,255,255,.08), transparent 70%); }
.lp__in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(24px, 4vw, 64px); align-items: end; padding-block: calc(var(--hdr-h) + clamp(40px, 7vh, 80px)) clamp(28px, 4vw, 48px); }
.lp__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.lp__eyebrow { font-family: var(--f-sans); font-size: .9rem; font-weight: 600; color: var(--sf-gold-soft); letter-spacing: .02em; }
.lp__title { font-family: var(--f-display); font-weight: 700; font-size: clamp(3.4rem, 2rem + 5.6vw, 7.6rem); line-height: .92; color: var(--sf-paper); margin: 0; max-width: 14ch; }
.lp__title em { font-style: normal; color: var(--sf-gold-soft); }
.lp__lead { font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem); line-height: 1.55; max-width: 44ch; color: rgba(250,247,242,.92); margin: 0; }
.lp__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lp__chips li { font-family: var(--f-sans); font-size: .88rem; font-weight: 600; padding: 7px 12px; border-radius: 999px; background: rgba(250,247,242,.14); border: 1px solid rgba(250,247,242,.35); color: var(--sf-paper); }
.lp__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
html body .lp .btn--wine { background: var(--sf-paper) !important; color: var(--sf-wine) !important; border-color: var(--sf-paper) !important; }
html body .lp .btn--wine:hover { background: #fff !important; }
.lp__portrait { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lp__portrait-img { width: min(100%, 420px) !important; height: auto !important; filter: invert(1) brightness(1.1); opacity: .95; mix-blend-mode: screen; }
.lp__portrait figcaption { font-family: var(--f-sans); font-size: .9rem; color: rgba(250,247,242,.85); }
.lp__facts { list-style: none; margin: 0; padding: clamp(18px, 2.5vw, 28px) 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; position: relative; z-index: 1; border-top: 1px solid rgba(42,28,21,.14); margin-bottom: clamp(32px, 5vw, 64px); color: var(--sf-ink); }
.lp__facts li { display: grid; gap: 2px; }
.lp__facts b { font-family: var(--f-display); font-size: clamp(2.2rem, 1.6rem + 2vw, 3.6rem); font-weight: 700; line-height: 1; color: var(--sf-wine); }
.lp__facts span { font-size: .9rem; color: var(--sf-ink-soft); }
.lp__bar { position: fixed; inset: auto 0 0 0; z-index: 90; background: rgba(250,247,242,.96); backdrop-filter: blur(8px); border-top: 1px solid var(--sf-line); transform: translateY(110%); transition: transform .5s var(--ease-out); color: var(--sf-ink); }
.lp__bar.is-on { transform: none; }
.lp__bar-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 10px; }
.lp__bar-t { font-size: .95rem; color: var(--sf-ink-soft); max-width: 60ch; }
@media (max-width: 900px) {
	.lp__in { grid-template-columns: 1fr; gap: 14px; padding-top: calc(var(--hdr-h) + 24px); }
	.lp__portrait { order: -1; } .lp__portrait-img { width: min(58vw, 260px) !important; }
	.lp__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.lp__bar { display: none; }
	.lp__ctas .btn { flex: 1 1 100%; justify-content: center; }
}
/* ---------- four steps, in the rounded cream cards of the posts ---------- */
.steps4__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: s; }
.steps4__card { background: var(--sf-paper); border-radius: 16px; padding: 24px 22px 26px; display: grid; gap: 8px; align-content: start; border: 1px solid var(--sf-line); }
.steps4__n { font-family: var(--f-latin); font-size: .78rem; font-weight: 700; letter-spacing: .16em; color: var(--sf-gold); }
.steps4__t { font-family: var(--f-sans); font-size: 1.15rem; font-weight: 700; margin: 0; color: var(--sf-ink); }
.steps4__p { margin: 0; color: var(--sf-ink-soft); font-size: .95rem; line-height: 1.55; }
@media (max-width: 900px) { .steps4__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .steps4__card { padding: 18px 16px 20px; } }
@media (max-width: 480px) { .steps4__grid { grid-template-columns: 1fr; } }
/* ---------- Shai in the footer ---------- */
.sf-footer__shai { display: block; width: 120px; height: 120px; margin: 6px 0 10px; background: var(--sf-gold-soft); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; opacity: .9; }

/* ---------- rhythm: one vertical scale for every chapter, no double gaps ---------- */
:root { --sp-ch: clamp(72px, 9vw, 128px); }
.chapter { padding-block: var(--sp-ch); }
.sf-wd-cats, .elementor-widget-wd_product_categories.sf-wd-cats { padding-bottom: var(--sp-ch) !important; }
.strip { padding-block: var(--sp-ch); }
.orbit, .band, .night, .lp, .cs, .hero { padding-block: 0; }
.custom { padding-block: 0; }
.band { min-height: 56vh; }
.chead { margin-bottom: clamp(28px, 4vw, 44px); }
.shead { margin-bottom: clamp(24px, 3vw, 36px); }
.ig__grid { margin-top: 6px; }
@media (max-width: 767px) { :root { --sp-ch: clamp(52px, 12vw, 72px); } }

/* workshops hero without the illustration: one column, the copy keeps its measure */
.lp--noart .lp__in { grid-template-columns: minmax(0, 1fr); }
.lp--noart .lp__copy { max-width: 760px; }

/* workshops hero with the pour loop beside the copy (desktop) / under it (phone) */
.lp--film .lp__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; }
.lp__film { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px; background: var(--sf-paper-2); box-shadow: 0 30px 60px -28px rgba(36,24,18,.45); }
.lp__film video { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 767px) {
	.lp--film .lp__in { grid-template-columns: minmax(0, 1fr); }
	.lp__film { aspect-ratio: 16 / 10; box-shadow: 0 18px 30px -22px rgba(36,24,18,.5); }
}

/* planner (Orel 13.10): wood, shape, size and a free line */
.cfg__text { width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid var(--sf-line) !important; border-radius: 2px; background: var(--sf-paper) !important; font: inherit; font-size: 1rem; color: var(--sf-ink); box-shadow: none; }
textarea.cfg__text { min-height: 70px; resize: vertical; }
.cfg__text:focus { border-color: var(--sf-gold) !important; outline: none; }
.cfg__step--free legend small { display: block; margin-top: 4px; font-size: .9rem; font-weight: 400; color: var(--sf-ink-soft); }
.cfg__opt--swatch i.is-clear { background: repeating-linear-gradient(45deg, #fff 0 3px, #e8e2d8 3px 6px); }

/* home categories (Orel 13.10): the product photos sit on the site paper now, so the tile shows the whole piece on the same paper, no box, no crop */
.sf-wd-cats .wd-cat-thumb { background: transparent !important; aspect-ratio: 1 / 1; }
.sf-wd-cats .wd-cat-thumb img { object-fit: contain !important; padding: 6%; box-sizing: border-box; background: transparent !important; }
.sf-wd-cats .wd-cat:hover .wd-cat-thumb img { transform: scale(1.05); }
.sf-wd-cats .wd-cats { justify-content: center; }
/* the photos' paper is a hair warmer than the page (253 vs 250 red): "darken" keeps the darker channel, so the paper melts into the page and the piece is untouched */
.sf-wd-cats .wd-cat-thumb img { padding: 0 !important; mix-blend-mode: darken; }
.sf-wd-cats .wd-cat-image, .sf-wd-cats .wd-cat-thumb a { background: transparent !important; }
.sf-wd-cats .wd-cat-thumb { isolation: auto !important; }