/* Site-wide motion layer, v1 (22 Sep 2026). Companion to assets/js/motion.js; see the note there. Every rule is
   scoped to html.tbm (set by the script) so the page renders normally if the script is absent, and html.tbm-still
   (reduced motion) keeps everything static. Transform and opacity only; nothing here changes layout. */

/* Page load: the main column settles in. */
html.tbm:not(.tbm-still) .tb-main{animation:tbmIn .9s var(--tb-ease-out) both}
@keyframes tbmIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* The theme's one-shot fades hand over to this layer. */
html.tbm [data-reveal]{opacity:1;transform:none;transition:none}
html.tbm .tb-h2[data-reveal],html.tbm body.tb-body .tb-h2[data-reveal]{clip-path:none;transition:none}

/* Entrances: children of a group rise in sequence with a slight 3D tilt, and drop back when scrolled above. */
html.tbm:not(.tbm-still) [data-tbm-group]{perspective:1200px}
html.tbm:not(.tbm-still) [data-tbm]{opacity:0;transform:translateY(44px) rotateX(-7deg) scale(.97);transform-origin:50% 100%;transition:opacity .8s var(--tb-ease-out),transform 1s var(--tb-ease-out);transition-delay:0ms}
html.tbm:not(.tbm-still) [data-tbm].is-on{opacity:1;transform:none;transition-delay:calc(var(--k,0) * 85ms)}
html.tbm:not(.tbm-still) .tb-cards3 article>b,html.tbm:not(.tbm-still) .tb-steps>li>b{display:inline-block;opacity:0;transform:translateX(-14px);transition:opacity .5s var(--tb-ease-out),transform .6s var(--tb-ease-out);transition-delay:0ms}
html.tbm:not(.tbm-still) [data-tbm].is-on>b{opacity:1;transform:none;transition-delay:calc(var(--k,0) * 85ms + .35s)}

/* Headings, word by word. Each word rises out of a mask; descenders are kept by the small padding. */
html.tbm .tbm-w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.12em;margin-bottom:-.12em}
html.tbm:not(.tbm-still) .tbm-wi{display:inline-block;transform:translateY(112%);transition:transform .9s var(--tb-ease-out);transition-delay:calc(var(--k,0) * 85ms + var(--w,0) * 45ms)}
html.tbm:not(.tbm-still) .is-on .tbm-wi{transform:none}
html.tbm:not(.tbm-still) [data-tbm]:not(.is-on) .tbm-wi{transition-delay:0ms}

/* Page hero: stays pinned while the first section slides over it; its copy and art scrub away with the scroll. */
html.tbm .tb-inner>.tb-page-hero{position:sticky;top:var(--hero-top,0px);z-index:0;overflow:hidden}
/* Pinning the hero so the next section slides over it only works where the hero fits. On a
   phone its own content is taller than the frame, and overflow:hidden was cutting the tail
   off it: on /for-councils/ the caption ran 12px past the clip and the reader never saw the
   end of the sentence. Narrow or short viewports get an ordinary hero that scrolls. */
@media (max-width:900px),(max-height:760px){
  html.tbm .tb-inner>.tb-page-hero{position:static;overflow:visible}
}
html.tbm .tb-inner>.tb-page-hero>.tb-wrap{position:relative;z-index:1}
html.tbm .tb-inner>.tb-page-hero ~ *{position:relative;z-index:1}
html.tbm .tb-inner>.tb-page-hero + *{border-radius:30px 30px 0 0;box-shadow:0 -26px 60px -30px rgba(0,0,0,.5)}
html.tbm .tb-inner>.tb-section:not(.tb-dark):not(.tb-mist){background:var(--tb-paper)}
html.tbm .tb-page-hero::before{content:"";position:absolute;inset:-25% -15%;background:radial-gradient(34% 44% at 68% 42%,rgba(217,164,65,.20),transparent 70%),radial-gradient(28% 40% at 18% 78%,rgba(13,61,53,.12),transparent 70%);pointer-events:none;z-index:0}
html.tbm:not(.tbm-still) .tb-page-hero::before{animation:tbmGlow 16s ease-in-out infinite alternate}
@keyframes tbmGlow{from{transform:translate(-3%,-2%) rotate(-2deg)}to{transform:translate(3%,3%) rotate(2deg)}}
html.tbm:not(.tbm-still) .tb-page-hero__copy{transform:translateY(calc(var(--hp,0) * -70px));opacity:calc(1 - var(--hp,0) * 1.25)}
html.tbm:not(.tbm-still) .tb-page-hero .tb-art{transform:translateY(calc(var(--hp,0) * 54px)) scale(calc(1 - var(--hp,0) * .08));opacity:calc(1 - var(--hp,0) * 1.15)}
/* Hero load choreography: eyebrow, title words, lead, actions, then the art panel and its nodes. */
html.tbm:not(.tbm-still) .tbm-hero .tb-eyebrow,html.tbm:not(.tbm-still) .tbm-hero .tb-lead,html.tbm:not(.tbm-still) .tbm-hero .tb-actions{opacity:0;transform:translateY(26px);transition:opacity .9s var(--tb-ease-out),transform 1s var(--tb-ease-out)}
html.tbm:not(.tbm-still) .tbm-hero.is-ready .tb-eyebrow{opacity:1;transform:none;transition-delay:.05s}
html.tbm:not(.tbm-still) .tbm-hero.is-ready .tb-lead{opacity:1;transform:none;transition-delay:.55s}
html.tbm:not(.tbm-still) .tbm-hero.is-ready .tb-actions{opacity:1;transform:none;transition-delay:.72s}
html.tbm:not(.tbm-still) .tbm-hero .tbm-wi{transition-delay:calc(.15s + var(--w,0) * 55ms)}
html.tbm:not(.tbm-still) .tbm-hero.is-ready .tbm-wi{transform:none}
html.tbm:not(.tbm-still) .tbm-hero .tb-art>*{animation:tbmArt 1.1s var(--tb-ease-out) both;animation-delay:.4s}
html.tbm:not(.tbm-still) .tbm-hero .tb-art>*+*{animation-delay:.6s}
@keyframes tbmArt{from{opacity:0;transform:translateY(30px) scale(.96)}to{opacity:1;transform:none}}

/* Dark and mist sections carry a soft glow that drifts with the scroll. */
html.tbm .tb-section.tb-dark::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(40% 55% at calc(12% + var(--s,.5) * 76%) calc(18% + var(--s,.5) * 55%),rgba(217,164,65,.15),transparent 70%)}
html.tbm .tb-section.tb-mist::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(38% 50% at calc(85% - var(--s,.5) * 70%) calc(20% + var(--s,.5) * 50%),rgba(255,255,255,.75),transparent 70%)}
html.tbm .tb-section.tb-dark>*,html.tbm .tb-section.tb-mist>*{position:relative}

/* Step lists: the step nearest the middle of the screen takes a gold edge. */
html.tbm:not(.tbm-still) .tb-steps>li{box-shadow:0 0 0 1px rgba(217,164,65,calc(var(--f,0) * .85)),0 24px 40px -30px rgba(13,61,53,calc(var(--f,0) * .5));transition:box-shadow .25s linear,opacity .8s var(--tb-ease-out),transform 1s var(--tb-ease-out)}

/* Cards tilt under the pointer. */
html.tbm:not(.tbm-still) .tbm-tilt{transition:transform .45s var(--tb-ease-out),box-shadow .45s var(--tb-ease-out),opacity .8s var(--tb-ease-out)}
html.tbm:not(.tbm-still) .tbm-tilt.is-tilt.is-on{transform:perspective(900px) rotateY(var(--tx,0deg)) rotateX(var(--ty,0deg)) translateY(-4px);transition:transform .12s linear;box-shadow:0 30px 60px -36px rgba(13,61,53,.45)}

/* Eyebrow rules draw themselves as their block arrives. */
html.tbm:not(.tbm-still) [data-tbm] .tb-eyebrow::before,html.tbm:not(.tbm-still) .tb-eyebrow[data-tbm]::before{width:0;transition:width .7s var(--tb-ease-out) .15s}
html.tbm:not(.tbm-still) [data-tbm].is-on .tb-eyebrow::before,html.tbm:not(.tbm-still) .tb-eyebrow[data-tbm].is-on::before{width:22px}
html.tbm:not(.tbm-still) .tbm-hero .tb-eyebrow::before{width:0;transition:width .7s var(--tb-ease-out) .2s}
html.tbm:not(.tbm-still) .tbm-hero.is-ready .tb-eyebrow::before{width:22px}

/* Dark sections: a soft light follows the pointer (fine pointers only). */
html.tbm:not(.tbm-still) .tb-section.tb-dark.has-pointer::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(217,164,65,.22),transparent 70%);opacity:var(--mo,0);transition:opacity .4s}

/* Buttons: magnetic under the pointer, arrow nudges on hover. */
html.tbm:not(.tbm-still) .tb-btn{transition:transform .35s var(--tb-ease-out),background .3s,color .3s,border-color .3s,box-shadow .3s}
html.tbm:not(.tbm-still) .tb-btn.is-mag{transition:transform .12s linear}
html.tbm:not(.tbm-still) .tb-btn svg,html.tbm:not(.tbm-still) .tb-link svg{transition:transform .35s var(--tb-ease-out)}
html.tbm:not(.tbm-still) .tb-btn:hover svg,html.tbm:not(.tbm-still) .tb-link:hover svg{transform:translateX(4px)}

/* Small screens: the curtain and hero scrub stay; the tilt is pointer-only anyway. */
@media (max-width:640px){
  html.tbm:not(.tbm-still) [data-tbm]{transform:translateY(30px) scale(.98)}
  html.tbm .tb-inner>.tb-page-hero + *{border-radius:22px 22px 0 0}
}

/* ===========================================================================
   v2 (23 Sep 2026): the account screens set the standard, so the rest of the
   site now speaks the same language. Two drifting lights behind every dark
   scene, glass over that light, a spotlight inside a card under the pointer,
   pictures that wipe open, a reading bar across the top, and hero art that
   leans towards the cursor. Transform, opacity and filter only.
   =========================================================================== */

/* Two large, blurred lights drifting behind the dark scenes. */
html.tbm .tbm-aur-host{position:relative;isolation:isolate}
/* One clipped layer holds both lights, so they never widen the page or bleed into the
   section above or below. The host already sets position:relative on its own children, so
   these rules carry the same weight and sit later in the file. */
html.tbm .tbm-aur-host>.tbm-aurs{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;border-radius:inherit;display:block}
html.tbm .tbm-aurs .tbm-aur{position:absolute;display:block;border-radius:50%;filter:blur(88px);pointer-events:none;height:auto}
/* The lights also ride the section's own scroll progress (--s), so they move as you read. */
html.tbm .tbm-aurs .tbm-aur--a{width:min(52vw,720px);aspect-ratio:1;background:rgb(47,143,116);opacity:.55;right:-10%;top:calc(-18% + var(--s,.5) * 26%)}
html.tbm .tbm-aurs .tbm-aur--b{width:min(44vw,600px);aspect-ratio:1;background:rgb(217,164,65);opacity:.3;left:-9%;bottom:calc(-22% + var(--s,.5) * 22%)}
html.tbm:not(.tbm-still) .tbm-aur--a{animation:tbmAurA 26s ease-in-out infinite alternate}
html.tbm:not(.tbm-still) .tbm-aur--b{animation:tbmAurB 34s ease-in-out infinite alternate}
@keyframes tbmAurA{to{transform:translate3d(-7%,9%,0) scale(1.18)}}
@keyframes tbmAurB{to{transform:translate3d(9%,-8%,0) scale(1.12)}}
html.tbm .tbm-aur-host>*:not(.tbm-aurs){position:relative;z-index:1}
/* The pale sections get the same lights, far quieter, so no section is entirely still. */
html.tbm .tb-mist>.tbm-aurs .tbm-aur{opacity:.1;filter:blur(110px)}

/* Glass: cards sitting on a dark scene take the light behind them. */
html.tbm .tb-dark .tb-card,html.tbm .tb-dark .tb-cards3 article,html.tbm .tb-dark .tb-partner,html.tbm .tb-final .tb-final__route{
  background:rgba(255,255,255,.065);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
html.tbm .tb-dark .tb-card:hover,html.tbm .tb-dark .tb-cards3 article:hover,html.tbm .tb-final .tb-final__route:hover{background:rgba(255,255,255,.1);border-color:rgba(243,207,127,.4)}

/* A spotlight inside the card, following the pointer. */
html.tbm:not(.tbm-still) .tbm-spot{position:relative;overflow:hidden}
html.tbm:not(.tbm-still) .tbm-spot::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;z-index:0;
  background:radial-gradient(240px circle at var(--cx,50%) var(--cy,50%),rgba(217,164,65,.20),transparent 68%);
  opacity:var(--co,0);transition:opacity .35s ease}
html.tbm:not(.tbm-still) .tbm-spot>*{position:relative;z-index:1}

/* Headings: each word rises out of its mask and sharpens as it lands. */
html.tbm:not(.tbm-still) .tbm-wi{filter:blur(5px);transition:transform .9s var(--tb-ease-out),filter .7s var(--tb-ease-out);transition-delay:calc(var(--k,0) * 85ms + var(--w,0) * 45ms)}
html.tbm:not(.tbm-still) .is-on .tbm-wi{filter:none}
/* The hero reveals on load rather than on scroll, so it clears the blur on its own signal. */
html.tbm:not(.tbm-still) .tbm-hero.is-ready .tbm-wi{filter:none}

/* Pictures open with a wipe and settle out of a slight zoom. */
html.tbm:not(.tbm-still) .tbm-wipe{clip-path:inset(0 0 100% 0);transform:scale(1.06);opacity:.001;
  transition:clip-path 1s var(--tb-ease-out),transform 1.2s var(--tb-ease-out),opacity .5s linear}
html.tbm:not(.tbm-still) .tbm-wipe.is-on{clip-path:inset(0 0 0 0);transform:none;opacity:1}

/* The reading bar: the same shape as the step bar on the account screens. */
html.tbm .tbm-rail{position:fixed;inset:0 0 auto 0;height:3px;z-index:200;pointer-events:none;background:transparent}
html.tbm .tbm-rail i{display:block;height:100%;width:100%;transform:scaleX(var(--tbm-read,0));transform-origin:left center;
  background:linear-gradient(90deg,var(--tb-leaf,#1d6e5c),var(--tb-gold,#d9a441));will-change:transform}
html.tbm-still .tbm-rail{display:none}

/* Hero art leans a few pixels towards the pointer, on top of the scroll scrub. */
html.tbm:not(.tbm-still) .tbm-hero .tb-art{
  transform:translate3d(calc(var(--px,0) * 10px),calc(var(--hp,0) * 54px + var(--py,0) * 8px),0) scale(calc(1 - var(--hp,0) * .08));
  transition:transform .5s cubic-bezier(.2,.7,.2,1)}
html.tbm:not(.tbm-still) .tbm-hero .tb-page-hero__copy{transition:transform .5s cubic-bezier(.2,.7,.2,1)}

/* The curtain edge catches a hairline of light as the first section rides over the hero. */
html.tbm .tb-inner>.tb-page-hero + *{position:relative}
html.tbm .tb-inner>.tb-page-hero + *::before{content:"";position:absolute;left:8%;right:8%;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(243,207,127,.65),transparent);pointer-events:none;z-index:2}

@media (max-width:640px){
  html.tbm .tbm-aur{filter:blur(54px)}
  html.tbm .tbm-rail{height:2px}
  html.tbm .tb-dark .tb-card,html.tbm .tb-dark .tb-cards3 article{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.07)}
}

/* Reduced motion: everything visible and still. */
html.tbm-still [data-tbm],html.tbm-still .tbm-wi,html.tbm-still .tb-cards3 article>b,html.tbm-still .tb-steps>li>b{opacity:1;transform:none;transition:none}
html.tbm-still .tb-inner>.tb-page-hero{position:relative}
html.tbm-still .tb-page-hero__copy,html.tbm-still .tb-page-hero .tb-art{transform:none;opacity:1}
html.tbm-still .tbm-wipe{clip-path:none;transform:none;opacity:1}
html.tbm-still .tbm-aur{animation:none}