/* =====================================================================
   CareOpsByAli — motion layer
   Load LAST on every page:  …/theme.css → /mobile.css → /motion.css
   Everything here animates only transform / opacity (GPU-composited),
   and every effect has a prefers-reduced-motion fallback at the bottom.
   ===================================================================== */
:root{
    --m-ease:cubic-bezier(.16,1,.3,1);        /* expo-out: fast start, soft landing */
    --m-spring:cubic-bezier(.34,1.56,.64,1);  /* small overshoot for magnetic return */
    --m-fast:160ms; --m-base:320ms; --m-slow:700ms; --m-stagger:80ms;
    --m-rise:20px; --m-lift:-6px;
    --m-glow-blue:rgba(41,82,179,.55); --m-glow-teal:rgba(13,148,136,.30); --m-glow-gold:rgba(201,168,76,.16);
    --m-spot:rgba(41,82,179,.09); --m-ring:rgba(201,168,76,.85);
}
[data-theme="dark"]{ --m-spot:rgba(157,184,242,.10); }

/* ---------- 1a. Hero + banner text reveal (pure CSS: shows even if scripts fail) ---------- */
@keyframes mRise{ from{opacity:0;transform:translate3d(0,var(--m-rise),0)} to{opacity:1;transform:none} }
@media (prefers-reduced-motion:no-preference){
    .hero-slide.is-active .hero-kicker,
    .hero-slide.is-active .hero-title,
    .hero-slide.is-active .hero-body,
    .hero-slide.is-active .hero-actions,
    :is(.banner-inner,.post-hero-inner,.item-hero-inner,.page-hero-inner) > :is(.section-tag,.page-tag,.post-cat-tag,.item-tag,.breadcrumb,.item-icon-badge,.nf-code,h1,p,.post-meta,.nf-actions){
        animation:mRise var(--m-slow) var(--m-ease) both;
    }
    .hero-slide.is-active .hero-title{ animation-delay:calc(var(--m-stagger) * 1); }
    .hero-slide.is-active .hero-body{ animation-delay:calc(var(--m-stagger) * 2); }
    .hero-slide.is-active .hero-actions{ animation-delay:calc(var(--m-stagger) * 3); }
    :is(.banner-inner,.post-hero-inner,.item-hero-inner,.page-hero-inner) > :is(h1,.nf-code){ animation-delay:calc(var(--m-stagger) * 1); }
    :is(.banner-inner,.post-hero-inner,.item-hero-inner,.page-hero-inner) > :is(p,.post-meta){ animation-delay:calc(var(--m-stagger) * 2); }
    :is(.banner-inner,.post-hero-inner,.item-hero-inner,.page-hero-inner) > .nf-actions{ animation-delay:calc(var(--m-stagger) * 3); }
    .banner-char{ animation:mRise 900ms var(--m-ease) 160ms both; }
    /* live slides swapped in from the database after the first reveal appear instantly */
    #heroSlides[data-m-fresh] .hero-slide *{ animation:none !important; }
}

/* ---------- 1b. Ambient glow (slow drift, paused when off-screen) ---------- */
@keyframes mDrift{
    0%{transform:translate3d(-3%,-2%,0) scale(1)}
    50%{transform:translate3d(4%,3%,0) scale(1.08)}
    100%{transform:translate3d(-2%,4%,0) scale(1.03)}
}
.m-glow,
:is(.banner,.post-hero,.item-hero,.page-hero)::after{
    content:''; position:absolute; inset:-25%; pointer-events:none;
    background:
        radial-gradient(40% 45% at 22% 38%, var(--m-glow-blue), transparent 70%),
        radial-gradient(34% 40% at 44% 74%, var(--m-glow-teal), transparent 70%),
        radial-gradient(26% 30% at 10% 86%, var(--m-glow-gold), transparent 70%);
    mix-blend-mode:screen; will-change:transform;
    animation:mDrift 22s ease-in-out infinite alternate;
}
.hero .m-glow{ z-index:2; -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 42%,transparent 66%); mask-image:linear-gradient(90deg,#000 0%,#000 42%,transparent 66%); }
.hero .hero-inner{ z-index:3; }
:is(.banner,.post-hero,.item-hero,.page-hero)::after{ z-index:0; }
.m-paused .m-glow, .m-paused::after{ animation-play-state:paused; }
@media (max-width:900px){
    .hero .m-glow{ -webkit-mask-image:linear-gradient(180deg,transparent 28%,#000 55%); mask-image:linear-gradient(180deg,transparent 28%,#000 55%); animation-duration:30s; }
}

/* ---------- 1c. Glass header: flat at the top, frosted once you scroll ---------- */
header{ transition:background-color var(--m-base) var(--m-ease), border-color var(--m-base) var(--m-ease), box-shadow var(--m-base) var(--m-ease) !important; }
html:not(.m-scrolled):not(.m-menu-open) header{
    background:var(--paper,#F5F7FC) !important; border-bottom-color:transparent !important; box-shadow:none !important;
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}
html:is(.m-scrolled,.m-menu-open) header{
    background:rgba(255,255,255,.68) !important; border-bottom-color:rgba(15,37,96,.08) !important;
    box-shadow:0 8px 30px rgba(15,37,96,.08) !important;
    -webkit-backdrop-filter:saturate(180%) blur(16px) !important; backdrop-filter:saturate(180%) blur(16px) !important;
}
html[data-theme="dark"]:is(.m-scrolled,.m-menu-open) header{ background:rgba(10,18,32,.62) !important; border-bottom-color:rgba(255,255,255,.08) !important; box-shadow:0 8px 30px rgba(0,0,0,.35) !important; }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    html:is(.m-scrolled,.m-menu-open) header{ background:rgba(255,255,255,.97) !important; }
    html[data-theme="dark"]:is(.m-scrolled,.m-menu-open) header{ background:rgba(10,18,32,.97) !important; }
}

/* ---------- 2. Count-up numbers ---------- */
.m-count{ font-variant-numeric:tabular-nums; }

/* ---------- 3. Cards: tilt, lift, cursor spotlight + glowing border ---------- */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
    html .m-card.m-card{
        isolation:isolate;
        transform:perspective(900px) rotateX(var(--m-rx,0deg)) rotateY(var(--m-ry,0deg)) translate3d(0,calc(var(--m-y,0px) + var(--m-rise-y,0px)),0) !important;
        transition:transform 520ms var(--m-ease), box-shadow var(--m-base) var(--m-ease), border-color var(--m-base) var(--m-ease), opacity 700ms var(--m-ease) !important;
    }
    html .m-card.m-card.m-hover{
        --m-y:var(--m-lift); will-change:transform;
        transition:transform 140ms linear, box-shadow var(--m-base) var(--m-ease), border-color var(--m-base) var(--m-ease) !important;
        box-shadow:0 22px 50px rgba(15,37,96,.14) !important;
    }
}
.m-card{ position:relative; }
.m-spot{
    position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:-1; opacity:0;
    transition:opacity var(--m-base) var(--m-ease);
    background:radial-gradient(340px circle at var(--m-mx,50%) var(--m-my,50%), var(--m-spot), transparent 60%);
}
.m-spot::before{
    content:''; position:absolute; inset:0; border-radius:inherit; padding:1px;
    background:radial-gradient(260px circle at var(--m-mx,50%) var(--m-my,50%), var(--m-ring), transparent 55%);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
}
.m-card.m-hover .m-spot{ opacity:1; }

/* ---------- 4. Process timeline (homepage) ---------- */
.timeline{ position:relative; max-width:780px; }
.timeline .steps{ grid-template-columns:1fr !important; row-gap:2.25rem !important; }
.timeline .steps::before{ display:none !important; }
.timeline .step{ display:grid !important; grid-template-columns:120px minmax(0,1fr) !important; gap:1.5rem !important; align-items:center; text-align:left !important; }
.timeline .step-art{ width:120px !important; height:120px !important; margin:0 !important; transition:box-shadow 500ms var(--m-ease); }
.timeline .step p{ margin:0 !important; max-width:540px !important; }
.timeline-rail{ position:absolute; left:60px; top:60px; height:0; width:3px; margin-left:-1.5px; border-radius:3px; background:var(--line,#DCE3F0); overflow:hidden; pointer-events:none; }
.timeline-fill{ position:absolute; inset:0; transform-origin:top; transform:scaleY(0); will-change:transform; background:linear-gradient(180deg,#2952B3,#0D9488 55%,#C9A84C); }
.timeline .step-num{ transition:background-color 400ms var(--m-ease), color 400ms var(--m-ease), transform 450ms var(--m-spring); }
.timeline .step.is-active .step-art{ box-shadow:0 0 0 6px rgba(201,168,76,.22), 0 0 32px rgba(41,82,179,.35); }
.timeline .step.is-active .step-num{ background:var(--gold,#C9A84C); color:#0F2560; transform:scale(1.12); }
.m-js .timeline .step-body{ opacity:.5; transform:translate3d(0,8px,0); transition:opacity 500ms var(--m-ease), transform 500ms var(--m-ease); }
.m-js .timeline .step.is-active .step-body{ opacity:1; transform:none; }
@media (max-width:700px){
    .timeline .step{ grid-template-columns:88px minmax(0,1fr) !important; gap:1rem !important; }
    .timeline .step-art{ width:88px !important; height:88px !important; }
    .timeline .steps{ row-gap:1.6rem !important; }
}

/* ---------- 5a. Primary buttons: magnetic pull + light sweep ---------- */
.m-shine{ position:relative; overflow:hidden; isolation:isolate; }
.m-shimmer{
    position:absolute; inset:0; z-index:1; pointer-events:none; border-radius:inherit;
    background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
    transform:translate3d(-120%,0,0);
}
@keyframes mShimmer{ to{ transform:translate3d(120%,0,0); } }
@media (prefers-reduced-motion:no-preference){
    .m-shine:hover .m-shimmer, .m-shine:focus-visible .m-shimmer{ animation:mShimmer 900ms var(--m-ease); }
    .m-shine.m-shine-once .m-shimmer{ animation:mShimmer 1300ms var(--m-ease) 950ms; }
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
    .m-mag{ translate:var(--m-tx,0px) var(--m-ty,0px); transition:translate 450ms var(--m-spring), transform .2s var(--m-ease), background-color .2s var(--m-ease), box-shadow .2s var(--m-ease); }
    .m-mag.m-mag-active{ transition:translate 90ms linear, transform .2s var(--m-ease), background-color .2s var(--m-ease), box-shadow .2s var(--m-ease); }
}

/* ---------- 5b. Modals + Calendly popup: fade and scale ---------- */
.modal{ display:flex !important; visibility:hidden; opacity:0; pointer-events:none; transition:opacity 240ms var(--m-ease), visibility 0s linear 240ms; }
.modal.show{ visibility:visible; opacity:1; pointer-events:auto; transition:opacity 240ms var(--m-ease); }
.modal .modal-content{ transform:translate3d(0,14px,0) scale(.96); opacity:.4; transition:transform 360ms var(--m-ease), opacity 360ms var(--m-ease); }
.modal.show .modal-content{ transform:none; opacity:1; }
@keyframes mFade{ from{opacity:0} to{opacity:1} }
@keyframes mPop{ from{opacity:0;transform:translate3d(0,14px,0) scale(.96)} to{opacity:1;transform:none} }
@keyframes mPopCalendly{ from{opacity:0;scale:.96;translate:0 14px} to{opacity:1;scale:1;translate:0 0} }
@media (prefers-reduced-motion:no-preference){
    .calendly-overlay{ animation:mFade 240ms var(--m-ease) both; }
    /* Calendly centers its window with transform, so animate scale/translate separately instead of overriding it */
    .calendly-overlay .calendly-popup{ animation:mPopCalendly 360ms var(--m-ease) both; }
}

/* ---------- Reduced motion: everything settles into its final state ---------- */
@media (prefers-reduced-motion:reduce){
    .m-glow, :is(.banner,.post-hero,.item-hero,.page-hero)::after{ animation:none !important; }
    .m-shimmer{ display:none; }
    .timeline-fill{ transform:scaleY(1) !important; }
    .m-js .timeline .step-body{ opacity:1 !important; transform:none !important; }
    .modal, .modal .modal-content, header{ transition:none !important; }
    .modal .modal-content{ transform:none; opacity:1; }
}

/* =====================================================================
   Motion v2 — page transitions, loading, scroll reveals, living character
   ===================================================================== */

/* ---------- Page transitions ----------
   Cross-document View Transitions were removed: on iPhone Safari they could leave a page
   frozen (taps ignored) after going back or swiping between pages, until a refresh.
   Pages now open with the hero and scroll reveals below instead. */

/* ---------- Loading bar + reading progress ---------- */
.m-loadbar, .m-progress { position: fixed; left: 0; right: 0; height: 3px; pointer-events: none; transform-origin: 0 50%; will-change: transform; }
.m-loadbar { top: 0; z-index: 3000; background: linear-gradient(90deg, #2952B3, #0D9488, #C9A84C); transform: scaleX(0); opacity: 0; }
html.m-loading .m-loadbar { opacity: 1; transform: scaleX(.72); transition: transform 2.6s cubic-bezier(.08,.7,.2,1), opacity .15s; }
html.m-loaded .m-loadbar { opacity: 0; transform: scaleX(1); transition: transform .35s var(--m-ease), opacity .45s ease .3s; }
.m-progress { top: var(--m-header-h, 72px); z-index: 999; background: linear-gradient(90deg, #C9A84C, #E8D48B); transform: scaleX(var(--m-p, 0)); opacity: 0; transition: opacity .3s ease; }
.m-progress.is-on { opacity: 1; }

/* ---------- Scroll reveals (only content below the fold is ever hidden) ---------- */
html.m-js .m-reveal { opacity: 0; transform: translate3d(0, 28px, 0); --m-rise-y: 28px; }
html.m-js .m-reveal.m-in { opacity: 1; transform: none; --m-rise-y: 0px; transition: opacity .75s var(--m-ease) var(--m-delay, 0ms), transform .85s var(--m-ease) var(--m-delay, 0ms); }
html.m-js .m-img { clip-path: inset(0 0 18% 0); transform: scale(1.12); }
html.m-js .m-img.m-in { clip-path: inset(0 0 0 0); transform: scale(1); transition: clip-path 1s var(--m-ease) var(--m-delay, 0ms), transform 1.2s var(--m-ease) var(--m-delay, 0ms); }

/* Headline words rise one after another */
.m-word { display: inline-block; white-space: pre; }
@media (prefers-reduced-motion: no-preference) {
    .m-split .m-word { animation: mRise 720ms var(--m-ease) both; animation-delay: calc(var(--m-w, 0) * 55ms + var(--m-base-delay, 60ms)); }
    .hero-slide.is-active .hero-title.m-split, .m-split { animation: none !important; }
    #heroSlides[data-m-fresh] .m-split .m-word { animation: none !important; }
}

/* ---------- Homepage hero: slow zoom + parallax ---------- */
@keyframes mKen { from { scale: 1; } to { scale: 1.07; } }
@media (prefers-reduced-motion: no-preference) {
    .hero-art img { animation: mKen 26s ease-in-out infinite alternate; translate: var(--m-hx, 0px) calc(var(--m-hy, 0px) + var(--m-sy, 0px)); transition: translate .6s var(--m-ease); will-change: transform; }
}

/* ---------- The character comes alive ---------- */
@keyframes mFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes mWiggle { 0%, 100% { rotate: 0deg; } 20% { rotate: -7deg; } 45% { rotate: 6deg; } 70% { rotate: -3deg; } }
@keyframes mWave { 0%, 60%, 100% { rotate: 0deg; } 10%, 30% { rotate: 18deg; } 20%, 40% { rotate: -10deg; } }
@keyframes mWaveHover { 0%, 100% { rotate: 0deg; } 15%, 45% { rotate: 20deg; } 30%, 60% { rotate: -12deg; } }
@keyframes mBubble { from { opacity: 0; transform: translate3d(0, 8px, 0) scale(.85); } to { opacity: 1; transform: none; } }
.m-char { cursor: pointer; }
@media (prefers-reduced-motion: no-preference) {
    .banner-char img, .band-char, .about-photo, .cta-art img { animation: mFloat 5.8s ease-in-out infinite; }
    .band-char { animation-delay: -2s; }
    .m-char { transition: transform .55s var(--m-spring); }
    .m-char:hover { transform: rotate(-4deg) scale(1.05); }
    .m-char.m-wiggle { animation: mWiggle .7s ease-in-out, mFloat 5.8s ease-in-out infinite; }
    .banner-bubble { transform-origin: 50% 100%; animation: mBubble .55s var(--m-spring) .45s both; }
    .m-wave { animation: mWave 2s ease-in-out 1.1s 2 both; }
    .banner-char:hover .m-wave, .cta-art:hover .m-wave { animation: mWaveHover 1.1s ease-in-out 1; }
}
.banner-char { position: relative; }
.cta-art { position: relative; }
.m-wave { position: absolute; right: 2%; bottom: 10%; z-index: 2; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: #fff; box-shadow: 0 8px 20px rgba(15,37,96,.22); font-size: 24px; line-height: 1; transform-origin: 50% 80%; pointer-events: none; }
.cta-art .m-wave { right: 18%; bottom: 20%; }
.m-type-cursor::after { content: ''; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: currentColor; animation: mBlink .8s steps(1) infinite; }
@keyframes mBlink { 50% { opacity: 0; } }
@media (max-width: 760px) {
    .m-wave { width: 30px; height: 30px; font-size: 16px; right: auto; left: 54px; bottom: -4px; }
}

/* ---------- Tool page loading state ---------- */
.tool-state.tool-loading { position: relative; overflow: hidden; }
.tool-state.tool-loading::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(201,168,76,.12) 50%, transparent 70%); transform: translate3d(-100%,0,0); animation: mSweep 1.4s ease-in-out infinite; }
@keyframes mSweep { to { transform: translate3d(100%,0,0); } }

@media (prefers-reduced-motion: reduce) {
    html.m-js .m-reveal, html.m-js .m-img { opacity: 1 !important; transform: none !important; clip-path: none !important; }
    .m-loadbar, .m-progress { display: none; }
    .m-wave { display: none; }
}


/* =====================================================================
   Motion v3 — steadier phones + livelier buttons
   ===================================================================== */

/* ---------- Phones and tablets: keep the look, drop the expensive parts ---------- */
@media (hover: none), (max-width: 900px) {
    /* the drifting glow and slow hero zoom repaint a huge layer every frame on phones */
    .m-glow, :is(.banner,.post-hero,.item-hero,.page-hero)::after { animation: none !important; will-change: auto !important; }
    .hero-art img { animation: none !important; will-change: auto !important; }
    /* frosted-glass header: iOS Safari can mis-handle taps inside blurred fixed bars */
    html:is(.m-scrolled,.m-menu-open) header { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(255,255,255,.97) !important; }
    html[data-theme="dark"]:is(.m-scrolled,.m-menu-open) header { background: rgba(10,18,32,.97) !important; }
    .mobile-book-bar { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(255,255,255,.97) !important; }
    html[data-theme="dark"] .mobile-book-bar { background: rgba(10,18,32,.97) !important; }
}

/* ---------- Every button: instant press feedback (works on touch too) ---------- */
:is(.btn-gold,.nav-cta,.mobile-book-btn,.nl-submit,.modal-submit,.tool-calc-btn,.res-btn,.btn-outline-royal,.btn-line,.btn-ghost-light,.share-btn,.cat-pill,.theme-toggle,.svc-more-btn,.menu-btn,.coll-more button) {
    -webkit-tap-highlight-color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
    :is(.btn-gold,.nav-cta,.mobile-book-btn,.nl-submit,.modal-submit,.tool-calc-btn,.res-btn,.btn-outline-royal,.btn-line,.btn-ghost-light,.share-btn,.cat-pill,.theme-toggle,.svc-more-btn,.coll-more button) {
        transition: transform .38s var(--m-spring), box-shadow .3s var(--m-ease), background-color .25s var(--m-ease), background-size .45s var(--m-ease), color .25s var(--m-ease), translate 450ms var(--m-spring) !important;
    }
    :is(.btn-gold,.nav-cta,.mobile-book-btn,.nl-submit,.modal-submit,.tool-calc-btn,.res-btn,.btn-outline-royal,.btn-line,.btn-ghost-light,.share-btn,.cat-pill,.theme-toggle,.svc-more-btn,.coll-more button):active {
        transform: scale(.95) !important;
        transition: transform 90ms ease-out, box-shadow .2s var(--m-ease), background-color .2s var(--m-ease) !important;
    }
}

/* ---------- Ripple where you tap or click ---------- */
.m-ripple-host { position: relative; overflow: hidden; isolation: isolate; }
.m-ripple {
    position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
    background: radial-gradient(circle, currentColor 0%, currentColor 35%, transparent 70%);
    opacity: .28; transform: scale(0); animation: mRipple 650ms var(--m-ease) forwards;
}
:is(.btn-gold,.nav-cta,.mobile-book-btn,.nl-submit,.modal-submit,.tool-calc-btn,.res-btn) .m-ripple {
    background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,255,255,.6) 35%, transparent 70%); opacity: .55;
}
@keyframes mRipple { to { transform: scale(1); opacity: 0; } }

/* ---------- Desktop hover: glow, lift and arrow nudge ---------- */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    :is(.btn-gold,.nav-cta,.nl-submit,.modal-submit,.tool-calc-btn,.res-btn):hover {
        box-shadow: 0 12px 28px -10px rgba(201,168,76,.85), 0 0 0 4px rgba(201,168,76,.18) !important;
        transform: translateY(-3px) !important;
    }
    :is(.btn-gold,.btn-outline-royal,.btn-line,.btn-ghost-light,.nl-submit,.res-btn,.tool-calc-btn,.modal-submit,.tool-tile-cta) :is(.ic,i,svg):last-child {
        transition: transform .4s var(--m-spring);
    }
    :is(.btn-gold,.btn-outline-royal,.btn-line,.btn-ghost-light,.nl-submit,.res-btn,.tool-calc-btn,.modal-submit):hover :is(.ic,i,svg):last-child:not(:first-child) {
        transform: translateX(5px);
    }
    /* outline buttons fill from the left */
    :is(.btn-outline-royal,.btn-line) {
        background-image: linear-gradient(var(--link,#1C3F8F), var(--link,#1C3F8F)) !important;
        background-repeat: no-repeat !important; background-size: 0% 100% !important; background-position: left center !important;
    }
    :is(.btn-outline-royal,.btn-line):hover {
        background-size: 100% 100% !important; color: var(--card,#fff) !important; transform: translateY(-2px) !important;
    }
    .btn-ghost-light {
        background-image: linear-gradient(#fff, #fff) !important;
        background-repeat: no-repeat !important; background-size: 0% 100% !important; background-position: left center !important;
    }
    .btn-ghost-light:hover { background-size: 100% 100% !important; color: #0F2560 !important; transform: translateY(-2px) !important; }
    .share-btn:hover { transform: translateY(-3px) rotate(-8deg) !important; box-shadow: 0 10px 22px -10px rgba(15,37,96,.45) !important; }
    .cat-pill:hover { transform: translateY(-2px) !important; }
    .theme-toggle:hover { transform: rotate(20deg) scale(1.06) !important; }
    /* keep the magnetic pull snappy while the pointer moves */
    .m-mag.m-mag-active { transition: translate 90ms linear, transform .38s var(--m-spring), box-shadow .3s var(--m-ease), background-color .25s var(--m-ease) !important; }
}

/* ---------- Booking buttons: a gentle shine every few seconds ---------- */
@keyframes mSheenLoop { 0% { transform: translate3d(-120%,0,0); } 16%, 100% { transform: translate3d(120%,0,0); } }
@media (prefers-reduced-motion: no-preference) {
    .m-attn .m-shimmer { animation: mSheenLoop 6.5s var(--m-ease) 2.5s infinite; }
    .m-attn:hover .m-shimmer { animation: mShimmer 900ms var(--m-ease); }
}

/* ---------- Phone booking bar: springs up, pulses twice ---------- */
@keyframes mPulseRing {
    0% { box-shadow: 0 0 0 0 rgba(201,168,76,.55); }
    70% { box-shadow: 0 0 0 14px rgba(201,168,76,0); }
    100% { box-shadow: 0 0 0 0 rgba(201,168,76,0); }
}
@media (prefers-reduced-motion: no-preference) {
    .mobile-book-bar { transition: transform .5s var(--m-spring), visibility 0s linear .5s !important; }
    .mobile-book-bar.is-visible { transition: transform .5s var(--m-spring) !important; }
    .mobile-book-bar.is-visible .mobile-book-btn { animation: mPulseRing 1.8s ease-out .5s 2; }
}

/* ---------- Phone menu: links slide in one after another ---------- */
@keyframes mMenuIn { from { opacity: 0; transform: translate3d(-14px,0,0); } to { opacity: 1; transform: none; } }
@media (max-width: 1100px) and (prefers-reduced-motion: no-preference) {
    header nav.open > a { animation: mMenuIn .42s var(--m-ease) both; }
    header nav.open > a:nth-child(2) { animation-delay: 35ms; }
    header nav.open > a:nth-child(3) { animation-delay: 70ms; }
    header nav.open > a:nth-child(4) { animation-delay: 105ms; }
    header nav.open > a:nth-child(5) { animation-delay: 140ms; }
    header nav.open > a:nth-child(6) { animation-delay: 175ms; }
    header nav.open > a:nth-child(7) { animation-delay: 210ms; }
    header nav.open > a:nth-child(8) { animation-delay: 245ms; }
    header nav.open > a:nth-child(n+9) { animation-delay: 280ms; }
}

/* ---------- Cards: press-in on touch screens (desktop already tilts) ---------- */
@media (hover: none) and (prefers-reduced-motion: no-preference) {
    :is(.svc,.bp-card,.post-card,.featured-card,.res-card,.related-card,.tool-tile,.entry-card):active {
        transform: scale(.985) !important; transition: transform 120ms ease-out !important;
    }
}

/* ---------- Swipe rows on phones: a one-time nudge shows they scroll sideways ---------- */
@keyframes mSwipeHint { 0%, 100% { transform: none; } 35% { transform: translate3d(-26px,0,0); } 60% { transform: translate3d(-26px,0,0); } }
@media (prefers-reduced-motion: no-preference) {
    .m-swipe-hint > * { animation: mSwipeHint 1.3s var(--m-ease) both; }
}

/* ---------- Icons in section cards: small bounce when they appear ---------- */
@keyframes mIconPop { 0% { transform: scale(.6) rotate(-12deg); opacity: 0; } 60% { transform: scale(1.12) rotate(4deg); opacity: 1; } 100% { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
    .m-in :is(.item-icon-badge,.svc-icon,.res-icon) { animation: mIconPop .7s var(--m-spring) calc(var(--m-delay, 0ms) + 150ms) both; }
}

@media (prefers-reduced-motion: reduce) {
    .m-ripple { display: none; }
    .m-swipe-hint > * { animation: none !important; }
}


/* ---------- Phones and tablets: stop never-ending loops, prevent a banner jump, larger tap target ---------- */
@media (hover: none), (max-width: 900px) {
    /* floating portraits and the repeating button sheen run forever and keep the GPU awake */
    .banner-char img, .band-char, .about-photo, .cta-art img { animation: none !important; }
    .m-char.m-wiggle { animation: mWiggle .7s ease-in-out !important; }
    .m-attn .m-shimmer { animation: none !important; }
    .hero-art img { translate: none !important; }
}
@media (max-width: 760px) {
    /* reserve the portrait row before theme.js inserts it, so the banner title doesn't shift down */
    .banner-inner:not(:has(> .banner-char)) { padding-top: 92px; }
}
@media (max-width: 768px) {
    /* footer "Privacy Policy" was a 24px-tall tap target */
    .ft-bottom a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* =====================================================================
   Header — Concept A "Floating capsule"
   Desktop: links in a white capsule, a navy pill glides to the current page,
   a soft blue pill follows the hover, gold gradient "Book a Call", round toggle.
   Phones/tablets (menu panel): current page highlighted, gold pill button.
   ===================================================================== */
@media (min-width: 1101px) {
    header nav#nav { position: relative; isolation: isolate; gap: 4px !important; }
    header nav#nav::before {
        content: ''; position: absolute; z-index: -2; left: 0;
        top: var(--cap-top, 0px); height: var(--cap-h, 100%); width: var(--cap-w, 0px);
        border-radius: 999px; background: #fff; opacity: var(--cap-o, 0);
        box-shadow: 0 6px 24px rgba(15,37,96,.08), inset 0 0 0 1px #E3E9F4;
        transition: opacity .3s ease;
    }
    header nav#nav a:not(.nav-cta) {
        position: relative; z-index: 1; display: inline-flex; align-items: center;
        padding: 10px 16px !important; border-radius: 999px; line-height: 1.2; white-space: nowrap;
        font-weight: 600 !important; color: #46526B !important; text-decoration: none;
        transition: color .25s ease;
    }
    header nav#nav a:not(.nav-cta):first-of-type { margin-left: 5px; }
    header nav#nav a:not(.nav-cta):hover, header nav#nav a:not(.nav-cta):focus-visible { color: #0F2560 !important; }
    header nav#nav a:not(.nav-cta).nav-is-current { color: #fff !important; }
    header nav#nav a:not(.nav-cta)::after { display: none !important; }
    .nav-pill-hover, .nav-pill-active {
        position: absolute; left: 0; top: 0; z-index: -1; pointer-events: none;
        border-radius: 999px; opacity: 0; width: 0; height: 0;
    }
    .nav-pill-hover { background: #EEF3FC; }
    .nav-pill-active { background: linear-gradient(135deg, #0F2560, #2952B3); box-shadow: 0 6px 16px rgba(41,82,179,.35); }
    .nav-pill-hover.is-on, .nav-pill-active.is-on { opacity: 1; }
    @media (prefers-reduced-motion: no-preference) {
        .nav-pill-hover, .nav-pill-active { transition: transform .45s cubic-bezier(.34,1.3,.64,1), width .45s cubic-bezier(.34,1.3,.64,1), height .3s ease, opacity .25s ease; }
        .nav-pills-instant .nav-pill-hover, .nav-pills-instant .nav-pill-active { transition: none !important; }
    }

    /* Narrower desktops: tighten so everything stays on one line */
    @media (max-width: 1320px) {
        header nav#nav a:not(.nav-cta) { padding: 9px 11px !important; font-size: .9rem !important; }
        header nav#nav .nav-cta { margin-left: 10px; padding: 0 16px !important; }
    }
    /* Book a Call: gold gradient pill with calendar icon (the existing sheen runs across it) */
    header nav#nav .nav-cta {
        margin-left: 14px; gap: 8px; min-height: 46px; padding: 0 22px !important; white-space: nowrap; flex-shrink: 0;
        border-radius: 999px !important; color: #0F2560 !important; font-weight: 700 !important;
        background: linear-gradient(135deg, #E8D48B, #C9A84C 55%, #B8913A) !important;
        box-shadow: 0 8px 22px -6px rgba(201,168,76,.65), inset 0 1px 0 rgba(255,255,255,.6) !important;
    }
    header nav#nav .nav-cta::before {
        content: ''; width: 17px; height: 17px; flex-shrink: 0; background: currentColor;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='15' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M4 10h16M9 15l2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
                mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='15' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M4 10h16M9 15l2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
    }

    /* Round light/dark button */
    header .theme-toggle {
        width: 46px !important; height: 46px !important; border: 0 !important; background: #fff !important;
        box-shadow: 0 6px 18px rgba(15,37,96,.1), inset 0 0 0 1px #E3E9F4 !important;
    }
    @media (hover: hover) and (prefers-reduced-motion: no-preference) {
        header .theme-toggle:hover { transform: translateY(-2px) !important; box-shadow: 0 10px 22px rgba(15,37,96,.14), inset 0 0 0 1px #D3DCEE !important; }
        header .theme-toggle:hover .ic { transform: rotate(-18deg); transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
    }

    /* Dark mode */
    html[data-theme="dark"] header nav#nav::before { background: #131D33; box-shadow: 0 6px 24px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.1); }
    html[data-theme="dark"] header nav#nav a:not(.nav-cta) { color: #B4BED4 !important; }
    html[data-theme="dark"] header nav#nav a:not(.nav-cta):hover { color: #fff !important; }
    html[data-theme="dark"] .nav-pill-hover { background: rgba(157,184,242,.14); }
    html[data-theme="dark"] .nav-pill-active { background: linear-gradient(135deg, #2952B3, #1C3F8F); box-shadow: 0 6px 18px rgba(41,82,179,.45); }
    html[data-theme="dark"] header .theme-toggle { background: #131D33 !important; box-shadow: 0 6px 18px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.12) !important; }
}
@media (max-width: 1100px) {
    .nav-pill-hover, .nav-pill-active { display: none; }
    header nav#nav a:not(.nav-cta).nav-is-current {
        color: #0F2560 !important; background: #EEF3FC; border-radius: 12px;
        padding-left: .85rem !important; box-shadow: inset 3px 0 0 #C9A84C;
    }
    html[data-theme="dark"] header nav#nav a:not(.nav-cta).nav-is-current { color: #fff !important; background: rgba(157,184,242,.12); }
    header nav#nav .nav-cta {
        border-radius: 999px !important; color: #0F2560 !important;
        background: linear-gradient(135deg, #E8D48B, #C9A84C 55%, #B8913A) !important;
        box-shadow: 0 10px 24px -10px rgba(201,168,76,.8), inset 0 1px 0 rgba(255,255,255,.6) !important;
    }
}