/**
 * MatBuilder — lnwkspages block "hero" (replaces themes/lnwks/assets/css/lnwkspages/hero.css).
 * Template: modules/lnwkspages/blocks/hero/template.tpl. Tokens (--rg-*, --mb-*): assets/css/custom.css.
 */
.lnwks-hero{position:relative;overflow:hidden;padding-block:clamp(3rem,7vw,6rem);background:#161616;color:var(--rg-text)}
/* First block: the whole screen under the sticky header (--rg-header-h: 64px, 80px from 768px), content centred,
   room kept at the bottom for the scroll cue */
.lnwks-hero--full{display:flex;align-items:center;min-height:calc(100svh - var(--rg-header-h,80px));padding-block:clamp(2.5rem,6vh,4rem) clamp(4.5rem,10vh,6.5rem)}
.lnwks-hero--full>.lnwks-hero__grid{width:100%}
@media (min-width:992px){.lnwks-hero--full .lnwks-hero__media{width:min(100%,34rem,62svh)}}
.lnwks-hero__grid{display:grid;gap:clamp(2.5rem,5vw,4rem);align-items:center}
@media (min-width:992px){.lnwks-hero--media .lnwks-hero__grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}

.lnwks-hero__inner{display:grid;gap:1.5rem;justify-items:start}
.lnwks-hero--center .lnwks-hero__inner{justify-items:center;text-align:center}
.lnwks-hero .lnwks-hero__eyebrow{margin:0;font-family:var(--rg-caps);font-size:.75rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--rg-brand)}
/* ".lnwks-hero" in the selector beats ".page-content h1" (custom.css) */
.lnwks-hero .lnwks-hero__title{margin:0;font-family:var(--rg-font);font-weight:400;font-size:clamp(2.75rem,6vw,4.75rem);line-height:.98;letter-spacing:.005em;text-transform:uppercase;color:var(--rg-text)}
.lnwks-hero .lnwks-hero__title em{font-size:1.08em;line-height:1}
.lnwks-hero__text{margin:0;max-width:36rem;font-size:clamp(.9375rem,1.2vw,1.0625rem);line-height:1.7;color:var(--rg-text-soft)}
.lnwks-hero__ctas{display:flex;flex-wrap:wrap;gap:.875rem;margin-top:.75rem}
.lnwks-hero--center .lnwks-hero__ctas{justify-content:center}
.lnwks-hero__link{font-family:var(--rg-caps);font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--rg-text);text-decoration:none;border-bottom:1px solid rgba(var(--rg-brand-rgb),.6);padding-bottom:2px}
.lnwks-hero__link:hover{color:var(--rg-brand)}

/* The visual: an illustration on a transparent background, contained */
.lnwks-hero__media{display:block;justify-self:center;width:min(100%,32rem)}
.lnwks-hero__image{display:block;width:100%;height:auto}
@media (max-width:991.98px){.lnwks-hero__media{width:min(80%,24rem)}}

/* The illustration settles once at load; never hidden (it can be the LCP) */
@media (prefers-reduced-motion:no-preference){
  .lnwks-hero__image{animation:mb-hero-in .8s cubic-bezier(.2,.8,.2,1) both}
  @keyframes mb-hero-in{from{transform:translateY(16px) rotate(-1.5deg)}to{transform:none}}
}

/* ---------- MatBuilder illustration in three layers (template: matbuilder/hero-builder-*.svg) ----------
   Stacked at the same 350×330 frame. At load (transform): the yellow square turns into place, the builder and his mat
   rise a little, then the bubble pops from its tail and floats gently. On scroll (translate / rotate, composed with
   the load animation): each layer moves at its own pace while the hero leaves the screen, --mb-scroll from 0 to 1
   set by assets/js/custom.js ("MatBuilder hero layers"). The builder is never hidden (LCP candidate). */
.mb-builder{position:relative;aspect-ratio:350/330}
.mb-builder__layer{position:absolute;inset:0;display:block;width:100%;height:100%;will-change:transform}
.mb-builder__layer--square{transform-origin:59.7% 43.9%;translate:0 calc(var(--mb-scroll,0) * 9%);rotate:calc(var(--mb-scroll,0) * 5deg)}
.mb-builder__layer--character{transform-origin:43% 91%;translate:0 calc(var(--mb-scroll,0) * 3%)}
.mb-builder__layer--bubble{transform-origin:39.7% 27%;translate:0 calc(var(--mb-scroll,0) * -14%);rotate:calc(var(--mb-scroll,0) * -6deg)}
@media (prefers-reduced-motion:no-preference){
  .mb-builder__layer--square{animation:mb-square-in .9s cubic-bezier(.2,.9,.25,1.15) both}
  .mb-builder__layer--character{animation:mb-character-in .8s .12s cubic-bezier(.2,.8,.2,1) both}
  .mb-builder__layer--bubble{animation:mb-bubble-in .55s .6s cubic-bezier(.3,1.4,.5,1) both,mb-bubble-float 5s 1.4s ease-in-out infinite}
  @keyframes mb-square-in{from{opacity:0;transform:scale(.88) rotate(-6deg)}to{opacity:1;transform:none}}
  @keyframes mb-character-in{from{transform:translateY(14px)}to{transform:none}}
  @keyframes mb-bubble-in{from{opacity:0;transform:scale(.4) rotate(8deg)}to{opacity:1;transform:none}}
  @keyframes mb-bubble-float{0%,100%{transform:none}50%{transform:translateY(-4px) rotate(-1.5deg)}}
}
@media (prefers-reduced-motion:reduce){.mb-builder__layer{translate:none;rotate:none}}

/* ---------- Scroll cue (first hero, bottom right): label and a line with a yellow dot running down ---------- */
.mb-scroll{position:absolute;right:max(var(--mb-gutter),calc((100% - var(--mb-content)) / 2));bottom:clamp(1.25rem,4vh,2.5rem);z-index:2;display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:.5rem;border:0;background:none;color:var(--rg-text);font-family:var(--rg-font);font-size:.8125rem;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:color .2s}
.mb-scroll__label{writing-mode:vertical-rl}
.mb-scroll__line{position:relative;width:2px;height:3.5rem;border-radius:2px;background:rgba(var(--rg-text-rgb),.2);overflow:hidden}
.mb-scroll__line::after{content:"";position:absolute;left:-2px;top:-6px;width:6px;height:6px;border-radius:50%;background:var(--rg-brand);animation:mb-scroll 2.2s ease-in-out infinite}
@keyframes mb-scroll{0%{transform:translateY(0);opacity:0}15%,80%{opacity:1}100%{transform:translateY(3.9rem);opacity:0}}
.mb-scroll:hover{color:var(--rg-brand)}
.mb-scroll:focus{outline:none}
.mb-scroll:focus-visible{outline:2px solid var(--rg-brand);outline-offset:4px;border-radius:4px}
@media (prefers-reduced-motion:reduce){.mb-scroll__line::after{animation:none;top:1.5rem}}
@media (max-width:767.98px){.mb-scroll{display:none}.lnwks-hero--full{min-height:0}}