/* ===========================================================================
   HERITAGE, motion (Mike, 30 Sep 2026: "a tiny bit more alive").
   Slow and quiet on purpose: the photographs drift, the hero arrives in
   order, sections rise into place as they scroll in, the figures count up,
   and the header follows you down the page. Everything here switches off for
   anyone who has asked their device for reduced motion, and nothing is
   hidden unless the script is running (the .js class on <html>).
   =========================================================================== */

/* ---------- the photographs drift ---------- */
.a .hero img.bg{ transform-origin:50% 38%; animation:drift 34s ease-in-out infinite alternate }
.phero .bg{ transform-origin:50% 60%; animation:drift-s 40s ease-in-out infinite alternate }
@keyframes drift{ from{ transform:scale(1.03) } to{ transform:scale(1.16) translate(-1.2%,-.8%) } }
@keyframes drift-s{ from{ transform:scale(1.02) } to{ transform:scale(1.1) translate(1%,-.6%) } }
.a .hero video.bg{ transform:scale(1.02) }

/* ---------- the hero arrives in order ---------- */
@keyframes rise{ from{ opacity:0; transform:translateY(26px) } to{ opacity:1; transform:none } }
@keyframes fade{ from{ opacity:0 } to{ opacity:1 } }
@keyframes line{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }
.js .a .top{ animation:fade 1s ease both }
.js .hero .in > .eyebrow{ animation:rise 1s .15s cubic-bezier(.2,.7,.2,1) both }
.js .hero h1 .sans{ animation:rise 1.1s .3s cubic-bezier(.2,.7,.2,1) both }
.js .hero h1 .serif{ animation:rise 1.1s .5s cubic-bezier(.2,.7,.2,1) both }
.js .hero .in > p{ animation:rise 1s .75s cubic-bezier(.2,.7,.2,1) both }
.js .hero .cta{ animation:rise 1s .95s cubic-bezier(.2,.7,.2,1) both }
.js .hero .pillars{ animation:fade 1.2s 1.2s ease both }
.a .hero .pillars::before{ content:""; position:absolute; left:40px; right:40px; top:-1px; height:1px; z-index:1;
                           background:var(--red); transform-origin:left; transform:scaleX(0) }
.js .hero .pillars::before{ animation:line 1.6s 1.4s cubic-bezier(.6,0,.2,1) forwards }
@media (max-width:720px){ .a .hero .pillars::before{ left:20px; right:20px } }
.a .pillars > a b{ transition:color .25s }
.a .pillars > a:hover b{ color:var(--red) }
.js .phero .in > *{ animation:rise 1s cubic-bezier(.2,.7,.2,1) both }
.js .phero .in > :nth-child(2){ animation-delay:.15s }
.js .phero .in > :nth-child(3){ animation-delay:.3s }
.js .phero .in > :nth-child(4){ animation-delay:.45s }

/* ---------- the header follows you down ---------- */
.a .top.stuck{ position:fixed; background:rgba(12,13,16,.94); box-shadow:0 1px 0 rgba(255,255,255,.08);
               animation:drop .45s cubic-bezier(.2,.7,.2,1) both }
@supports (backdrop-filter:blur(8px)){ .a .top.stuck{ background:rgba(12,13,16,.82); backdrop-filter:blur(12px) } }
.a .top .bar{ transition:height .35s ease }
.a .top .brand svg{ transition:width .35s ease }
.a .top.stuck .bar{ height:74px }
.a .top.stuck .brand svg{ width:148px }
.a .top.stuck .brand span{ display:none }
@keyframes drop{ from{ transform:translateY(-100%) } to{ transform:none } }

/* ---------- sections rise into place ---------- */
.js .rv{ opacity:0; transform:translateY(30px);
         transition:opacity .9s ease, transform 1s cubic-bezier(.2,.7,.2,1); transition-delay:var(--d,0s) }
.js .rv.in{ opacity:1; transform:none }

/* the latest cover floats, very slightly */
.a .mag .big{ animation:float 7s ease-in-out infinite alternate }
@keyframes float{ from{ transform:translateY(0) } to{ transform:translateY(-12px) } }

/* the figures count up; fixed-width digits so the line does not jiggle */
.figs b, .rgrid b, .views b{ font-variant-numeric:tabular-nums }

/* "See every sector" under a client wall, on its own */
.allc{ margin-top:34px; text-align:center }

/* ---------- reduced motion: everything still, everything visible ---------- */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important }
  .js .rv{ opacity:1; transform:none }
  .a .hero .pillars::before{ transform:scaleX(1) }
}

/* the video's dawn sky is brighter than the old photograph: a heavier shade
   behind the headline keeps the white type readable */
.a .hero video.bg + .shade{
  background:linear-gradient(to bottom,rgba(5,6,10,.62) 0%,rgba(5,6,10,.42) 35%,rgba(5,6,10,.5) 62%,rgba(5,6,10,.92) 100%) }