/* ==========================================================================
   Core front-end styles, loaded by every theme after its own stylesheet.
   1. Block design settings (.bx wrappers written by the page builder)
   2. Entrance animations (blocks and grid elements)
   3. Continuous effects, glitch and text effects
   4. Gradients   5. Film grain   6. Page transitions   7. Cursors
   8. Theme preview bar   9. Page settings   10. Grid sections
   ========================================================================== */

/* 1. Block design ---------------------------------------------------------- */
.bx { position: relative; }
.bx.bx--bg { background-color: var(--bx-bg, transparent); display: flow-root; isolation: isolate; }
.bx.bx--img { background-image: var(--bx-img, none); background-size: cover; background-position: center; }
.bx--img::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, var(--bx-overlay, .35)); z-index: -1; pointer-events: none; }
.bx--fixed { background-attachment: fixed; }
@media (hover: none), (max-width: 899px) { .bx--fixed { background-attachment: scroll; } }
.bx--bg > .block, .bx--bg > * > .section, .bx--bg .newsletter { background-color: transparent; }

.bx--text-light {
  color: #F7F5F0;
  --color-fg: #F7F5F0; --color-fg-rgb: 247, 245, 240;
  --color-muted: rgba(247, 245, 240, .72); --color-border: rgba(247, 245, 240, .24);
  --color-button: #F7F5F0; --color-button-text: #141414;
}
.bx--text-dark {
  color: #141414;
  --color-fg: #141414; --color-fg-rgb: 20, 20, 20;
  --color-muted: rgba(20, 20, 20, .66); --color-border: rgba(20, 20, 20, .18);
  --color-button: #141414; --color-button-text: #F7F5F0;
}

/* Space above / below: replaces the block's own spacing. */
.bx[class*="bx--pt-"] > :first-child { margin-top: 0 !important; padding-top: 0 !important; }
.bx[class*="bx--pb-"] > :first-child { margin-bottom: 0 !important; padding-bottom: 0 !important; }
.bx--pt-none { padding-top: 0; }
.bx--pt-s { padding-top: calc(1.5rem * var(--space, 1)); }
.bx--pt-m { padding-top: calc(clamp(2rem, 4vw, 3.5rem) * var(--space, 1)); }
.bx--pt-l { padding-top: calc(clamp(3.5rem, 7vw, 6.5rem) * var(--space, 1)); }
.bx--pt-xl { padding-top: calc(clamp(5rem, 11vw, 10rem) * var(--space, 1)); }
.bx--pb-none { padding-bottom: 0; }
.bx--pb-s { padding-bottom: calc(1.5rem * var(--space, 1)); }
.bx--pb-m { padding-bottom: calc(clamp(2rem, 4vw, 3.5rem) * var(--space, 1)); }
.bx--pb-l { padding-bottom: calc(clamp(3.5rem, 7vw, 6.5rem) * var(--space, 1)); }
.bx--pb-xl { padding-bottom: calc(clamp(5rem, 11vw, 10rem) * var(--space, 1)); }

/* Content width */
.bx--w-narrow .page-width { max-width: calc(760px + 2 * clamp(1rem, 4vw, 3rem)); }
.bx--w-normal .page-width { max-width: calc(1080px + 2 * clamp(1rem, 4vw, 3rem)); }
.bx--w-wide .page-width { max-width: var(--page-width, 1440px); }
.bx--w-full .page-width { max-width: none; }

/* Alignment */
.bx--a-left > * { text-align: left; }
.bx--a-center > * { text-align: center; }
.bx--a-right > * { text-align: right; }
.bx--a-center .section-header, .bx--a-center .hero__actions, .bx--a-center .newsletter__inner { justify-content: center; justify-items: center; }
.bx--a-right .section-header, .bx--a-right .hero__actions { justify-content: flex-end; }
.bx--a-center .statement, .bx--a-center .hero__text, .bx--a-center .rte { margin-left: auto; margin-right: auto; }
.bx--a-left .statement, .bx--a-left .hero__text { margin-left: 0; margin-right: auto; }
.bx--a-right .statement, .bx--a-right .hero__text { margin-left: auto; margin-right: 0; }

/* Visibility */
@media (max-width: 749px) { .bx--only-desktop { display: none !important; } }
@media (min-width: 750px) { .bx--only-mobile { display: none !important; } }

/* 2. Entrance animations ----------------------------------------------------
   Blocks (.bx) and grid elements (.fe-el) with data-anim. Parameters come in as
   --fx-dur, --fx-delay, --fx-dist, --fx-ease and --fx-stagger (Fx::attributes). */
@property --fx-speed { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --fx-amt { syntax: "<number>"; inherits: false; initial-value: 1; }

/* A block with its own animation setting overrides the theme's per-element reveals. */
html .bx[data-anim]:not([data-anim-parts]) [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
:is(.bx, .fe-el)[data-anim] {
  --fx-t: var(--fx-dur, var(--anim-dur, .9s));
  --fx-e: var(--fx-ease, cubic-bezier(.2, .7, .2, 1));
  --fx-d: var(--fx-dist, var(--anim-dist, 48px));
}
.btb-js :is(.bx, .fe-el)[data-anim]:not([data-anim="none"]) {
  transition: opacity var(--fx-t) var(--fx-e) var(--fx-delay, 0s), transform var(--fx-t) var(--fx-e) var(--fx-delay, 0s),
    filter var(--fx-t) ease var(--fx-delay, 0s), clip-path var(--fx-t) var(--fx-e) var(--fx-delay, 0s);
}
.btb-js :is(.bx, .fe-el)[data-anim]:not([data-anim="none"], [data-anim="clip-up"], [data-anim="clip-left"], [data-anim="words"], [data-anim="letters"], [data-anim="type"], [data-anim="lines"], [data-anim="collide"], [data-anim="scramble"], [data-anim="reveal"], [data-anim-parts]):not(.is-in) { opacity: 0; }
.btb-js :is(.bx, .fe-el):is([data-anim="fade-up"], [data-anim="rise"]):not(.is-in) { transform: translateY(var(--fx-d)); }
.btb-js :is(.bx, .fe-el)[data-anim="drop"]:not(.is-in) { transform: translateY(calc(-1 * var(--fx-d))); }
.btb-js :is(.bx, .fe-el):is([data-anim="zoom"], [data-anim="scale"]):not(.is-in) { transform: scale(.92); }
.btb-js :is(.bx, .fe-el)[data-anim="slide-left"]:not(.is-in) { transform: translateX(calc(-1.3 * var(--fx-d))); }
.btb-js :is(.bx, .fe-el)[data-anim="slide-right"]:not(.is-in) { transform: translateX(calc(1.3 * var(--fx-d))); }
.btb-js :is(.bx, .fe-el)[data-anim="blur"]:not(.is-in) { filter: blur(14px); }
.btb-js :is(.bx, .fe-el)[data-anim="flip"] { transform-origin: 50% 100%; }
.btb-js :is(.bx, .fe-el)[data-anim="flip"]:not(.is-in) { transform: perspective(1000px) rotateX(75deg) translateY(calc(.5 * var(--fx-d))); }
.btb-js :is(.bx, .fe-el)[data-anim="rotate"] { transform-origin: 0 100%; }
.btb-js :is(.bx, .fe-el)[data-anim="rotate"]:not(.is-in) { transform: translateY(var(--fx-d)) rotate(-7deg); }
.btb-js :is(.bx, .fe-el)[data-anim="skew"]:not(.is-in) { transform: translateY(var(--fx-d)) skewY(6deg); }
/* Wipes clip the block's contents, not the block, so it is still seen arriving on screen. */
.btb-js :is(.bx, .fe-el)[data-anim]:is([data-anim="clip-up"], [data-anim="clip-left"], [data-anim="reveal"]) > * {
  clip-path: inset(-60px -60px -60px -60px); transition: clip-path var(--fx-t) var(--fx-e) var(--fx-delay, 0s); }
.btb-js :is(.bx, .fe-el)[data-anim="clip-up"]:not(.is-in) > * { clip-path: inset(100% -60px -60px -60px); }
.btb-js :is(.bx, .fe-el)[data-anim="clip-left"]:not(.is-in) > * { clip-path: inset(-60px 100% -60px -60px); }
.btb-js :is(.bx, .fe-el)[data-anim="reveal"]:not(.is-in) > * { clip-path: inset(-60px -60px 100% -60px); }
.btb-js :is(.bx, .fe-el)[data-anim].fx-done, .btb-js :is(.bx, .fe-el)[data-anim].fx-done > * { clip-path: none; }
.bx:is([data-anim="slide-left"], [data-anim="slide-right"]) { overflow-x: clip; }
.btb-js :is(.bx, .fe-el)[data-anim="focus"]:not(.is-in):not([data-anim-parts]) { filter: blur(12px); transform: scale(1.08); }
.btb-js :is(.bx, .fe-el)[data-anim="tilt-up"] { transform-origin: 50% 100%; }
.btb-js :is(.bx, .fe-el)[data-anim="tilt-up"]:not(.is-in):not([data-anim-parts]) { transform: perspective(900px) rotateX(-24deg) translateY(var(--fx-d)); }
.btb-js :is(.bx, .fe-el)[data-anim="tilt-down"] { transform-origin: 50% 0; }
.btb-js :is(.bx, .fe-el)[data-anim="tilt-down"]:not(.is-in):not([data-anim-parts]) { transform: perspective(900px) rotateX(24deg) translateY(calc(-1 * var(--fx-d))); }
/* Reveal: the block opens from the bottom while its pictures settle from a slight zoom. */

.btb-js [data-anim="reveal"] :is(img, video) { transition: transform calc(var(--fx-t) * 1.6) var(--fx-e) var(--fx-delay, 0s); }
.btb-js [data-anim="reveal"]:not(.is-in) :is(img, video) { transform: scale(1.3); }

/* Each part in turn: the block stays put and its parts (.fx-part, set by the script) animate one after another. */
[data-anim-part="fade-up"], [data-anim-part="tilt-up"] { --fx-from: translateY(var(--fx-d)); }
[data-anim-part="drop"], [data-anim-part="tilt-down"] { --fx-from: translateY(calc(-1 * var(--fx-d))); }
[data-anim-part="zoom"] { --fx-from: scale(.92); }
[data-anim-part="slide-left"] { --fx-from: translateX(calc(-1.3 * var(--fx-d))); }
[data-anim-part="slide-right"] { --fx-from: translateX(calc(1.3 * var(--fx-d))); }
[data-anim-part="focus"] { --fx-from: scale(1.08); --fx-filter: blur(12px); }
[data-anim-part="blur"] { --fx-filter: blur(14px); }
[data-anim-part="flip"] { --fx-from: perspective(1000px) rotateX(75deg) translateY(calc(.5 * var(--fx-d))); }
[data-anim-part="rotate"] { --fx-from: translateY(var(--fx-d)) rotate(-7deg); }
[data-anim-part="skew"] { --fx-from: translateY(var(--fx-d)) skewY(6deg); }
[data-anim-part="tilt-up"] { --fx-from: perspective(900px) rotateX(-24deg) translateY(var(--fx-d)); }
[data-anim-part="tilt-down"] { --fx-from: perspective(900px) rotateX(24deg) translateY(calc(-1 * var(--fx-d))); }
.btb-js :is(.bx, .fe-el)[data-anim][data-anim-parts]:not(.fx-never) { transform: none; filter: none; transition: none; }
.btb-js [data-anim-parts] .fx-part {
  transition: opacity var(--fx-t) var(--fx-e), transform var(--fx-t) var(--fx-e), filter var(--fx-t) ease;
  transition-delay: calc(var(--fx-delay, 0s) + var(--i, 0) * var(--fx-parts-gap, 120ms));
}
.btb-js [data-anim-parts]:not(.is-in) .fx-part { opacity: 0; transform: var(--fx-from, none); filter: var(--fx-filter, none); }

/* Lines rise from a mask; words collide from both sides; letters decode. */
.fx-wm { display: inline-block; overflow: clip; overflow-clip-margin: .12em; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.fx-wm > .fx-wi { display: inline-block; }
[data-anim="lines"].fx-done .fx-wm { overflow: visible; }
.btb-js [data-anim="lines"] .fx-wi { transition: transform var(--fx-t) var(--fx-e); transition-delay: calc(var(--fx-delay, 0s) + var(--line, 0) * var(--fx-stagger, 45ms) * 2.5); }
.btb-js [data-anim="lines"]:not(.is-in) .fx-wi { transform: translateY(110%); }
.btb-js [data-anim="collide"] .fx-w { transition: opacity var(--fx-t) var(--fx-e), transform var(--fx-t) var(--fx-e); transition-delay: calc(var(--fx-delay, 0s) + var(--i, 0) * var(--fx-stagger, 45ms) * .5); }
.btb-js [data-anim="collide"]:not(.is-in) .fx-w { opacity: 0; transform: translateX(calc(-2 * var(--fx-d))) rotate(-4deg); }
.btb-js [data-anim="collide"]:not(.is-in) .fx-w:nth-child(even of .fx-w) { transform: translateX(calc(2 * var(--fx-d))) rotate(4deg); }
.btb-js [data-anim="scramble"]:not(.is-in) .fx-l { opacity: 0; }

/* Words, letters and typewriter: the script wraps the text, the wrapper stays visible. */
.fx-w, .fx-l { display: inline-block; }
.fx-l { white-space: pre; }
.fx-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.btb-js [data-anim="words"] .fx-w, .btb-js [data-anim="letters"] .fx-l {
  transition: opacity var(--fx-t) var(--fx-e), transform var(--fx-t) var(--fx-e), filter var(--fx-t) ease;
  transition-delay: calc(var(--fx-delay, 0s) + var(--i, 0) * var(--fx-stagger, 45ms));
}
.btb-js [data-anim="words"]:not(.is-in) .fx-w { opacity: 0; transform: translateY(calc(.6 * var(--fx-d))); filter: blur(6px); }
.btb-js [data-anim="letters"]:not(.is-in) .fx-l { opacity: 0; transform: translateY(calc(.4 * var(--fx-d))) rotate(8deg); }
.btb-js [data-anim="type"] .fx-l { transition: opacity 0s linear; transition-delay: calc(var(--fx-delay, 0s) + var(--i, 0) * var(--fx-stagger, 45ms)); }
.btb-js [data-anim="type"]:not(.is-in) .fx-l { opacity: 0; }
.fx-caret { display: inline-block; width: .08em; min-width: 2px; height: 1em; margin-left: .05em; vertical-align: -.12em; background: currentColor; animation: fx-blink .8s steps(1) infinite; }
@keyframes fx-blink { 50% { opacity: 0; } }

/* Grid elements left on "Site default" follow Site styles → Animations. */
body.anim-fade .fe-el[data-anim="inherit"]:not(.is-in), body.anim-clip .fe-el[data-anim="inherit"]:not(.is-in) { transform: none; }
.btb-js .fe-el[data-anim="inherit"]:not(.is-in) { transform: translateY(var(--anim-dist, 28px)); }
body.anim-scale .fe-el[data-anim="inherit"]:not(.is-in) { transform: scale(.94); }
body.anim-blur .fe-el[data-anim="inherit"]:not(.is-in) { transform: none; filter: blur(12px); }
body.anim-none .fe-el[data-anim="inherit"] { opacity: 1 !important; transform: none !important; }

/* 3. Continuous effects -----------------------------------------------------
   .fx-loop elements animate while on screen (.fx-live, set by the script) or
   while hovered (.fx-loop--hover). They use the separate translate / rotate /
   scale properties, so they combine with entrance animations and rotation. */
.fx-loop { --fx-s: var(--fx-speed); --fx-a: var(--fx-amt); }
.fx-loop-float:is(.fx-live:not(.fx-loop--hover), .fx-loop--hover:hover) { animation: fx-float calc(3s / var(--fx-s)) ease-in-out infinite alternate; }
.fx-loop-bounce:is(.fx-live:not(.fx-loop--hover), .fx-loop--hover:hover) { animation: fx-bounce calc(1.4s / var(--fx-s)) infinite; }
.fx-loop-pulse:is(.fx-live:not(.fx-loop--hover), .fx-loop--hover:hover) { animation: fx-pulse calc(1.2s / var(--fx-s)) ease-in-out infinite alternate; }
.fx-loop-breathe:is(.fx-live:not(.fx-loop--hover), .fx-loop--hover:hover) { animation: fx-breathe calc(2.4s / var(--fx-s)) ease-in-out infinite alternate; }
.fx-loop-sway:is(.fx-live:not(.fx-loop--hover), .fx-loop--hover:hover) { animation: fx-sway calc(3.2s / var(--fx-s)) ease-in-out infinite alternate; }
.fx-loop-wobble:is(.fx-live:not(.fx-loop--hover), .fx-loop--hover:hover) { animation: fx-wobble calc(1.8s / var(--fx-s)) ease-in-out infinite; }
.fx-loop-shake:is(.fx-live:not(.fx-loop--hover), .fx-loop--hover:hover) { animation: fx-shake calc(.5s / var(--fx-s)) linear infinite; }
.fx-loop-spin:is(.fx-live:not(.fx-loop--hover), .fx-loop--hover:hover) { animation: fx-spin calc(8s / var(--fx-s)) linear infinite; }
.fx-loop-flicker:is(.fx-live:not(.fx-loop--hover), .fx-loop--hover:hover) { animation: fx-flicker calc(3s / var(--fx-s)) linear infinite; }
.fx-loop-hue:is(.fx-live:not(.fx-loop--hover), .fx-loop--hover:hover) { animation: fx-hue calc(6s / var(--fx-s)) linear infinite; }
@keyframes fx-float { from { translate: 0 0; } to { translate: 0 calc(-14px * var(--fx-a)); } }
@keyframes fx-bounce {
  0%, 100% { translate: 0 0; animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  45% { translate: 0 calc(-26px * var(--fx-a)); animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  60% { translate: 0 0; } 70% { translate: 0 calc(-6px * var(--fx-a)); } 80% { translate: 0 0; }
}
@keyframes fx-pulse { from { scale: 1; } to { scale: calc(1 + .06 * var(--fx-a)); } }
@keyframes fx-breathe { from { opacity: 1; } to { opacity: max(.05, calc(1 - .55 * var(--fx-a))); } }
@keyframes fx-sway { from { rotate: calc(-4deg * var(--fx-a)); } to { rotate: calc(4deg * var(--fx-a)); } }
@keyframes fx-wobble {
  0%, 100% { rotate: 0deg; translate: 0 0; } 15% { rotate: calc(-5deg * var(--fx-a)); translate: calc(-8px * var(--fx-a)) 0; }
  30% { rotate: calc(3deg * var(--fx-a)); translate: calc(6px * var(--fx-a)) 0; } 45% { rotate: calc(-3deg * var(--fx-a)); translate: calc(-4px * var(--fx-a)) 0; }
  60% { rotate: calc(2deg * var(--fx-a)); translate: calc(2px * var(--fx-a)) 0; } 75% { rotate: calc(-1deg * var(--fx-a)); translate: 0 0; }
}
@keyframes fx-shake {
  0%, 100% { translate: 0 0; } 20% { translate: calc(-3px * var(--fx-a)) calc(1px * var(--fx-a)); } 40% { translate: calc(3px * var(--fx-a)) calc(-1px * var(--fx-a)); }
  60% { translate: calc(-2px * var(--fx-a)) calc(-1px * var(--fx-a)); } 80% { translate: calc(2px * var(--fx-a)) calc(1px * var(--fx-a)); }
}
@keyframes fx-spin { to { rotate: 360deg; } }
@keyframes fx-flicker {
  0%, 7%, 9%, 12%, 14%, 49%, 52%, 80%, 82%, 100% { opacity: 1; }
  8%, 13%, 50.5%, 81% { opacity: max(0, calc(1 - .75 * var(--fx-a))); }
}
@keyframes fx-hue { to { filter: hue-rotate(360deg); } }

/* 3D tilt (the script sets --tilt-x / --tilt-y while the pointer is over it) */
.btb-js :is(.bx, .fe-el).fx-loop-tilt.is-in, .fx-loop-tilt:not([data-anim]) {
  transform: perspective(900px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg));
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.btb-js :is(.bx, .fe-el).fx-loop-tilt.fx-tilting { transition: transform .12s ease-out; }

/* Glitch: the script switches .fx-glitching on in short bursts and sets the
   offsets; .fx-glitch-layer copies show displaced, tinted slices. */
.fx-loop-glitch, [data-anim="glitch"] { position: relative; }
.fx-glitching {
  translate: var(--gx, 0) var(--gy, 0);
  filter: drop-shadow(var(--gs, 0) 0 0 var(--glitch-c1, #ff2a6d)) drop-shadow(calc(-1 * var(--gs, 0)) 0 0 var(--glitch-c2, #05d9e8));
}
.fx-glitch--no-split.fx-glitching { filter: none; }
.fx-glitch-layer { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; clip-path: var(--gclip, inset(0 0 100% 0)); translate: var(--lx, 0) 0; }
.fx-glitch-layer > * { margin: 0 !important; }
.fx-glitch-layer--1 { filter: drop-shadow(3px 0 0 var(--glitch-c1, #ff2a6d)); }
.fx-glitch-layer--2 { filter: drop-shadow(-3px 0 0 var(--glitch-c2, #05d9e8)); }
.fx-glitch--no-split .fx-glitch-layer { filter: none; }

/* Text effects from the editor's text toolbar */
.fx-glitch { position: relative; display: inline-block; }
.fx-glitch::before, .fx-glitch::after { content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; white-space: pre; }
.fx-glitch::before { color: var(--glitch-c1, #ff2a6d); animation: fx-text-glitch-1 2.6s steps(1) infinite; }
.fx-glitch::after { color: var(--glitch-c2, #05d9e8); animation: fx-text-glitch-2 2.6s steps(1) infinite; }
@keyframes fx-text-glitch-1 {
  0%, 9%, 13%, 59%, 63%, 100% { clip-path: inset(0 0 100% 0); translate: 0 0; }
  10% { clip-path: inset(12% 0 60% 0); translate: -.06em 0; } 11% { clip-path: inset(55% 0 20% 0); translate: .05em 0; } 12% { clip-path: inset(30% 0 40% 0); translate: -.03em 0; }
  60% { clip-path: inset(70% 0 5% 0); translate: .07em 0; } 61% { clip-path: inset(8% 0 75% 0); translate: -.05em 0; } 62% { clip-path: inset(40% 0 35% 0); translate: .03em 0; }
}
@keyframes fx-text-glitch-2 {
  0%, 9%, 13%, 59%, 63%, 100% { clip-path: inset(0 0 100% 0); translate: 0 0; }
  10% { clip-path: inset(62% 0 10% 0); translate: .06em 0; } 11% { clip-path: inset(20% 0 55% 0); translate: -.05em 0; } 12% { clip-path: inset(45% 0 30% 0); translate: .04em 0; }
  60% { clip-path: inset(15% 0 65% 0); translate: -.07em 0; } 61% { clip-path: inset(50% 0 25% 0); translate: .05em 0; } 62% { clip-path: inset(80% 0 2% 0); translate: -.03em 0; }
}
.fx-gradient-text { background: var(--grad-a); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.fx-gradient-text.fx-gradient-b { background-image: var(--grad-b); }
.fx-shimmer {
  background: linear-gradient(110deg, currentColor 38%, var(--accent, var(--color-accent, #fff)) 50%, currentColor 62%) 0 0 / 250% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: fx-shimmer 3.2s linear infinite;
}
@keyframes fx-shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }
.fx-wave .fx-l { animation: fx-wave 1.6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -90ms); }
@keyframes fx-wave { 0%, 100% { translate: 0 0; } 50% { translate: 0 -.18em; } }
.fx-underline { background: linear-gradient(currentColor, currentColor) 0 100% / 0 .08em no-repeat; transition: background-size .9s cubic-bezier(.65, 0, .35, 1) .2s; padding-bottom: .04em; }
.fx-underline.is-in, .btb-editing .fx-underline { background-size: 100% .08em; }
.fx-neon { animation: fx-neon 4s linear infinite; text-shadow: 0 0 .08em currentColor, 0 0 .4em var(--accent, var(--color-accent, currentColor)); }
@keyframes fx-neon { 0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; } 20%, 24%, 55% { opacity: .35; text-shadow: none; } }
.fx-outline { -webkit-text-stroke: max(1px, .025em) currentColor; -webkit-text-fill-color: transparent; }

/* 4. Gradients ----------------------------------------------------------------- */
.bx.bx--grad { background-image: var(--bx-grad); }
.bx--grad-move, .fe-bg-move > .fe-el__inner, body.grad-move :is(.bx--grad, .fe-bg-gradient > .fe-el__inner, .fx-tg :is(h1, h2, h3, h4, h5, h6, .h0), .fx-gradient-text) {
  background-size: 220% 220%; animation: fx-grad-move 14s ease-in-out infinite alternate;
}
@keyframes fx-grad-move { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
.bx.fx-tg :is(h1, h2, h3, h4, h5, h6, .h0), .fe-el.fx-tg :is(h1, h2, h3, h4, h5, h6, .h0, p, li, blockquote, figcaption, .fe-buy__price),
body:is(.grad-headings-a, .grad-headings-b) :is(h1, h2, .h0) {
  background-image: var(--fx-tg, var(--grad-a)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
body.grad-headings-b { --fx-tg: var(--grad-b); }
body.grad-headings-a { --fx-tg: var(--grad-a); }
body:is(.grad-buttons-a, .grad-buttons-b) .button:not(.button--secondary, .button--light, .button--text, .button--outline) {
  background-image: var(--grad-btn); background-color: transparent; border-color: transparent; color: #fff; background-size: 160% 100%; background-position: 0 0; transition: background-position .5s ease, transform .3s;
}
body:is(.grad-buttons-a, .grad-buttons-b) .button:not(.button--secondary, .button--light, .button--text, .button--outline):hover { background-position: 100% 0; color: #fff; }
body.grad-buttons-a { --grad-btn: var(--grad-a); } body.grad-buttons-b { --grad-btn: var(--grad-b); }
body.grad-page-a { background-image: var(--grad-a); background-attachment: fixed; }
body.grad-page-b { background-image: var(--grad-b); background-attachment: fixed; }

/* 5. Film grain ------------------------------------------------------------------ */
@keyframes fx-grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}
body.fx-grain-on-page::after {
  content: ""; position: fixed; inset: -50%; z-index: 9990; pointer-events: none;
  background-image: var(--grain-tile); background-size: var(--grain-size); opacity: var(--grain-o, .08); mix-blend-mode: var(--grain-blend, normal);
}
body.fx-grain-anim.fx-grain-on-page::after { animation: fx-grain 1.2s steps(5) infinite; }
/* Live grain: a canvas replaces the pattern once the script has drawn it. */
.fx-grain-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 9990; pointer-events: none; image-rendering: pixelated; }
body.fx-grain-live.fx-grain-on-page:has(.fx-grain-canvas)::after { display: none; }
body.fx-grain-on-background { background-image: var(--grain-img); background-size: var(--grain-size); background-attachment: fixed; background-blend-mode: var(--grain-blend, normal); }
body.fx-grain-on-background:is(.grad-page-a, .grad-page-b) { background-image: var(--grain-img), var(--grad-page); background-size: var(--grain-size), cover; }
body.grad-page-a { --grad-page: var(--grad-a); } body.grad-page-b { --grad-page: var(--grad-b); }
body.fx-grain-on-images :is(img:not([src$=".svg"]), video) { filter: url(#btb-grain); }
.fx-grain-el, body.fx-grain-on-sections :is(.bx--bg, .bx--themed, .fe-themed > .fe-el__inner, .fe-el:is(.fe-bg-card, .fe-bg-accent, .fe-bg-heading, .fe-bg-custom, .fe-bg-gradient) > .fe-el__inner) { isolation: isolate; }
.fx-grain-el::after, body.fx-grain-on-sections :is(.bx--bg, .bx--themed, .fe-themed > .fe-el__inner, .fe-el:is(.fe-bg-card, .fe-bg-accent, .fe-bg-heading, .fe-bg-custom, .fe-bg-gradient) > .fe-el__inner)::after {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit;
  background-image: var(--grain-tile); background-size: var(--grain-size); opacity: var(--grain-o, .08); mix-blend-mode: var(--grain-blend, normal);
}
.fe-el.fx-grain-el::after { border-radius: var(--el-radius, 0); }
.fx-grain-el--subtle::after { opacity: calc(.07 * var(--grain-k, 1)); }
.fx-grain-el--medium::after { opacity: calc(.12 * var(--grain-k, 1)); }
.fx-grain-el--strong::after { opacity: calc(.18 * var(--grain-k, 1)); }
.fx-grain-el--heavy::after { opacity: calc(.28 * var(--grain-k, 1)); }
body.fx-grain-anim :is(.fx-grain-el, .bx--bg, .bx--themed, .fe-el__inner)::after { animation: fx-grain-pos .9s steps(4) infinite; }
@keyframes fx-grain-pos { 0% { background-position: 0 0; } 25% { background-position: -37px 51px; } 50% { background-position: 63px -19px; } 75% { background-position: -71px -43px; } 100% { background-position: 0 0; } }

/* 6. Page transitions and progress ------------------------------------------------ */
body.fx-transition-fade, body.fx-transition-slide { animation: fx-page-in .55s cubic-bezier(.2, .7, .2, 1) both; }
body.fx-transition-slide { animation-name: fx-page-rise; }
body.fx-transition-fade.fx-leaving, body.fx-transition-slide.fx-leaving { opacity: 0; transition: opacity .28s ease, transform .28s ease; }
body.fx-transition-slide.fx-leaving { transform: translateY(-14px); }
@keyframes fx-page-in { from { opacity: 0; } }
@keyframes fx-page-rise { from { opacity: 0; transform: translateY(18px); } }
body.fx-transition-wipe::before {
  content: ""; position: fixed; inset: 0; z-index: 9995; pointer-events: none; background: var(--color-accent, var(--accent, #111));
  transform-origin: 50% 0; animation: fx-wipe-out .7s cubic-bezier(.76, 0, .24, 1) .05s both;
}
body.fx-transition-wipe.fx-leaving::before { transform-origin: 50% 100%; animation: fx-wipe-in .42s cubic-bezier(.76, 0, .24, 1) both; }
@keyframes fx-wipe-out { from { transform: scaleY(1); } to { transform: scaleY(0); } }
@keyframes fx-wipe-in { from { transform: scaleY(0); } to { transform: scaleY(1); } }
/* Curtain: a panel rises over the page when leaving and carries on up and away on the next page. */
body.fx-transition-curtain::before {
  content: ""; position: fixed; inset: 0; z-index: 9995; pointer-events: none; background: var(--color-fg, #141414);
  animation: fx-curtain-out .75s cubic-bezier(.76, 0, .24, 1) .05s both;
}
body.fx-transition-curtain.fx-leaving::before { animation: fx-curtain-in .5s cubic-bezier(.76, 0, .24, 1) both; }
@keyframes fx-curtain-out { from { transform: translateY(0); border-radius: 0; } to { transform: translateY(-100%); border-radius: 0 0 50% 50% / 0 0 12vh 12vh; } }
@keyframes fx-curtain-in { from { transform: translateY(100%); border-radius: 50% 50% 0 0 / 12vh 12vh 0 0; } to { transform: translateY(0); border-radius: 0; } }
/* Pixels: squares cover the page at random and clear away the same way (drawn by frontend.js). */
body.fx-transition-pixels::before { content: ""; position: fixed; inset: 0; z-index: 9995; pointer-events: none; background: var(--color-fg, #141414); animation: fx-page-in .3s ease 1.2s reverse both; }
body.fx-transition-pixels.fx-pt-ready::before { display: none; }
.fx-pt { position: fixed; inset: 0; z-index: 9996; pointer-events: none; display: grid; grid-template-columns: repeat(var(--pt-cols, 12), 1fr); grid-auto-rows: 1fr; }
.fx-pt i { background: var(--color-fg, #141414); opacity: var(--pt-o, 0); transition: opacity .12s steps(2); transition-delay: var(--pt-d, 0ms); }
/* Lean with scroll speed */
body.fx-skew main > * { transform-origin: 50% 50%; }
body.fx-transition-glitch { animation: fx-page-glitch .5s steps(1) both; }
body.fx-transition-glitch.fx-leaving { animation: fx-page-glitch-out .34s steps(1) both; }
@keyframes fx-page-glitch {
  0% { opacity: 0; } 15% { opacity: 1; clip-path: inset(20% 0 50% 0); translate: -12px 0; filter: drop-shadow(6px 0 0 var(--glitch-c1)) drop-shadow(-6px 0 0 var(--glitch-c2)); }
  30% { clip-path: inset(60% 0 10% 0); translate: 10px 0; } 45% { clip-path: inset(5% 0 70% 0); translate: -6px 0; }
  60% { clip-path: none; translate: 4px 0; filter: drop-shadow(3px 0 0 var(--glitch-c1)) drop-shadow(-3px 0 0 var(--glitch-c2)); } 80%, 100% { clip-path: none; translate: 0 0; filter: none; }
}
@keyframes fx-page-glitch-out {
  0% { translate: 0 0; } 20% { translate: 10px 0; filter: drop-shadow(5px 0 0 var(--glitch-c1)) drop-shadow(-5px 0 0 var(--glitch-c2)); clip-path: inset(10% 0 40% 0); }
  45% { translate: -14px 0; clip-path: inset(50% 0 5% 0); } 70% { translate: 6px 0; clip-path: inset(30% 0 30% 0); opacity: .6; } 100% { opacity: 0; clip-path: inset(50% 0 50% 0); }
}
.fx-progress-bar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 9996; pointer-events: none; background: var(--color-accent, var(--accent, currentColor)); transform-origin: 0 50%; transform: scaleX(var(--fx-progress, 0)); }

/* 7. Cursors (mouse and trackpad only; the script adds html.fx-cursor-on) -------- */
.fx-cursor { position: fixed; top: 0; left: 0; z-index: 9997; pointer-events: none; will-change: transform; --c: var(--cursor-colour, #fff); --s: var(--cursor-size, 34px); }
.fx-cursor.is-hidden, html:not(.fx-cursor-on) .fx-cursor { opacity: 0; }
body.fx-cursor-invert .fx-cursor:not(.fx-cursor--spotlight) { mix-blend-mode: difference; }
html.fx-cursor-on body.fx-cursor-hide, html.fx-cursor-on body.fx-cursor-hide *:not(input, textarea, select, [contenteditable]) { cursor: none !important; }
.fx-cursor__shape { position: absolute; left: 0; top: 0; border-radius: 50%; transform: translate(-50%, -50%); transition: width .3s cubic-bezier(.2, .7, .2, 1), height .3s cubic-bezier(.2, .7, .2, 1), background-color .3s, border-color .3s, border-radius .3s, opacity .3s, rotate .3s; }
.fx-cursor--dot .fx-cursor__shape { width: max(6px, calc(var(--s) * .3)); height: max(6px, calc(var(--s) * .3)); background: var(--c); }
.fx-cursor--dot.is-hover .fx-cursor__shape { width: calc(var(--s) * 1.6); height: calc(var(--s) * 1.6); }
.fx-cursor--ring .fx-cursor__shape, .fx-cursor--ring-ring .fx-cursor__shape { width: var(--s); height: var(--s); border: 1.5px solid var(--c); }
.fx-cursor--ring.is-hover .fx-cursor__shape, .fx-cursor--ring-ring.is-hover .fx-cursor__shape { width: calc(var(--s) * 1.7); height: calc(var(--s) * 1.7); background: color-mix(in srgb, var(--c) 18%, transparent); }
.fx-cursor--ring-dot .fx-cursor__shape { width: 6px; height: 6px; background: var(--c); }
.fx-cursor--ring-dot.is-hover .fx-cursor__shape { opacity: 0; }
.fx-cursor--blend .fx-cursor__shape { width: var(--s); height: var(--s); background: var(--c); }
.fx-cursor--blend.is-hover .fx-cursor__shape { width: calc(var(--s) * 2.6); height: calc(var(--s) * 2.6); }
.fx-cursor--blend { mix-blend-mode: difference; }
.fx-cursor--square .fx-cursor__shape { width: var(--s); height: var(--s); border: 1.5px solid var(--c); border-radius: 2px; rotate: 45deg; }
.fx-cursor--square.is-hover .fx-cursor__shape { rotate: 0deg; border-radius: 4px; }
.fx-cursor--square.is-snapped .fx-cursor__shape { transition: width .25s, height .25s, rotate .25s, border-radius .25s; }
.fx-cursor--crosshair .fx-cursor__shape { width: 10px; height: 10px; border: 1.5px solid var(--c); }
.fx-cursor--crosshair.is-hover .fx-cursor__shape { width: var(--s); height: var(--s); }
.fx-cursor-line { position: fixed; z-index: 9997; pointer-events: none; background: var(--cursor-colour, #fff); opacity: .45; will-change: transform; }
.fx-cursor-line--h { left: 0; top: 0; width: 100vw; height: 1px; }
.fx-cursor-line--v { left: 0; top: 0; width: 1px; height: 100vh; }
body.fx-cursor-invert .fx-cursor-line { mix-blend-mode: difference; }
.fx-cursor--trail .fx-cursor__shape { width: calc(var(--s) * .32 * var(--k, 1)); height: calc(var(--s) * .32 * var(--k, 1)); background: var(--c); opacity: var(--k, 1); transition: none; }
.fx-cursor--label .fx-cursor__shape { width: 10px; height: 10px; background: var(--c); display: grid; place-items: center; overflow: hidden; }
.fx-cursor--label .fx-cursor__text { font: 600 12px/1 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #000; opacity: 0; transition: opacity .2s; white-space: nowrap; }
.fx-cursor--label.is-label .fx-cursor__shape { width: calc(var(--s) * 2.3); height: calc(var(--s) * 2.3); }
.fx-cursor--label.is-label .fx-cursor__text { opacity: 1; transition-delay: .1s; }
.fx-cursor--label.is-hover:not(.is-label) .fx-cursor__shape { width: 22px; height: 22px; }
body.fx-cursor-invert .fx-cursor--label .fx-cursor__text { color: #000; }
.fx-cursor--glitch .fx-cursor__shape { width: max(8px, calc(var(--s) * .45)); height: max(8px, calc(var(--s) * .45)); border-radius: 0; background: var(--c);
  box-shadow: calc(var(--gs, 2px) * -1) 0 0 var(--glitch-c1, #ff2a6d), var(--gs, 2px) 0 0 var(--glitch-c2, #05d9e8); }
.fx-cursor--glitch.is-hover .fx-cursor__shape { width: calc(var(--s) * 1.2); height: calc(var(--s) * 1.2); }
.fx-cursor--emoji .fx-cursor__shape { border-radius: 0; font-size: var(--s); line-height: 1; transition: scale .25s; }
.fx-cursor--emoji.is-hover .fx-cursor__shape { scale: 1.35; }
body .fx-cursor--emoji { mix-blend-mode: normal !important; }
.fx-cursor--spotlight { inset: 0; width: 100vw; height: 100vh; z-index: 9989; transform: none !important;
  background: radial-gradient(circle calc(var(--s) * 7) at var(--cx, 50%) var(--cy, 50%), transparent 0, transparent 40%, rgba(0, 0, 0, .6) 100%); }
.fx-cursor--spotlight.is-hover { --s: calc(var(--cursor-size, 34px) * 1.4); }
.btb-js .fx-magnetic-on { transition: translate .35s cubic-bezier(.2, .7, .2, 1); }

@media (hover: none), (pointer: coarse) { .fx-cursor, .fx-cursor-line { display: none; } }

/* Editor: entrance states are shown finished; effects only play when previewed. */
.btb-editing .fx-loop:not(.fx-previewing) { animation: none !important; }
.btb-editing .fx-cursor, .btb-editing .fx-cursor-line, .btb-editing.fx-grain-on-page::after { display: none; }

@media (prefers-reduced-motion: reduce) {
  .btb-js :is(.bx, .fe-el)[data-anim]:not(.is-in) { opacity: 1; transform: none; filter: none; clip-path: none; }
  .btb-js [data-anim] :is(.fx-w, .fx-l, .fx-wi, .fx-part) { opacity: 1 !important; transform: none !important; filter: none !important; }
  .btb-js [data-anim="reveal"] :is(img, video) { transform: none !important; }
  .btb-js :is(.bx, .fe-el)[data-anim] > * { clip-path: none !important; }
  .fx-loop, .fx-glitch::before, .fx-glitch::after, .fx-shimmer, .fx-wave .fx-l, .fx-neon, .bx--grad-move, .fe-bg-move > .fe-el__inner, body.grad-move * { animation: none !important; }
  body.fx-grain-on-page::after, .fx-grain-el::after { animation: none; }
  body.fx-transition-fade, body.fx-transition-slide, body.fx-transition-glitch, body.fx-transition-wipe::before { animation: none; }
  body.fx-transition-wipe::before, body.fx-transition-curtain::before, body.fx-transition-pixels::before { display: none; }
  body.fx-skew main { transform: none !important; }
  .fx-cursor, .fx-cursor-line { display: none; }
}

/* 8. Theme preview bar ------------------------------------------------------ */
.btb-preview-bar { position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 10000; display: flex; gap: .75rem; align-items: center; padding: .55rem .6rem .55rem 1rem; background: #141414; color: #f4f1ec; border-radius: 999px; font: 500 13px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5); white-space: nowrap; }
.btb-preview-bar a, .btb-preview-bar button { color: inherit; font: inherit; }
.btb-preview-bar form { margin: 0; }
.btb-preview-bar button { background: #f4f1ec; color: #141414; border: 0; border-radius: 999px; padding: .45rem .9rem; cursor: pointer; }

/* 9. Page settings (any theme) ---------------------------------------------- */
.ps-header-hidden .site-header, .ps-no-announcement .announcement, .ps-no-footer .site-footer { display: none !important; }
.ps-header-transparent .site-header { margin-bottom: calc(-1 * var(--header-h, 4.5rem)); }
.ps-header-transparent .site-header:not(.is-scrolled) { background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
.ps-width-narrow .page-width { max-width: calc(820px + 2 * var(--gutter, clamp(1rem, 4vw, 3rem))); }
.ps-width-wide .page-width { max-width: 1920px; }
.ps-width-full .page-width { max-width: none; }

/* 10. Grid sections (drag-and-drop layouts) ------------------------------------ */
.fe { position: relative; padding: calc(var(--section, 5rem) * .5) 0; }
.fe--h-small { min-height: 33vh; } .fe--h-medium { min-height: 50vh; } .fe--h-large { min-height: 75vh; } .fe--h-full { min-height: 100vh; min-height: 100svh; }
.fe:not(.fe--h-auto) { display: flex; flex-direction: column; justify-content: flex-start; }
.fe.fe--v-center { justify-content: center; } .fe.fe--v-bottom { justify-content: flex-end; }
.fe__inner { container: fe / inline-size; width: 100%; max-width: calc(var(--max, 1440px) + 2 * var(--gutter, clamp(1rem, 4vw, 3rem))); margin: 0 auto; padding: 0 var(--gutter, clamp(1rem, 4vw, 3rem)); }
/* Three layouts: phones (8 columns) when the section is narrower than Grid::TABLET; otherwise tablets
   (24 columns, their own positions) on screens narrower than Grid::DESKTOP — where Site styles switch to
   tablet text sizes — and desktops (24 columns) on wider screens, however narrow the theme's page width.
   --fe-l names the layout showing, for the editor; --eh is the block's height in rows there. */
.fe__grid {
  --cols: 8; --fe-gap: 10px; --rows: var(--rows-m, 12); --fe-l: m;
  --row: calc((100cqw - (var(--cols) - 1) * var(--fe-gap)) / var(--cols) * var(--fe-ratio, .7));
  position: relative; display: grid; column-gap: var(--fe-gap); row-gap: 0;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  grid-template-rows: repeat(var(--rows), minmax(var(--row), auto));
  grid-auto-rows: minmax(var(--row), auto);
}
.fe-el { --eh: var(--mh); position: relative; min-width: 0; min-height: 0; grid-column: var(--mx) / span var(--mw); grid-row: var(--my) / span var(--mh); z-index: var(--mz, 1); display: flex; }
.fe-hide-mobile { display: none; }
@container fe (min-width: 700px) {
  .fe__grid { --cols: 24; --fe-gap: 12px; --rows: var(--rows-t, var(--rows-d, 12)); --fe-l: t; }
  .fe-el { --eh: var(--th, var(--dh)); grid-column: var(--tx, var(--dx)) / span var(--tw, var(--dw)); grid-row: var(--ty, var(--dy)) / span var(--th, var(--dh)); z-index: var(--tz, var(--dz, 1)); }
  .fe-hide-mobile { display: flex; }
  .fe-hide-desktop, .fe-hide-tablet { display: none; }
}
@media (min-width: 1024px) {
  @container fe (min-width: 700px) {
    .fe__grid { --rows: var(--rows-d, 12); --fe-l: d; }
    .fe-el { --eh: var(--dh); grid-column: var(--dx) / span var(--dw); grid-row: var(--dy) / span var(--dh); z-index: var(--dz, 1); }
    .fe-hide-tablet { display: flex; }
    .fe-hide-wide { display: none; }
  }
}
/* Words never touch the block below: a little room under a text box's last line, which only shows once the
   text fills its box (on a narrower screen, say) and the rows grow to fit — so the gap holds. Cards keep their padding. */
.fe-el--text.fe-v-top:not(.fe-themed):not([class*="fe-bg-"]) > .fe-el__inner,
.fe-el--quote.fe-v-top:not(.fe-themed):not([class*="fe-bg-"]) > .fe-el__inner { padding-bottom: max(var(--el-pad, 0px), .75rem, calc(var(--row) * .5)); }
/* Pictures, videos and shapes keep the shape they were given when text beside them makes the rows taller. */
.fe-el--image, .fe-el--video, .fe-el--shape { align-self: start; height: calc(var(--eh) * var(--row)); }
:is(.fe-el--image, .fe-el--video, .fe-el--shape).fe-v-center:not(.fe-sticky) { align-self: center; }
:is(.fe-el--image, .fe-el--video, .fe-el--shape).fe-v-bottom:not(.fe-sticky) { align-self: end; }
/* On tablets a picture the size it is on desktop keeps its desktop proportions (measured at a typical desktop
   column of 40px with 12px gaps), since the gaps between columns don't shrink with the screen. */
@media (max-width: 1023.98px) {
  @container fe (min-width: 700px) {
    :is(.fe-el--image, .fe-el--video, .fe-el--shape).fe-t-keep:not(.fe-sticky) { height: auto; aspect-ratio: calc((var(--dw) * 40 + (var(--dw) - 1) * 12) / (var(--dh) * 40 * var(--fe-ratio, .7))); }
  }
}
.fe-el__inner {
  position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-start;
  padding: var(--el-pad, 0); border-radius: var(--el-radius, 0); opacity: var(--el-opacity, 1); transform: rotate(var(--el-rotate, 0deg));
  border: var(--el-border, 0) solid var(--border, currentColor);
}
.fe-v-center .fe-el__inner { justify-content: center; } .fe-v-bottom .fe-el__inner { justify-content: flex-end; }
.fe-a-left .fe-el__inner { text-align: left; align-items: stretch; } .fe-a-center .fe-el__inner { text-align: center; } .fe-a-right .fe-el__inner { text-align: right; }
.fe-bg-card > .fe-el__inner { background: var(--card, rgba(128,128,128,.08)); }
.fe-bg-accent > .fe-el__inner { background: var(--accent, #d8452b); color: var(--bg, #fff); }
.fe-bg-heading > .fe-el__inner { background: var(--heading, #111); color: var(--bg, #fff); }
.fe-el.fe-bg-custom > .fe-el__inner, .fe-el.fe-bg-gradient > .fe-el__inner { background: var(--el-bg); }
.fe-themed > .fe-el__inner { background: var(--bg); color: var(--text); }
.fe-shadow-soft > .fe-el__inner { box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 18px 40px -20px rgba(0,0,0,.4); }
.fe-shadow-deep > .fe-el__inner { box-shadow: 0 4px 8px rgba(0,0,0,.12), 0 40px 70px -28px rgba(0,0,0,.6); }
.fe-el--image > .fe-el__inner, .fe-el--video > .fe-el__inner, .fe-el--shape > .fe-el__inner { overflow: hidden; }

/* Grid width, blocks that reach the window edge, and blocks that stay on screen */
.fe { overflow-x: clip; }
.fe--w-wide > .fe__inner { max-width: none; }
.fe--w-full > .fe__inner { max-width: none; padding-inline: 0; }
.fe-bleed-left, .fe-bleed-both { margin-left: calc((100cqw - 100vw) / 2); }
.fe-bleed-right, .fe-bleed-both { margin-right: calc((100cqw - 100vw) / 2); }
.fe-sticky { position: sticky; top: calc(var(--sticky-top, 0px) + var(--sticky-offset, 0px)); align-self: start; grid-row-end: -1;
  height: calc(var(--eh) * var(--row)); }
body.header-sticky { --sticky-offset: var(--header-h, 0px); }

/* Print list as a scrolling row */
.fe-prints--row { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: calc((100% - (var(--cols, 3) - 1) * var(--grid-gap, 1.5rem)) / var(--cols, 3));
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-bottom: .75rem; }
.fe-prints--row > li { scroll-snap-align: start; }
@media (max-width: 699px) { .fe-prints--row { grid-auto-columns: 78%; } }
.fe-posts { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
@media (max-width: 699px) { .fe-posts { grid-template-columns: 1fr; } }

/* Scrolling text */
.fe-marquee { overflow: hidden; width: 100%; white-space: nowrap; display: flex; align-items: center; height: 100%; }
.fe-marquee__track { display: flex; width: max-content; animation: fe-marquee var(--marquee-speed, 35s) linear infinite; }
.fe-marquee--right .fe-marquee__track { animation-direction: reverse; }
.fe-marquee--pause:hover .fe-marquee__track { animation-play-state: paused; }
.fe-marquee__run { display: flex; align-items: center; flex: none; }
.fe-marquee__item { padding: 0 .45em; color: var(--heading, inherit); }
.fe-marquee__div { color: var(--accent, currentColor); font-size: .6em; padding: 0 .9em; }
.fe-marquee--h0 { font: var(--h1-style, normal) var(--h1-weight, 700) calc(var(--h1-size, 4rem) * var(--h0-scale, 1.6))/1 var(--h1-font, inherit); letter-spacing: var(--h1-ls, -.02em); text-transform: var(--h1-case, none); }
.fe-marquee--h1 { font: var(--h1-style, normal) var(--h1-weight, 700) var(--h1-size, 4rem)/1 var(--h1-font, inherit); letter-spacing: var(--h1-ls, -.02em); text-transform: var(--h1-case, none); }
.fe-marquee--h2 { font: var(--h2-style, normal) var(--h2-weight, 700) var(--h2-size, 2.6rem)/1 var(--h2-font, inherit); letter-spacing: var(--h2-ls, -.01em); text-transform: var(--h2-case, none); }
.fe-marquee--h3 { font: var(--h3-style, normal) var(--h3-weight, 600) var(--h3-size, 1.8rem)/1 var(--h3-font, inherit); letter-spacing: var(--h3-ls, 0); text-transform: var(--h3-case, none); }
.fe-marquee--p { font-size: 1rem; }
@keyframes fe-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .fe-marquee__track { animation: none; } }

/* Element contents */
.fe-text > :first-child { margin-top: 0; } .fe-text > :last-child { margin-bottom: 0; }
.fe-text .label { margin-bottom: .7em; } .fe-text .label + :is(h1, h2, h3, h4, .h0) { margin-top: 0; }
.fe-text .ta-left { text-align: left; } .fe-text .ta-center { text-align: center; } .fe-text .ta-right { text-align: right; }
.fe-image { position: relative; margin: 0; height: 100%; display: flex; flex-direction: column; }
.fe-image__link { display: block; flex: 1; min-height: 0; }
.fe-image img { display: block; width: 100%; height: 100%; flex: 1; min-height: 0; border-radius: var(--img-radius, 0); }
.fe-image--contain img { object-fit: contain; }
.fe-image figcaption { font-size: .82em; opacity: .7; margin-top: .5rem; flex: none; }
.fe-art { display: flex; flex: 1; min-height: 0; height: 100%; }
.fe-art img { box-shadow: var(--art-shadow, 0 16px 34px -18px rgba(0,0,0,.35)); }
.fe-art--mount { background: var(--mount, #fbfaf7); padding: var(--mount-pad, 7%); box-shadow: var(--art-shadow, 0 16px 34px -18px rgba(0,0,0,.35)); }
.fe-art--mount img, .fe-art--frame img { box-shadow: none; }
.fe-art--frame { border: var(--frame-w, 10px) solid var(--frame, #161616); background: var(--mount, #fbfaf7); padding: calc(var(--mount-pad, 7%) * .6); box-shadow: var(--art-shadow, 0 16px 34px -18px rgba(0,0,0,.35)); }
/* A button never gets narrower than its label; two buttons in one block wrap instead of overlapping. */
.fe-button { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; }
.fe-button .button, .fe-button .link-arrow { flex: none; min-width: max-content; }
.fe-button--stretch .button, .fe-button--stretch .link-arrow { flex: 1 1 auto; }
.fe-a-center .fe-button, .fe-a-inherit .fe-button { justify-content: flex-start; }
.fe-a-center .fe-button { justify-content: center; } .fe-a-right .fe-button { justify-content: flex-end; }
.fe-button--stretch .button { width: 100%; justify-content: center; }
.fe-button--stretch.fe-button--pair :is(.button, .link-arrow) { width: auto; flex: 1 1 0; justify-content: center; }
.fe-button--s .button { font-size: .85em; } .fe-button--l .button { font-size: 1.15em; }
.fe-video { position: relative; flex: 1; min-height: 0; height: 100%; background: #000; border-radius: var(--img-radius, 0); overflow: hidden; }
.fe-video video, .fe-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.fe-quote { margin: 0; }
.fe-quote blockquote { margin: 0; font-family: var(--h2-font, inherit); font-size: var(--h3-size, 1.6em); line-height: 1.2; letter-spacing: var(--h3-ls, -.01em); }
.fe-quote figcaption { margin-top: 1rem; opacity: .7; }
.fe-shape { flex: 1; background: var(--shape); }
.fe-shape--circle { border-radius: 50%; } .fe-shape--pill { border-radius: 999px; } .fe-shape--arch { border-radius: 999px 999px 0 0; }
.fe-shape--star { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.fe-line { flex: 1; display: flex; align-items: center; justify-content: center; }
.fe-line--horizontal::before { content: ""; display: block; width: 100%; height: var(--thick); background: var(--line); }
.fe-line--vertical::before { content: ""; display: block; height: 100%; width: var(--thick); background: var(--line); }
.fe-newsletter h3 { margin: 0 0 .5rem; } .fe-newsletter p { margin: 0 0 1rem; opacity: .8; }
.fe-social { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; list-style: none; margin: 0; padding: 0; }
.fe-a-center .fe-social { justify-content: center; } .fe-a-right .fe-social { justify-content: flex-end; }
.fe-social--pills a { display: inline-block; padding: .4rem .9rem; border: 1px solid currentColor; border-radius: 999px; text-decoration: none; }
.fe-prints { margin: 0; }
.fe-buy h3 { margin: 0 0 .35rem; } .fe-buy__title { text-decoration: none; } .fe-buy__price { margin-bottom: .5rem; } .fe-buy form { margin-top: 1rem; }
.fe-print-image { display: flex; flex: 1; align-items: center; justify-content: center; }
.fe-empty { grid-column: 1 / -1; grid-row: 1 / span 4; display: grid; place-items: center; border: 1px dashed currentColor; opacity: .5; font-size: .9rem; padding: 2rem; text-align: center; }
.fe-placeholder { display: grid; place-items: center; flex: 1; min-height: 3rem; opacity: .55; font-size: .85rem; }
.fe-placeholder--image { background: repeating-linear-gradient(45deg, rgba(128,128,128,.12) 0 10px, rgba(128,128,128,.2) 10px 20px); }

/* Text styles for themes that don't define them */
.p1 { font-size: var(--p1-size, 1.25em); line-height: var(--p1-lh, 1.5); }
.p3 { font-size: var(--p3-size, .875em); line-height: var(--p3-lh, 1.55); }
.ta-center { text-align: center; } .ta-right { text-align: right; }
mark { background: var(--accent, #ffe16b); color: var(--bg, inherit); padding: 0 .12em; }

/* Colour themes on sections */
.bx--themed { background: var(--bg); color: var(--text); }
.fe-button .button, .fe-button .link-arrow { white-space: nowrap; }

/* 11. View on a wall (Customise → View on a wall) ----------------------------------
   The script sets --cm (pixels per centimetre) and the art's size in cm, so the
   print, furniture and textures are all shown to scale. */
.wall-modal { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden; }
.wall-modal::backdrop { background: rgba(0, 0, 0, .6); }
.wall {
  --cm: 2.6px; --floor-h: 16%;
  --wall-shade: color-mix(in srgb, var(--wall) 84%, #000); --wall-lift: color-mix(in srgb, var(--wall) 70%, #fff);
  position: absolute; inset: 0; overflow: hidden; background: var(--wall); color: var(--furniture); font: 14px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; transition: background-color .5s;
}
.wall__surface, .wall__light { position: absolute; inset: 0; pointer-events: none; }
.wall__surface { background-color: var(--wall); transition: background-color .5s; }
.wall--plaster .wall__surface { background-image: radial-gradient(60% 40% at 20% 30%, var(--wall-lift), transparent 70%), radial-gradient(50% 50% at 80% 60%, var(--wall-shade), transparent 70%), var(--grain-tile); background-size: auto, auto, 300px; background-blend-mode: normal, normal, soft-light; opacity: 1; }
.wall--concrete .wall__surface { background-image: radial-gradient(circle at 18% 22%, rgba(0,0,0,.08) 0 calc(1.4 * var(--cm)), transparent calc(1.6 * var(--cm))), var(--grain-tile), linear-gradient(170deg, var(--wall-lift), var(--wall) 40%, var(--wall-shade));
  background-size: calc(120 * var(--cm)) calc(60 * var(--cm)), 180px, auto; background-blend-mode: normal, multiply, normal; }
.wall--brick .wall__surface {
  --bw: calc(23 * var(--cm)); --bh: calc(7.5 * var(--cm)); --m: max(1px, calc(1 * var(--cm))); --mortar: color-mix(in srgb, var(--wall) 80%, #000);
  background-image: linear-gradient(to bottom, var(--mortar) var(--m), transparent 0), conic-gradient(at var(--m) var(--bh), transparent 75%, var(--mortar) 0), conic-gradient(at var(--m) var(--bh), transparent 75%, var(--mortar) 0);
  background-size: 100% var(--bh), var(--bw) calc(2 * var(--bh)), var(--bw) calc(2 * var(--bh));
  background-position: 0 0, 0 0, calc(var(--bw) / 2) var(--bh);
}
.wall--panels .wall__surface { background-image: repeating-linear-gradient(90deg, transparent 0 calc(14.6 * var(--cm)), var(--wall-shade) calc(14.6 * var(--cm)) calc(15 * var(--cm))), linear-gradient(90deg, rgba(255,255,255,.06), rgba(0,0,0,.05)); }
.wall--wainscot .wall__surface::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: var(--floor-h); height: calc(92 * var(--cm));
  border-top: calc(4 * var(--cm)) solid var(--wall-lift); box-shadow: 0 calc(-1 * var(--cm)) calc(2 * var(--cm)) rgba(0,0,0,.08);
  background: repeating-linear-gradient(90deg, transparent 0 calc(4 * var(--cm)), rgba(0,0,0,.07) calc(4 * var(--cm)) calc(4.4 * var(--cm)), transparent calc(4.4 * var(--cm)) calc(56 * var(--cm)), rgba(255,255,255,.18) calc(56 * var(--cm)) calc(56.4 * var(--cm)), transparent calc(56.4 * var(--cm)) calc(60 * var(--cm))), var(--wall-lift);
}
.wall__floor { position: absolute; left: 0; right: 0; bottom: 0; height: var(--floor-h); background-color: var(--floor); }
.wall__floor::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: max(6px, calc(10 * var(--cm))); background: var(--wall-lift); box-shadow: inset 0 2px 0 rgba(255,255,255,.35), 0 2px 6px rgba(0,0,0,.12); }
.wall__floor::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.18), transparent 40%); }
.wall--floor-wood .wall__floor { background-image: repeating-linear-gradient(90deg, transparent 0 calc(18 * var(--cm)), rgba(0,0,0,.14) calc(18 * var(--cm)) calc(18.4 * var(--cm))), linear-gradient(90deg, rgba(255,255,255,.05), rgba(0,0,0,.06) 50%, rgba(255,255,255,.04)); }
.wall--floor-herringbone .wall__floor { background-image: repeating-linear-gradient(45deg, transparent 0 calc(9 * var(--cm)), rgba(0,0,0,.13) calc(9 * var(--cm)) calc(9.4 * var(--cm))), repeating-linear-gradient(-45deg, transparent 0 calc(36 * var(--cm)), rgba(0,0,0,.1) calc(36 * var(--cm)) calc(36.4 * var(--cm))); }
.wall--floor-concrete .wall__floor { background-image: linear-gradient(90deg, rgba(255,255,255,.12), transparent 30% 70%, rgba(255,255,255,.08)), var(--grain-tile); background-size: auto, 200px; background-blend-mode: normal, multiply; }
.wall--floor-carpet .wall__floor { background-image: var(--grain-tile); background-size: 90px; background-blend-mode: multiply; }
.wall--floor-carpet .wall__floor::before { height: max(4px, calc(7 * var(--cm))); }
.wall--floor-none .wall__floor { background: transparent; }
.wall--floor-none .wall__floor::before, .wall--floor-none .wall__floor::after { display: none; }
.wall--light-soft .wall__light { background: radial-gradient(ellipse at 50% 15%, rgba(255,255,255,.5), transparent 62%); }
.wall--light-spot .wall__light { background: radial-gradient(ellipse 28% 44% at 50% 28%, rgba(255,244,220,.55), transparent 70%), radial-gradient(ellipse at 50% 40%, transparent 35%, rgba(0,0,0,.28)); }
.wall--light-spot .wall__scene::before { content: ""; position: absolute; left: 50%; top: calc(var(--art-top, 40%) - 9 * var(--cm)); width: calc(40 * var(--cm)); height: calc(3 * var(--cm)); transform: translateX(-50%); background: #b9a274; border-radius: 2px; box-shadow: 0 calc(1.2 * var(--cm)) calc(2 * var(--cm)) rgba(0,0,0,.3); }
.wall--light-window .wall__light { background: linear-gradient(118deg, transparent 8%, rgba(255,255,255,.34) 8% 22%, transparent 22% 25%, rgba(255,255,255,.3) 25% 39%, transparent 39%), linear-gradient(transparent 40%, rgba(255,255,255,.08)); filter: blur(18px); mix-blend-mode: soft-light; }
.wall--light-evening .wall__light { background: radial-gradient(ellipse at 82% 30%, rgba(255,170,80,.42), transparent 60%), linear-gradient(rgba(40,20,0,.18), rgba(40,20,0,.3)); mix-blend-mode: multiply; }
.wall--light-evening .wall__surface { filter: saturate(.9); }
.wall__scene { position: absolute; left: 0; right: 0; bottom: var(--floor-h); height: calc(100% - var(--floor-h)); pointer-events: none; }
.wall__art { position: absolute; left: 50%; bottom: calc(var(--art-bottom, 110) * var(--cm)); transform: translateX(-50%); }
.wall__piece { display: block; box-shadow: 0 calc(.6 * var(--cm)) calc(1 * var(--cm)) rgba(0,0,0,.12), calc(2 * var(--cm)) calc(6 * var(--cm)) calc(10 * var(--cm)) calc(-3 * var(--cm)) rgba(0,0,0,.38); }
.wall__mat { display: block; }
.wall__mat img, .wall__mat .placeholder-art { display: block; width: calc(var(--art-w, 30) * var(--cm)); height: auto; max-width: none; }
.wall__mat .placeholder-art { aspect-ratio: var(--aspect, .75); background: #ccc; }
.wall__piece--mount .wall__mat { background: var(--mount-c); padding: calc(var(--mount, 6) * var(--cm)); }
.wall__piece--frame { border: calc(2.6 * var(--cm)) solid var(--frame-c); background: var(--mount-c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15), 0 calc(.6 * var(--cm)) calc(1 * var(--cm)) rgba(0,0,0,.16), calc(2 * var(--cm)) calc(6 * var(--cm)) calc(10 * var(--cm)) calc(-3 * var(--cm)) rgba(0,0,0,.42); }
.wall__piece--frame .wall__mat { padding: calc(var(--mount, 6) * var(--cm)); box-shadow: inset 0 calc(.4 * var(--cm)) calc(.8 * var(--cm)) rgba(0,0,0,.18); }
.wall__piece--frame-tight { border: calc(2.2 * var(--cm)) solid var(--frame-c); }
.wall__piece--flat { box-shadow: calc(.8 * var(--cm)) calc(2.5 * var(--cm)) calc(4 * var(--cm)) calc(-1 * var(--cm)) rgba(0,0,0,.3); }
.wall__furniture { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: calc(var(--furn-cm, 200) * var(--cm)); height: calc(var(--furn-h, 86) * var(--cm)); color: var(--furniture); overflow: visible; filter: drop-shadow(0 calc(1.5 * var(--cm)) calc(2 * var(--cm)) rgba(0,0,0,.18)); }
.wall__plant { position: absolute; bottom: 0; left: calc(50% + var(--furn-cm, 200) * var(--cm) / 2 + 8 * var(--cm)); width: calc(46 * var(--cm)); height: auto; }
.wall--none .wall__plant { left: calc(50% + 50 * var(--cm)); }
.wall__ui { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 1rem; padding: 1rem clamp(1rem, 3vw, 2rem); }
.wall__badge { padding: .35rem .75rem; border-radius: 999px; background: rgba(255,255,255,.85); color: #111; font-size: 13px; font-weight: 500; }
.wall__swatches { display: flex; gap: .4rem; margin-left: auto; padding: .35rem; border-radius: 999px; background: rgba(255,255,255,.7); }
.wall__swatches button { width: 24px; height: 24px; border-radius: 50%; border: 0; padding: 0; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); cursor: pointer; }
.wall__swatches button[aria-pressed="true"] { box-shadow: inset 0 0 0 1px rgba(0,0,0,.18), 0 0 0 2px #fff, 0 0 0 3.5px #111; }
.wall__close { margin-left: auto; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #fff; color: #111; cursor: pointer; flex: none; }
.wall__swatches + .wall__close { margin-left: 0; }
.wall__caption { position: absolute; left: 0; right: 0; bottom: 1rem; margin: 0; padding: 0 1rem; text-align: center; font-size: 13px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
@media (max-width: 600px) { .wall__swatches button { width: 20px; height: 20px; } .wall__badge { display: none; } }

/* ------------------------------------------------ Motion (assets/motion.js) */
/* Blocks with entrance or page-load steps stay hidden for a moment until their start state is set. */
html.motion-wait body:not(.btb-editing) :is([data-motion*='"on":"enter"'], [data-motion*='"on":"load"']):not(.mo-ready) { visibility: hidden; }
.mo-num { font-variant-numeric: tabular-nums; }
/* Held sections: the wrapper is as tall as the hold; the section sticks to the top meanwhile. */
.fx-pin { position: relative; height: calc((var(--pin, 1) + 1) * 100vh); height: calc((var(--pin, 1) + 1) * 100svh); overflow: visible !important; }
.fx-pin > :not(.fx-glitch-layer) { position: sticky; top: var(--pin-top, 0px); min-height: calc(100vh - var(--pin-top, 0px)); min-height: calc(100svh - var(--pin-top, 0px)); }
.fx-pin--rail * { scroll-snap-type: none !important; scroll-behavior: auto !important; }
.btb-editing .fx-pin { height: auto; }
.btb-editing .fx-pin > :not(.fx-glitch-layer) { position: relative; min-height: 0; }
@media (prefers-reduced-motion: reduce) {
  .fx-pin { height: auto; }
  .fx-pin > :not(.fx-glitch-layer) { position: relative; min-height: 0; }
}

/* Image effects (assets/fx-gl.js): a canvas over the photo while it is on screen. */
.fx-gl { position: absolute; z-index: 1; pointer-events: none; display: block; }
img.fx-gl-hidden { visibility: hidden; }

/* Never in the editor's frame (older pages may still carry the classes from the page cache). */
.btb-editing:is(.fx-transition-wipe, .fx-transition-curtain, .fx-transition-pixels)::before { display: none; }

/* 11. Print page design (Pages → Print page) ----------------------------------- */
.fe-print-part { width: 100%; min-width: 0; }
.fe-print-part > :first-child { margin-top: 0; } .fe-print-part > :last-child { margin-bottom: 0; }
.fe-print-part--title .product-title__name { margin: 0; }
.fe-print-part--title .muted { margin: .45rem 0 0; }
.fe-print-part--button form, .fe-print-part--buy form { margin: 0; }
.fe-print-part--meta { margin: 0; }
.fe-print-part__wall { display: inline-flex; align-items: center; gap: .5rem; }
.fe-print-part--gallery .product-media { margin: 0; }
.print-story .rte > :first-child { margin-top: 0; }
.print-story__note { margin: 1.6rem 0 0; padding-left: 1.1rem; border-left: 2px solid var(--accent, currentColor); font-style: italic; }
.print-story .ta-center .print-story__note, .print-story.ta-center .print-story__note { border-left: 0; padding-left: 0; }