/* =====================================================================
   hero-lab OIL-FINAL — "Marbled oil, dreaming" (from OIL-1 revision 2): the oil toned down, surreal hues drifting
   through it, a continuous card flight and a hold-and-lean deck gesture (both in reel.js)
   A live oil painting marbled like ebru. Day: ivory, sage and soft
   saffron bodies with brass veins. Night: forest and ink-blue bodies
   with lamp-gold veins, the card colour pooled under the deck.
   The deck rests in a brass lens ring; the cards are glass objects.
   Only transform / opacity animate; colours change with the theme and
   never transition on text (the words and their ground change together).
   ===================================================================== */

/* ---------- the frame: a glass slab with a brass edge that catches the window light ---------- */
.hero__frame::before, .hero__frame::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; }
.hero__frame::after { box-shadow: inset 0 1px 0 rgb(255 255 255 / .1), inset 0 0 40px -20px rgb(0 0 0 / .5); }
.hero__frame::before { padding: 1px;
  background: conic-gradient(from 180deg at 50% 50%, rgb(217 193 144 / .1), rgb(217 193 144 / .5) 30%, rgb(255 244 214 / .75) 36%, rgb(217 193 144 / .32) 44%, rgb(217 193 144 / .08) 60%, rgb(217 193 144 / .26) 82%, rgb(217 193 144 / .1));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }

/* ---------- the still oil (before WebGL, without it, reduced motion). First paint: soft colour bodies in plain gradients.
   After load (hero.js adds .is-oil): a still oil painting drawn by SVG filters (a noise field nudged along the comb diagonal,
   folded by a slow warp, softened, mapped through the live palette, then streaked by the brush and grained), no outlines.
   Calm grounds keep the words (copy, deck controls) at 4.5:1 or more ---------- */
.hero__art-fallback { transition: none; background:
  linear-gradient(90deg, rgb(8 30 21 / .82), rgb(8 30 21 / .3) 46%, transparent 62%),
  radial-gradient(26% 32% at 72% 54%, color-mix(in srgb, var(--hero-accent) 30%, transparent), transparent 72%),
  radial-gradient(34% 16% at 74% 14%, rgb(14 34 82 / .85), transparent 72%), radial-gradient(22% 30% at 94% 42%, rgb(38 104 74 / .6), transparent 70%),
  radial-gradient(40% 15% at 82% 90%, rgb(12 30 74 / .8), transparent 72%), radial-gradient(30% 20% at 60% 72%, rgb(26 76 56 / .5), transparent 70%),
  radial-gradient(46% 50% at 30% 86%, rgb(14 30 62 / .5), transparent 70%),
  conic-gradient(from 210deg at 70% 50%, #0F3022, #143D2C, #0A2419, #0C2230, #0F3022); }
.hero__art-fallback::before { content: ""; position: absolute; inset: 0; opacity: 0; background:
  radial-gradient(48% 56% at 26% 50%, #FBF8F0 0 46%, rgb(251 248 240 / .7) 66%, rgb(251 248 240 / 0) 92%),
  radial-gradient(24% 30% at 72% 56%, color-mix(in srgb, var(--hero-accent) 14%, transparent), transparent 72%),
  radial-gradient(34% 15% at 74% 13%, rgb(240 208 146 / .8), transparent 72%), radial-gradient(22% 30% at 95% 44%, rgb(166 186 146 / .8), transparent 70%),
  radial-gradient(40% 14% at 82% 91%, rgb(230 196 130 / .7), transparent 72%), radial-gradient(28% 18% at 58% 76%, rgb(242 210 150 / .6), transparent 70%),
  radial-gradient(40% 46% at 44% 22%, rgb(255 246 222 / .9), transparent 72%),
  linear-gradient(112deg, #F6F2E6 0%, #F1EBDA 44%, #E6E4CF 76%, #D9DEC6 100%); }
html[data-theme="day"] .hero__art-fallback::before { opacity: 1; }
.hero__art-fallback::after { content: ""; position: absolute; inset: 0; background-size: 100% 100%; }
.is-oil .hero__art-fallback::after { animation: oil-in 1s ease both; background-image:
  linear-gradient(90deg, rgb(8 30 21 / .86), rgb(8 30 21 / .72) 36%, rgb(8 30 21 / .36) 50%, transparent 64%),
  radial-gradient(24% 13% at 70% 89%, rgb(8 30 21 / .55), transparent 75%),
  radial-gradient(26% 32% at 72% 54%, color-mix(in srgb, var(--hero-accent) 24%, transparent), transparent 72%),
  var(--oh), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 100' preserveAspectRatio='none'%3E%3Cfilter id='f' x='-40' y='-40' width='240' height='180' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.011 .02' numOctaves='2' seed='9'/%3E%3CfeColorMatrix values='3 0 0 0 -1 3 0 0 0 -1 3 0 0 0 -1 0 0 0 0 1'/%3E%3CfeComposite in2='SourceGraphic' operator='arithmetic' k2='.55' k3='.6' k4='-.08' result='c'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.05 .7' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1'/%3E%3CfeComposite in='c' operator='arithmetic' k2='1' k3='.1' k4='-.05' result='c'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.007 .012' numOctaves='3' seed='13'/%3E%3CfeDisplacementMap in='c' scale='76' xChannelSelector='R' yChannelSelector='G'/%3E%3CfeGaussianBlur stdDeviation='.5'/%3E%3CfeComponentTransfer result='p'%3E%3CfeFuncR type='table' tableValues='.03 .07 .07 .04 .04 .05 .60 .10 .10 .07 .05 .04 .04 .03 .07 .05 .34 .04 .04 .03 .03'/%3E%3CfeFuncG type='table' tableValues='.09 .20 .20 .09 .09 .15 .47 .26 .26 .20 .15 .09 .09 .09 .20 .15 .30 .09 .09 .09 .09'/%3E%3CfeFuncB type='table' tableValues='.07 .14 .14 .20 .20 .10 .27 .19 .19 .14 .10 .20 .20 .07 .14 .10 .19 .20 .20 .07 .07'/%3E%3C/feComponentTransfer%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.3 1.1' seed='6'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1'/%3E%3CfeComposite in='p' operator='arithmetic' k2='1' k3='.05' k4='-.025'/%3E%3C/filter%3E%3ClinearGradient id='g' x2='.5' y2='.35' spreadMethod='reflect'%3E%3Cstop offset='0'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3Crect x='-40' y='-40' width='240' height='180' fill='url(%23g)' filter='url(%23f)'/%3E%3C/svg%3E"); }
html[data-theme="day"] .is-oil .hero__art-fallback::after { background-image:
  radial-gradient(48% 56% at 26% 50%, #FBF8F0 0 46%, rgb(251 248 240 / .7) 66%, rgb(251 248 240 / 0) 92%),
  radial-gradient(26% 14% at 70% 89%, rgb(251 248 240 / .8), transparent 75%),
  radial-gradient(24% 30% at 72% 56%, color-mix(in srgb, var(--hero-accent) 12%, transparent), transparent 72%),
  var(--oh), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 100' preserveAspectRatio='none'%3E%3Cfilter id='f' x='-40' y='-40' width='240' height='180' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.011 .02' numOctaves='2' seed='9'/%3E%3CfeColorMatrix values='3 0 0 0 -1 3 0 0 0 -1 3 0 0 0 -1 0 0 0 0 1'/%3E%3CfeComposite in2='SourceGraphic' operator='arithmetic' k2='.55' k3='.6' k4='-.08' result='c'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.05 .7' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1'/%3E%3CfeComposite in='c' operator='arithmetic' k2='1' k3='.1' k4='-.05' result='c'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.007 .012' numOctaves='3' seed='13'/%3E%3CfeDisplacementMap in='c' scale='76' xChannelSelector='R' yChannelSelector='G'/%3E%3CfeGaussianBlur stdDeviation='.5'/%3E%3CfeComponentTransfer result='p'%3E%3CfeFuncR type='table' tableValues='.73 .73 .86 .97 .97 .96 .96 .80 .96 .91 .97 .97 .86 .73 .73 .86 .97 .96 .96 .91 .91'/%3E%3CfeFuncG type='table' tableValues='.79 .79 .88 .95 .95 .80 .80 .63 .80 .76 .95 .95 .88 .79 .79 .88 .95 .80 .80 .76 .76'/%3E%3CfeFuncB type='table' tableValues='.66 .66 .79 .89 .89 .54 .54 .36 .54 .52 .89 .89 .79 .66 .66 .79 .89 .54 .54 .52 .52'/%3E%3C/feComponentTransfer%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.3 1.1' seed='6'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1'/%3E%3CfeComposite in='p' operator='arithmetic' k2='1' k3='.05' k4='-.025'/%3E%3C/filter%3E%3ClinearGradient id='g' x2='.5' y2='.35' spreadMethod='reflect'%3E%3Cstop offset='0'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3Crect x='-40' y='-40' width='240' height='180' fill='url(%23g)' filter='url(%23f)'/%3E%3C/svg%3E"); }
@keyframes oil-in { from { opacity: 0; } }
@media (max-width: 989px) {
  .hero__art-fallback { background:
    linear-gradient(180deg, rgb(8 30 21 / .74), rgb(8 30 21 / .3) 46%, transparent 60%),
    radial-gradient(50% 26% at 50% 70%, color-mix(in srgb, var(--hero-accent) 30%, transparent), transparent 72%),
    radial-gradient(60% 12% at 20% 58%, rgb(14 34 82 / .8), transparent 72%), radial-gradient(40% 20% at 96% 80%, rgb(38 104 74 / .6), transparent 70%),
    radial-gradient(70% 10% at 60% 98%, rgb(12 30 74 / .8), transparent 72%), radial-gradient(70% 40% at 10% 100%, rgb(14 30 62 / .5), transparent 70%),
    conic-gradient(from 200deg at 50% 70%, #0F3022, #143D2C, #0A2419, #0C2230, #0F3022); }
  .hero__art-fallback::before { background:
    radial-gradient(90% 34% at 50% 26%, #FBF8F0 0 50%, rgb(251 248 240 / .72) 70%, rgb(251 248 240 / 0) 96%),
    radial-gradient(56% 26% at 50% 70%, color-mix(in srgb, var(--hero-accent) 14%, transparent), transparent 72%),
    radial-gradient(60% 12% at 16% 60%, rgb(240 208 146 / .75), transparent 72%), radial-gradient(40% 20% at 98% 78%, rgb(166 186 146 / .8), transparent 70%),
    radial-gradient(70% 10% at 60% 99%, rgb(230 196 130 / .7), transparent 72%),
    radial-gradient(70% 30% at 86% 20%, rgb(255 246 222 / .9), transparent 72%),
    linear-gradient(180deg, #F6F2E6 0%, #F1ECDB 40%, #E6E4CF 74%, #D7DCC4 100%); }
  .is-oil .hero__art-fallback::after { background-image:
    linear-gradient(180deg, rgb(8 30 21 / .78), rgb(8 30 21 / .36) 46%, transparent 60%),
    radial-gradient(70% 10% at 50% 93%, rgb(8 30 21 / .5), transparent 75%),
    radial-gradient(50% 26% at 50% 70%, color-mix(in srgb, var(--hero-accent) 24%, transparent), transparent 72%),
    var(--oh), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 130' preserveAspectRatio='none'%3E%3Cfilter id='f' x='-40' y='-40' width='140' height='210' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.011 .02' numOctaves='2' seed='9'/%3E%3CfeColorMatrix values='3 0 0 0 -1 3 0 0 0 -1 3 0 0 0 -1 0 0 0 0 1'/%3E%3CfeComposite in2='SourceGraphic' operator='arithmetic' k2='.55' k3='.6' k4='-.08' result='c'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.05 .7' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1'/%3E%3CfeComposite in='c' operator='arithmetic' k2='1' k3='.1' k4='-.05' result='c'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.007 .012' numOctaves='3' seed='13'/%3E%3CfeDisplacementMap in='c' scale='76' xChannelSelector='R' yChannelSelector='G'/%3E%3CfeGaussianBlur stdDeviation='.5'/%3E%3CfeComponentTransfer result='p'%3E%3CfeFuncR type='table' tableValues='.03 .07 .07 .04 .04 .05 .60 .10 .10 .07 .05 .04 .04 .03 .07 .05 .34 .04 .04 .03 .03'/%3E%3CfeFuncG type='table' tableValues='.09 .20 .20 .09 .09 .15 .47 .26 .26 .20 .15 .09 .09 .09 .20 .15 .30 .09 .09 .09 .09'/%3E%3CfeFuncB type='table' tableValues='.07 .14 .14 .20 .20 .10 .27 .19 .19 .14 .10 .20 .20 .07 .14 .10 .19 .20 .20 .07 .07'/%3E%3C/feComponentTransfer%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.3 1.1' seed='6'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1'/%3E%3CfeComposite in='p' operator='arithmetic' k2='1' k3='.05' k4='-.025'/%3E%3C/filter%3E%3ClinearGradient id='g' x2='.5' y2='.35' spreadMethod='reflect'%3E%3Cstop offset='0'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3Crect x='-40' y='-40' width='140' height='210' fill='url(%23g)' filter='url(%23f)'/%3E%3C/svg%3E"); }
  html[data-theme="day"] .is-oil .hero__art-fallback::after { background-image:
    radial-gradient(90% 34% at 50% 26%, #FBF8F0 0 50%, rgb(251 248 240 / .72) 70%, rgb(251 248 240 / 0) 96%),
    radial-gradient(70% 10% at 50% 93%, rgb(251 248 240 / .75), transparent 75%),
    radial-gradient(56% 26% at 50% 70%, color-mix(in srgb, var(--hero-accent) 12%, transparent), transparent 72%),
    var(--oh), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 130' preserveAspectRatio='none'%3E%3Cfilter id='f' x='-40' y='-40' width='140' height='210' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.011 .02' numOctaves='2' seed='9'/%3E%3CfeColorMatrix values='3 0 0 0 -1 3 0 0 0 -1 3 0 0 0 -1 0 0 0 0 1'/%3E%3CfeComposite in2='SourceGraphic' operator='arithmetic' k2='.55' k3='.6' k4='-.08' result='c'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.05 .7' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1'/%3E%3CfeComposite in='c' operator='arithmetic' k2='1' k3='.1' k4='-.05' result='c'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.007 .012' numOctaves='3' seed='13'/%3E%3CfeDisplacementMap in='c' scale='76' xChannelSelector='R' yChannelSelector='G'/%3E%3CfeGaussianBlur stdDeviation='.5'/%3E%3CfeComponentTransfer result='p'%3E%3CfeFuncR type='table' tableValues='.73 .73 .86 .97 .97 .96 .96 .80 .96 .91 .97 .97 .86 .73 .73 .86 .97 .96 .96 .91 .91'/%3E%3CfeFuncG type='table' tableValues='.79 .79 .88 .95 .95 .80 .80 .63 .80 .76 .95 .95 .88 .79 .79 .88 .95 .80 .80 .76 .76'/%3E%3CfeFuncB type='table' tableValues='.66 .66 .79 .89 .89 .54 .54 .36 .54 .52 .89 .89 .79 .66 .66 .79 .89 .54 .54 .52 .52'/%3E%3C/feComponentTransfer%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.3 1.1' seed='6'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1'/%3E%3CfeComposite in='p' operator='arithmetic' k2='1' k3='.05' k4='-.025'/%3E%3C/filter%3E%3ClinearGradient id='g' x2='.5' y2='.35' spreadMethod='reflect'%3E%3Cstop offset='0'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3Crect x='-40' y='-40' width='140' height='210' fill='url(%23g)' filter='url(%23f)'/%3E%3C/svg%3E"); }
}
/* canvas tooth over the paint, live or still, at full device resolution (a stitched noise tile and a faint weave) */
.hero__media::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55 .38' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .96 0 0 0 0 .86 -.3 0 0 0 .14'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23t)'/%3E%3C/svg%3E") 0 0 / 160px 160px, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55 .38' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .24 0 0 0 0 .18 0 0 0 0 .08 .4 0 0 0 -.18'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23t)'/%3E%3C/svg%3E") 0 0 / 160px 160px, linear-gradient(0deg, rgb(10 36 25 / .55), transparent 40%); }

/* ---------- day surfaces ---------- */
html[data-theme="day"] .act { background: var(--paper); }
html[data-theme="day"] .hero__frame { background: #F3F0E5; }
html[data-theme="day"] .hero__frame::after { box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), inset 0 -40px 60px -50px rgb(110 79 26 / .18); }
html[data-theme="day"] .hero__frame::before { background: conic-gradient(from 180deg at 50% 50%, rgb(138 106 42 / .14), rgb(138 106 42 / .42) 30%, rgb(255 255 255 / .95) 36%, rgb(138 106 42 / .3) 44%, rgb(138 106 42 / .1) 60%, rgb(138 106 42 / .26) 82%, rgb(138 106 42 / .14)); }
html[data-theme="day"] .hero__media::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55 .38' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .24 0 0 0 0 .18 0 0 0 0 .08 .4 0 0 0 -.18'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23t)'/%3E%3C/svg%3E") 0 0 / 160px 160px, repeating-linear-gradient(0deg, rgb(90 70 30 / .022) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgb(90 70 30 / .018) 0 1px, transparent 1px 3px), linear-gradient(0deg, rgb(243 240 229 / .5), transparent 30%); }

/* ---------- day words: every colour at least 4.5:1 on the pale ground ---------- */
html[data-theme="day"] .hero { color: #0F3022; }
html[data-theme="day"] .hero__eyebrow { color: #6E4F1A; }
html[data-theme="day"] .hero__title em { color: #6F2631; }
html[data-theme="day"] .hero__line { color: #34463B; }
html[data-theme="day"] .hero__type-live { color: #7A4E14; }
html[data-theme="day"] .hero__type-live::after { background: #6F2631; }
html[data-theme="day"] .hero__note { color: #46564B; }
html[data-theme="day"] .hero__callback { color: #1F3D2E; text-decoration-color: rgb(110 79 26 / .55); }
html[data-theme="day"] .hero__callback svg { color: #6E4F1A; }
html[data-theme="day"] .hero__cue { color: #46564B; }
html[data-theme="day"] .hero__cue i { background: rgb(15 48 34 / .22); }
html[data-theme="day"] .hero__cue i::after { background: #9A7A3A; }

/* ---------- calls to action: lacquer and faked glass (no backdrop blur over the moving paint) ---------- */
.hero .site-cta--glass, .hero .reel__ask { -webkit-backdrop-filter: none; backdrop-filter: none; }
.hero .site-cta--glass { border-color: rgb(251 248 241 / .34);
  background: linear-gradient(180deg, rgb(255 255 255 / .16), rgb(255 255 255 / .04) 52%, rgb(255 255 255 / .09)) rgb(8 30 21 / .46);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .32), inset 0 -1px 0 rgb(217 193 144 / .24), 0 14px 30px -16px rgb(0 0 0 / .6); }
.hero .site-cta--glass:hover { background: linear-gradient(180deg, rgb(255 255 255 / .24), rgb(255 255 255 / .08) 52%, rgb(255 255 255 / .12)) rgb(8 30 21 / .5); }
.hero .site-cta--ivory { position: relative; overflow: hidden; isolation: isolate; }
/* a label and its button change theme together: only movement and shadow transition */
.hero .site-cta { transition-property: transform, box-shadow; }
.hero .reel__ask { transition: none; }
/* lamplight passing over the lacquer, once every few breaths */
.hero .site-cta--ivory::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent 32%, rgb(217 193 144 / .5) 47%, rgb(255 255 255 / .55) 52%, transparent 68%);
  transform: translateX(-135%); animation: cta-sheen 10s cubic-bezier(.45, 0, .25, 1) 4s infinite; }
@keyframes cta-sheen { 0%, 76% { transform: translateX(-135%); } 100% { transform: translateX(135%); } }
html[data-theme="day"] .hero .site-cta--ivory { background: linear-gradient(180deg, #1F5A40, #0F3022 72%); color: #FBF8F1;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .26), inset 0 -1px 0 rgb(0 0 0 / .3), 0 0 0 1px rgb(110 79 26 / .35), 0 16px 30px -16px rgb(15 48 34 / .6); }
html[data-theme="day"] .hero .site-cta--ivory::after { background: linear-gradient(100deg, transparent 32%, rgb(217 193 144 / .3) 47%, rgb(255 240 210 / .26) 52%, transparent 68%); }
html[data-theme="day"] .hero .site-cta--glass { color: #0F3022; border-color: rgb(138 106 42 / .34);
  background: linear-gradient(180deg, rgb(255 255 255 / .95), rgb(255 252 244 / .74));
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgb(138 106 42 / .16), 0 12px 26px -18px rgb(70 45 15 / .45); }
html[data-theme="day"] .hero .site-cta--glass:hover { background: linear-gradient(180deg, #fff, rgb(255 252 244 / .9)); }

/* ---------- deck controls ---------- */
.hero .reel__ask { background: linear-gradient(180deg, rgb(255 255 255 / .15), rgb(255 255 255 / .04) 55%, rgb(255 255 255 / .08)) rgb(8 30 21 / .44);
  border-color: rgb(251 248 241 / .26); box-shadow: inset 0 1px 0 rgb(255 255 255 / .3), inset 0 -1px 0 rgb(217 193 144 / .2), 0 12px 28px -16px rgb(0 0 0 / .6); }
.hero .reel__ask:hover { background: linear-gradient(180deg, rgb(255 255 255 / .22), rgb(255 255 255 / .07) 55%, rgb(255 255 255 / .1)) rgb(8 30 21 / .48); }
.reel__note { color: rgb(251 248 241 / .66); }   /* night: was .5 alpha, 4.2:1 on the silk in glass-homeperf */
html[data-theme="day"] .reel__bars li { background: rgb(15 48 34 / .14); }
html[data-theme="day"] .reel__bars li i { background: #8A6A2A; }
html[data-theme="day"] .reel__count { color: #5E4315; }
html[data-theme="day"] .reel__chapter { color: #24382C; }
html[data-theme="day"] .reel__pause { border-color: rgb(15 48 34 / .22); background: linear-gradient(180deg, rgb(255 255 255 / .92), rgb(255 250 240 / .66)); color: #0F3022; box-shadow: inset 0 1px 0 #fff, 0 8px 20px -12px rgb(70 45 15 / .4); }
html[data-theme="day"] .hero .reel__ask { color: #0F3022; border-color: rgb(138 106 42 / .3);
  background: linear-gradient(180deg, rgb(255 255 255 / .94), rgb(255 250 240 / .7));
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgb(138 106 42 / .16), 0 12px 26px -16px rgb(70 45 15 / .4); }
html[data-theme="day"] .hero .reel__ask:hover { background: linear-gradient(180deg, #fff, rgb(255 250 240 / .88)); }
html[data-theme="day"] .reel__ask svg { color: #1F7A4A; }
html[data-theme="day"] .reel__ask i { color: #6E4F1A; }
html[data-theme="day"] .reel__note { color: #46564B; }

/* ---------- the brass lens ring the deck rests in (crisp CSS, not the soft shader buffer) ---------- */
.rl { position: absolute; left: 50%; top: calc(var(--deck-w) * .625); width: calc(var(--deck-w) * 1.36); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  transform: translate(-50%, -50%); animation: rl-in 1.8s cubic-bezier(.22, 1, .36, 1) .35s both; }
.rl::before, .rl i { position: absolute; inset: 0; border-radius: 50%; padding: 1px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.rl { filter: drop-shadow(0 0 1px rgb(0 0 0 / .6)); }   /* the ring stays legible over moving paint */
.rl::before { content: ""; padding: 1.5px; background: conic-gradient(from -40deg, rgb(217 193 144 / .34), rgb(226 200 150 / .8) 9%, rgb(255 246 222 / 1) 13%, rgb(217 193 144 / .7) 18%, rgb(217 193 144 / .36) 32%, rgb(217 193 144 / .24) 52%, rgb(217 193 144 / .46) 68%, rgb(217 193 144 / .28) 82%, rgb(217 193 144 / .34)); }
.rl::after { content: ""; position: absolute; inset: 10px; border-radius: 50%; border: 1px solid rgb(217 193 144 / .28); }
.rl i { display: block; padding: 2px; opacity: 0; background: conic-gradient(from -40deg, transparent 2%, rgb(255 250 235 / .95) 12%, transparent 24%); }
html[data-theme="day"] .rl { filter: drop-shadow(0 0 1px rgb(255 252 240 / .95)) drop-shadow(0 1px 2px rgb(90 66 20 / .3)); }
html[data-theme="day"] .rl::before { background: conic-gradient(from -40deg, rgb(126 94 34 / .4), rgb(126 94 34 / .82) 9%, rgb(255 255 255 / .95) 13%, rgb(126 94 34 / .72) 18%, rgb(126 94 34 / .42) 32%, rgb(126 94 34 / .28) 52%, rgb(126 94 34 / .5) 68%, rgb(126 94 34 / .32) 82%, rgb(126 94 34 / .4)); }
html[data-theme="day"] .rl::after { border-color: rgb(126 94 34 / .26); }
@keyframes rl-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.96); } }
@media (max-width: 749px) { .rl { width: calc(var(--deck-w) * 1.32); } }

/* ---------- the cards as glass objects ---------- */
.reel-card { box-shadow: 0 40px 70px -30px rgb(0 0 0 / .75), 0 0 0 1px rgb(217 193 144 / .2); }
html[data-theme="day"] .reel-card { box-shadow: 0 44px 70px -34px rgb(58 46 18 / .55), 0 14px 24px -18px rgb(58 46 18 / .35), 0 0 0 1px rgb(255 255 255 / .7); }
html[data-theme="day"] .reel-card__dim { background: #EEEBDF; }   /* by day, depth is morning haze, not darkness */
/* the frosted caption is recomputed whenever what's behind it moves: only the front card keeps a backdrop filter */
.reel-card:not([data-pos="0"]) .reel-card__cap { -webkit-backdrop-filter: none; backdrop-filter: none; }
/* the contact shadow the deck casts on the paint */
.reel__stage::before { content: ""; position: absolute; left: 2%; right: 6%; bottom: -26px; height: 52px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(0 0 0 / .55), rgb(0 0 0 / .18) 55%, transparent); transform: translateZ(-1px); }
html[data-theme="day"] .reel__stage::before { background: radial-gradient(closest-side, rgb(58 46 18 / .36), rgb(58 46 18 / .1) 55%, transparent); }

.rg { position: absolute; inset: 0; z-index: 2; display: none; border-radius: inherit; overflow: hidden; pointer-events: none; }
.reel-card[data-pos="0"] .rg { display: block; }
.rg i, .rg b { position: absolute; display: block; }
.rg__l { inset: -40%; transform: translate3d(calc(var(--gx, -.4) * -9%), calc(var(--gy, -.5) * -8%), 0); transition: transform .7s var(--ease-out); }
/* face glint: a soft window of light on the glass */
.rg__s { left: 30%; top: 26%; width: 34%; height: 26%; border-radius: 50%; background: radial-gradient(closest-side, rgb(255 255 255 / .24), rgb(255 255 255 / .07) 55%, transparent); animation: rg-drift 15s ease-in-out infinite alternate; }
/* refraction band: sweeps in as the card settles, then rests faintly, with warm and cool fringes */
.rg__b { top: 0; bottom: 0; left: 36%; width: 30%; opacity: .7;
  background: linear-gradient(100deg, transparent 14%, rgb(255 222 180 / .1) 32%, rgb(255 255 255 / .28) 45%, rgb(255 255 255 / .06) 49%, rgb(175 212 255 / .13) 55%, transparent 74%); }
.reel-card.is-settled .rg__b { animation: rg-sweep 2.2s var(--ease-out) both; }
/* edge light: a highlight that runs along the rim toward the light (the pointer, or a slow drift on touch) */
.rg__rim { inset: 0; border-radius: inherit; padding: 2px; overflow: hidden;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.rg__rim i { left: 5%; top: 14%; width: 90%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, #fff, rgb(255 240 205 / .8) 38%, rgb(255 230 180 / .2) 62%, transparent 76%);
  transform: translate3d(calc(var(--gx, -.6) * 58%), calc(var(--gy, -.62) * 72%), 0); transition: transform .5s var(--ease-out); }
.hero:not(.rg-live) .rg__rim i { animation: rg-orbit 18s ease-in-out infinite alternate; }
.rg-live .rg__s { animation: none; }
@keyframes rg-drift { to { transform: translate3d(38%, 26%, 0) scale(1.15); } }
@keyframes rg-sweep { 0% { transform: translate3d(-170%, 0, 0); opacity: 0; } 25% { opacity: 1; } 100% { transform: none; opacity: .7; } }
@keyframes rg-orbit { 0% { transform: translate3d(-36%, -46%, 0); } 50% { transform: translate3d(40%, -40%, 0); } 100% { transform: translate3d(48%, 30%, 0); } }

/* off-screen: nothing in the hero keeps animating */
.hero.is-away :is(.rg__s, .rg__b, .rg__rim i), .hero.is-away .site-cta--ivory::after, .hero.is-away .hero__cue i::after { animation-play-state: paused; }

/* ---------- header over the luminous day hero, before site.js marks it ready ---------- */
html[data-theme="day"] .bar:not([data-ready])[data-header-fg="light"] { --fg: var(--forest-900); background: linear-gradient(155deg, rgb(251 248 241 / .88), rgb(251 248 241 / .64)); border-color: rgb(255 255 255 / .75); box-shadow: inset 0 1px 0 #fff, 0 16px 38px -20px rgb(15 48 34 / .5); }
html[data-theme="day"] .bar:not([data-ready]) .bar__cta { background: var(--forest-800); color: var(--ivory); box-shadow: none; }

/* ---------- theme switch over the live hero: the paint carries it (a short dusk or sunrise), so the page snaps
   instead of cross-fading two inverted palettes (which would put the words at ~3.6:1 for a moment) ---------- */
html.bc-sky::view-transition-old(root) { animation: none; opacity: 0; }
html.bc-sky::view-transition-new(root) { animation: none; }

/* ---------- still: a finished composition, nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
  .rg__s, .rg__b, .rg__rim i, .reel-card.is-settled .rg__b, .rl, .hero .site-cta--ivory::after, .hero__art-fallback::after { animation: none !important; }
  .rg__l, .rg__rim i { transition: none; }
}
html.motion-off :is(.rg__s, .rg__b, .rg__rim i, .rl, .hero__art-fallback::after), html.motion-off .hero .site-cta--ivory::after { animation: none !important; }
html.motion-off .hero__art { display: none; }

/* the act is a night room in the original design: keep its own tokens when the page's night palette
   redefines them (fixes the night "Ask privately" label and the pale card tag, also present in glass-homeperf) */
html[data-theme="night"] .act { --forest-900: #0F3022; --forest-700: #1F5A40; --forest-500: #3F8A62; --maroon: #6F2631; --ink: #241F19; --ink-soft: #4D453B; }

/* ---------- hero-lab oil-final ---------- */
/* the still oil: the same surreal hues as the live paint (pearl lilac, sea-glass, rose-gold, a breath of saffron by day;
   teal, violet, amber by night) float over a softened painting, under the calm grounds that keep the words legible */
.hero__art-fallback { --oh: radial-gradient(24% 14% at 38% 32%, rgb(8 30 21 / .55), transparent 75%), radial-gradient(30% 26% at 88% 22%, rgb(28 98 104 / .34), transparent 72%), radial-gradient(24% 26% at 68% 90%, rgb(70 42 110 / .34), transparent 72%),
  radial-gradient(20% 18% at 97% 74%, rgb(130 84 30 / .26), transparent 72%), radial-gradient(34% 28% at 76% 50%, rgb(20 70 90 / .2), transparent 74%); }
html[data-theme="day"] .hero__art-fallback { --oh: radial-gradient(30% 26% at 88% 20%, rgb(214 200 246 / .55), transparent 72%), radial-gradient(28% 30% at 60% 86%, rgb(178 234 222 / .5), transparent 72%),
  radial-gradient(22% 20% at 97% 72%, rgb(246 202 190 / .5), transparent 72%), radial-gradient(18% 14% at 70% 10%, rgb(255 222 160 / .4), transparent 72%), linear-gradient(rgb(248 244 234 / .3), rgb(248 244 234 / .3)); }
/* the caption glass changes weight by fading a layer (no background snap when a card settles or leaves) */
.reel-card .reel-card__cap { background: linear-gradient(160deg, rgb(20 61 44 / .38), rgb(10 36 25 / .62)); }
.reel-card__cap::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: linear-gradient(160deg, rgb(20 61 44 / .45), rgb(10 36 25 / .53)); transition: opacity .45s ease; }
.reel-card.is-settled[data-pos="0"]:not(.is-out) .reel-card__cap::before { opacity: 0; }
/* the flight is driven by the Web Animations API on one continuous path; the old keyframes stand down */
.reel-card.is-fly, .reel-card.is-fly .reel-card__dim { animation: none; }
/* the deck leans after a held pointer and fans toward that side; on release it springs back with a little overshoot */
.reel__stage { -webkit-touch-callout: none; }
.reel__tilt { transform: translate3d(var(--hx, 0px), 0, var(--hl, 0px)) rotateX(var(--rx, 0deg)) rotateY(calc(var(--ry, 0deg) + var(--hy, 0deg))) rotateZ(var(--hz, 0deg)); }
.reel__tilt.is-held { --hl: 16px; transition: transform .2s cubic-bezier(.2, .8, .3, 1); }
.reel__tilt.is-spring { transition: transform .8s cubic-bezier(.28, 1.5, .5, 1); }
.reel__tilt .reel-card { transform: translate3d(calc(var(--k) * 26px * var(--sp) * var(--fx, 1)), calc(var(--k) * -8px * var(--sp)), calc(var(--k) * -60px)) rotate(calc(var(--k) * 4.5deg * var(--sp) * var(--fx, 1))) scale(calc(1 - var(--k) * .04)); }
.reel__tilt.is-held .reel-card:not(.no-trans) { transition: transform .32s cubic-bezier(.2, .8, .3, 1), opacity .6s ease; }
@media (prefers-reduced-motion: reduce) { .reel__tilt.is-held { --hl: 0px; } }
html.motion-off .reel__tilt.is-held { --hl: 0px; }