/* Motion system — opt-in layer. Every hidden "from" state lives under html.mo, which motion.js
   removes if the libraries fail to load, so content never depends on animation running.
   Only transform and opacity are animated. */
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
.lenis-smooth iframe{pointer-events:none}

/* Line masks produced by motion.js (text stays real text in the DOM) */
.mo-ln{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.mo-li{display:block;will-change:transform}
.mo-w{display:inline-block;white-space:pre}

/* Hero entrance: pure CSS (no JS dependency) so first paint and LCP are never delayed.
   Every element is visible from its first painted frame; only opacity and transform animate. */
@keyframes moUp{from{opacity:.001;transform:translate3d(0,22px,0)}to{opacity:1;transform:none}}
@keyframes moScale{from{opacity:.001;transform:translate3d(0,36px,0) scale(.965)}to{opacity:1;transform:none}}
@keyframes moFade{from{opacity:.001}to{opacity:1}}
html.mo .hero .display{animation:moUp .95s var(--ease-out) .05s backwards}
html.mo .hero .lead{animation:moUp .8s var(--ease-out) .3s backwards}
html.mo .hero-cta .btn:nth-child(1){animation:moUp .7s var(--ease-out) .5s backwards}
html.mo .hero-cta .btn:nth-child(2){animation:moUp .7s var(--ease-out) .6s backwards}
html.mo .hero-cred{animation:moUp .7s var(--ease-out) .8s backwards}
html.mo .hero-visual .hv-board{animation:moScale 1.1s var(--ease-out) .2s backwards}
html.mo .hero-visual .hv-shot{animation:moScale 1.1s var(--ease-out) .38s backwards}
html.mo .hv-note{animation:moFade .6s var(--ease-out) 1.2s backwards}
html.mo .hero-scroll{animation:moFade .8s var(--ease-out) 1.5s backwards}
html.mo body:has(.hero) .site-header{animation:moFade .7s var(--ease-out) backwards}

/* Hero background drift: two soft blobs, transform-only */
.hero{position:relative;isolation:isolate}
.hero-aura{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hero-aura i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;will-change:transform}
.hero-aura i:nth-child(1){width:46vw;height:46vw;max-width:640px;max-height:640px;right:-8vw;top:-10vw;background:radial-gradient(circle,rgba(53,92,230,.20),transparent 68%);animation:auraA 22s ease-in-out infinite alternate}
.hero-aura i:nth-child(2){width:34vw;height:34vw;max-width:480px;max-height:480px;left:-6vw;bottom:-8vw;background:radial-gradient(circle,rgba(20,99,70,.14),transparent 68%);animation:auraB 28s ease-in-out infinite alternate}
@keyframes auraA{to{transform:translate3d(-60px,40px,0) scale(1.12)}}
@keyframes auraB{to{transform:translate3d(50px,-30px,0) scale(1.1)}}

.hero-scroll{position:absolute;left:max(var(--gutter),calc((100vw - var(--max)) / 2 + var(--gutter)));bottom:22px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;font-family:var(--f-mono);font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-2);text-decoration:none}
.hero-scroll i{display:block;width:1px;height:34px;background:linear-gradient(var(--slate-2),transparent);transform-origin:top;animation:scrollCue 2.2s var(--ease) infinite}
@keyframes scrollCue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
@media (max-width:900px){.hero-scroll{display:none}}

/* Scroll-scrubbed word reveal: words start muted and take the ink colour */
.mo-words .mo-w{color:var(--slate-2);transition:none}

/* Magnetic buttons: JS sets --mx/--my on fine pointers only */
.btn[data-magnetic]{transform:translate3d(var(--mx,0),var(--my,0),0);transition:transform 240ms var(--ease-out),background-color var(--dur),border-color var(--dur),color var(--dur)}

/* Services */
.svc{background:var(--canvas)}
.svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4);margin-top:var(--s-7);list-style:none;padding:0}
.svc-grid>li{display:flex}
.svc-card{flex:1;position:relative;display:flex;flex-direction:column;min-height:300px;padding:var(--s-6);background:var(--white);border:1px solid var(--line);border-radius:var(--r-3,10px);color:var(--ink);text-decoration:none;overflow:hidden;
  transition:transform 380ms var(--ease-out),background-color 380ms var(--ease-out),color 380ms var(--ease-out),border-color 380ms var(--ease-out),opacity 380ms var(--ease-out),box-shadow 380ms var(--ease-out)}
.svc-card .svc-no{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.08em;color:var(--slate-2);transition:color 380ms var(--ease-out)}
.svc-card h3{margin-top:var(--s-5);font-size:1.375rem;line-height:1.2;font-weight:500;letter-spacing:-.01em}
.svc-card p{margin-top:var(--s-3);font-size:.9375rem;line-height:1.55;color:var(--slate);max-width:30em;transition:color 380ms var(--ease-out)}
.svc-card .svc-go{margin-top:auto;padding-top:var(--s-6);display:flex;align-items:center;justify-content:space-between;font-size:.875rem;font-weight:500}
.svc-card .svc-arrow{display:inline-flex;width:36px;height:36px;border-radius:50%;border:1px solid var(--line-strong,var(--line));align-items:center;justify-content:center;overflow:hidden;transition:background-color 380ms var(--ease-out),border-color 380ms var(--ease-out),transform 380ms var(--ease-out)}
.svc-card .svc-arrow svg{transition:transform 380ms var(--ease-out)}
.svc-card .svc-art{position:absolute;right:-18px;top:-18px;width:150px;height:150px;opacity:.07;transition:transform 700ms var(--ease-out),opacity 380ms;pointer-events:none}
.svc-card .svc-art svg{width:100%;height:100%}
@media (hover:hover) and (min-width:901px){
  .svc-grid:hover .svc-card:not(:hover):not(:focus-visible){opacity:.5}
  .svc-grid:focus-within .svc-card:not(:focus-visible){opacity:.5}
  .svc-card:hover,.svc-card:focus-visible{transform:translateY(-6px);background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:0 22px 44px -22px rgba(16,27,36,.5)}
  .svc-card:hover p,.svc-card:focus-visible p{color:#B5C2CB}
  .svc-card:hover .svc-no,.svc-card:focus-visible .svc-no{color:#9FB0BB}
  .svc-card:hover .svc-art,.svc-card:focus-visible .svc-art{opacity:.14;transform:scale(1.15) rotate(6deg);color:#fff}
  .svc-card:hover .svc-arrow,.svc-card:focus-visible .svc-arrow{background:#fff;border-color:#fff;color:var(--ink);transform:rotate(-45deg)}
}
.svc-card:focus-visible{outline:2px solid var(--blue-ink);outline-offset:3px}
@media (max-width:1100px){.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){.svc-grid{grid-template-columns:1fr}.svc-card{min-height:0;padding:var(--s-5)}.svc-card .svc-go{padding-top:var(--s-5)}}

/* Dark/light rhythm: dark sections enter with a rounded, scaling edge */
.mo-edge{border-radius:28px 28px 0 0}
@media (max-width:760px){.mo-edge{border-radius:18px 18px 0 0}}

/* Animated nav underline */
.nav > a:not(.btn){background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;transition:background-size 300ms var(--ease-out)}
@media (hover:hover){.nav > a:not(.btn):hover{background-size:100% 1px}}

/* ---------- Inner pages (.ph hero) ---------- */
html.mo .ph .crumbs{animation:moFade .6s var(--ease-out) backwards}
html.mo .ph .label{animation:moUp .6s var(--ease-out) .05s backwards}
html.mo .ph .display{animation:moUp .95s var(--ease-out) .1s backwards}
html.mo .ph .lead{animation:moUp .8s var(--ease-out) .3s backwards}
html.mo .ph .prov-line,html.mo .ph .art-meta{animation:moUp .7s var(--ease-out) .45s backwards}
html.mo .ph .btn{animation:moUp .7s var(--ease-out) .55s backwards}

/* Reading progress (article pages) */
.read-prog{position:fixed;top:0;left:0;right:0;height:3px;z-index:140;background:var(--blue);transform:scaleX(0);transform-origin:left;pointer-events:none}
[dir="rtl"] .read-prog{transform-origin:right}

/* Cross-page transitions (progressive: browsers without View Transitions just navigate normally).
   The header and chat launcher keep their own layer so they do not blink between pages. */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  .site-header{view-transition-name:site-header}
  .chat-launch{view-transition-name:chat-launch}
  ::view-transition-old(root){animation:vtOut 200ms var(--ease) both}
  ::view-transition-new(root){animation:vtIn 420ms var(--ease-out) both}
  @keyframes vtOut{to{opacity:0}}
  @keyframes vtIn{from{opacity:0}}
}

@media (prefers-reduced-motion:reduce){
  .hero-aura i,.hero-scroll i{animation:none}
  .svc-card,.svc-card *{transition:none!important}
}