/* ===== Motion & interaction layer (stage 3) — calm, corporate, brand palette only ===== */
:root{--ease:cubic-bezier(.22,.61,.36,1);--lift:0 9px 20px -11px rgba(30,39,68,.35)}

/* header: soft shadow once the page scrolls */
.top{transition:box-shadow .3s var(--ease),background-color .3s var(--ease)}
.top.scrolled{box-shadow:0 4px 12px -9px rgba(30,39,68,.45);background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px)}
/* nav: underline grows from the centre */
.nav a{position:relative}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:center;transition:transform .28s var(--ease)}
.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1)}
.nav a[aria-current="page"]::after{display:none}

/* buttons */
.btn{transition:transform .2s var(--ease),box-shadow .2s var(--ease),background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.btn:hover{}
.btn-primary:hover{box-shadow:0 5px 11px -6px rgba(62,101,86,.75)}
.btn:active{transform:translateY(0)}

/* text links with an arrow: underline draws in */
.more{background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:background-size .3s var(--ease),color .2s;text-decoration:none;padding-bottom:2px}
.more:hover,.more:focus-visible{background-size:100% 1.5px}
.card:hover .more{background-size:100% 1.5px}
.card .more{align-self:flex-start}

/* cards: clickable ones lift, static ones just firm up their border */
.card{transition:transform .32s var(--ease),box-shadow .32s var(--ease),border-color .32s var(--ease)}
.card:hover{border-color:#C5D1CA}
.card.post:hover,.card.svc:hover,.scen-card:hover,.rpt-card:hover,.feature.card:hover,a.card:hover{box-shadow:var(--lift)}
.card.dark:hover{border-color:rgba(169,192,180,.45)}
.cover,.feature-cover{overflow:hidden}
.cover img,.feature-cover img{transition:transform .9s var(--ease)}
.card.post:hover .cover img,.feature.card:hover .feature-cover img{}
.cover-tag{transition:background-color .25s,color .25s}
.card.post:hover .cover-tag{background:var(--navy);color:#fff}
.card.svc .num,.card.dark .num{transition:color .25s}
.card.svc:hover .num{color:var(--accent)}

/* stat cards: a thin accent rule draws across the top when they appear */
.stat-card,.sec .grid.g4>.card.flat{position:relative;overflow:hidden}
.stat-card::before,.sec .grid.g4>.card.flat::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:linear-gradient(90deg,var(--accent),var(--sage-lt));transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease) .15s}
.stat-card.seen::before,.sec .grid.g4>.card.flat.seen::before,.no-motion .stat-card::before,.no-motion .sec .grid.g4>.card.flat::before{transform:scaleX(1)}

/* navy bands: a slow, faint light drift */
.sec.navy{position:relative;overflow:hidden;isolation:isolate}
.sec.navy::before{content:"";position:absolute;inset:-40%;z-index:-1;background:radial-gradient(38% 38% at 30% 40%,rgba(126,153,141,.20),transparent 70%),radial-gradient(30% 30% at 75% 65%,rgba(169,192,180,.12),transparent 70%);animation:navyDrift 26s ease-in-out infinite alternate}
@keyframes navyDrift{0%{transform:translate3d(-4%,-2%,0)}100%{transform:translate3d(5%,4%,0)}}

/* report list: the published report reads as a document you can pick up */
.rpt-card-link .rpt-cover{position:relative;transform-style:preserve-3d;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.rpt-card-link .rpt-cover::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.14) 48%,transparent 66%);background-size:250% 100%;background-position:120% 0;transition:background-position 1s var(--ease)}
.rpt-card-link:hover .rpt-cover::after{background-position:-30% 0}
.rpt-card-link:hover .rpt-cover{box-shadow:0 11px 19px -11px rgba(30,39,68,.75)}
.rpt-cover img{transition:transform .5s var(--ease)}
.rpt-card:hover .rpt-cover img{}

/* report page: table of contents rows respond */
.rpt-tocrow{transition:background-color .25s,padding .25s var(--ease)}
.rpt-tocrow:hover{background:var(--alt);padding-left:12px;padding-right:12px;border-radius:8px}
.rpt-tocrow:hover .rpt-tocn{color:var(--accent)}
.rpt-chip{transition:transform .2s var(--ease),border-color .2s}
.rpt-chip:hover{}
.tbl tr{transition:background-color .2s}
.tbl tr:hover td{background:var(--alt)}

/* FAQ */
.faq summary{transition:color .2s}
.faq summary:hover{color:var(--accent)}

/* reading progress on articles and reports */
.read-prog{position:fixed;left:0;top:0;height:3px;width:100%;background:linear-gradient(90deg,var(--accent),var(--sage-lt));transform:scaleX(0);transform-origin:left;z-index:60;pointer-events:none}

/* footer social icons */
.foot .soc{gap:10px}
.foot .soc svg{width:18px;height:18px;flex:0 0 18px;border-radius:4px;transition:transform .2s var(--ease)}
.foot .soc:hover svg{}
.foot a{transition:color .2s}
.foot a:hover{color:#fff}

/* scroll reveal (only when JS + motion are available) */
.motion .rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--rd,0s)}
.motion .rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hero-dp svg path{stroke-dashoffset:0}
  .stat-card::before,.sec .grid.g4>.card.flat::before{transform:scaleX(1)}
}