/* First-screen backgrounds (2026-10-08, after Awwwards "interactive grid" sites). A faint pattern behind the first screen;
   on desktop a teal spotlight brightens the pattern under the cursor (js/fs-bg.js). Each page has its own pattern:
   Products = dots, Industries = map contours, Manufacturing = engineering grid, About = rings. */
.fs-host{position:relative;isolation:isolate}
.fs-host>.p-head,.fs-host .p-head{background:transparent}
.fs-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  -webkit-mask-image:radial-gradient(ellipse 85% 80% at 50% 50%,#000 35%,transparent 100%);mask-image:radial-gradient(ellipse 85% 80% at 50% 50%,#000 35%,transparent 100%)}
.fs-bg::before{content:"";position:absolute;inset:0}
.fs-spot{position:absolute;left:0;top:0;width:440px;height:440px;margin:-220px 0 0 -220px;opacity:0;transition:opacity .4s;will-change:transform;
  -webkit-mask-image:radial-gradient(circle closest-side,#000,transparent);mask-image:radial-gradient(circle closest-side,#000,transparent)}
.fs-lit .fs-spot{opacity:1}

/* Manufacturing: engineering grid */
.fs-grid::before,.fs-grid .fs-spot{background-image:linear-gradient(var(--c1) 1px,transparent 1px),linear-gradient(90deg,var(--c1) 1px,transparent 1px),linear-gradient(var(--c2) 1px,transparent 1px),linear-gradient(90deg,var(--c2) 1px,transparent 1px);background-size:120px 120px,120px 120px,24px 24px,24px 24px}
.fs-grid::before{--c1:rgba(15,118,110,.10);--c2:rgba(15,118,110,.05)}
.fs-grid .fs-spot{--c1:rgba(15,118,110,.45);--c2:rgba(15,118,110,.22)}

/* Products: precision dot plate */
.fs-dots::before,.fs-dots .fs-spot{background-image:radial-gradient(circle,var(--c1) 1.3px,transparent 1.8px);background-size:22px 22px}
.fs-dots::before{--c1:rgba(15,118,110,.20)}
.fs-dots .fs-spot{--c1:rgba(15,118,110,.85)}

/* Industries: map contour lines (fields and roads) */
.fs-topo::before{background:url(../assets/bg/topo.svg) 0 0/100% 100% no-repeat;opacity:.2}
.fs-topo .fs-spot{background:url(../assets/bg/topo.svg) no-repeat}

/* About: rings, like a bore seen end-on, centred behind the A */
.fs-rings::before{background:url(../assets/bg/rings.svg) 0 0/100% 100% no-repeat;opacity:.14}
.fs-rings .fs-spot{background:url(../assets/bg/rings.svg) no-repeat}