/* A progressive motion layer: the underlying page stays visible without JavaScript. */
:root { --motion-ease: cubic-bezier(.22,1,.36,1); }
.hero-line { display:block; overflow:clip; padding-bottom:.055em; margin-bottom:-.055em; }
.hero-line-inner { display:block; transform-origin:left bottom; }
.hero-line-inner.headline-end { display:flex; }
.reading-progress { position:fixed; inset:0 0 auto; height:3px; background:var(--blue); transform:scaleX(0); transform-origin:left; z-index:50; pointer-events:none; box-shadow:0 0 0 1px #ffffff45; }
.motion-toggle { display:inline-flex; gap:8px; align-items:center; justify-content:center; padding:8px 12px; min-height:44px; border:1px solid #ffffff35; border-radius:30px; background:transparent; color:white; font-size:10px; line-height:1; }
.motion-toggle:hover { background:#ffffff12; }
.motion-toggle:disabled { opacity:.7; }
.motion-symbol { display:block; width:9px; height:10px; border-inline:2px solid currentColor; }
.motion-toggle[aria-pressed="false"] .motion-symbol { width:0; height:0; border:0; border-left:8px solid currentColor; border-top:5px solid transparent; border-bottom:5px solid transparent; }
.hero-art, .connection-art { transform:perspective(1000px) translate3d(0,var(--art-scroll,0px),0) rotateX(var(--art-x,0deg)) rotateY(var(--art-y,0deg)); transition:transform .8s var(--motion-ease); }
.hero-art img, .connection-art img { transform-origin:50% 55%; }
html[data-motion="on"] .hero-art img { animation:play-drift 8s ease-in-out infinite; animation-play-state:paused; }
html[data-motion="on"] .connection-art img { animation:conversation-drift 9.5s ease-in-out infinite; animation-play-state:paused; }
html[data-motion="on"] .art-visible img { animation-play-state:running; }
html[data-motion="on"] .hero-panel.art-visible .headline-end svg { animation:creative-turn 24s linear infinite; }
html[data-motion="on"] .hero-panel.art-visible .status-dot { animation:status-breathe 3.5s ease-in-out infinite; }
html[data-motion="on"] .hero-panel.art-visible .scroll-link .circle-arrow { animation:scroll-nudge 2.8s ease-in-out infinite; }
html.tab-hidden .hero-art img, html.tab-hidden .connection-art img,
html.tab-hidden .headline-end svg, html.tab-hidden .status-dot, html.tab-hidden .scroll-link .circle-arrow { animation-play-state:paused!important; }
@keyframes play-drift { 0%,100% { transform:translate3d(0,6px,0) rotate(-1deg); } 50% { transform:translate3d(0,-8px,0) rotate(1.3deg); } }
@keyframes conversation-drift { 0%,100% { transform:translate3d(0,6px,0) rotate(1deg); } 50% { transform:translate3d(0,-9px,0) rotate(-1.6deg); } }
@keyframes creative-turn { to { transform:rotate(360deg); } }
@keyframes status-breathe { 0%,100% { box-shadow:0 0 0 4px #ffffff12; } 50% { box-shadow:0 0 0 7px #ffffff08; } }
@keyframes scroll-nudge { 0%,75%,100% { translate:0 0; } 85% { translate:0 4px; } }
.button { position:relative; overflow:hidden; isolation:isolate; transition:transform .35s var(--motion-ease), background .25s, box-shadow .35s; }
.button svg, .text-link svg, .nav-contact svg { transition:transform .4s var(--motion-ease); }
.button:active { transform:scale(.97); }
.button:hover svg, .button:focus-visible svg, .text-link:hover svg, .nav-contact:hover svg { transform:translate(3px,-3px); }
.button::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(110deg,transparent 20%,#ffffff30 50%,transparent 80%); transform:translateX(-120%); z-index:-1; }
.button:hover::after { transform:translateX(120%); transition:transform .85s ease; }
.desktop-nav>a:not(.nav-contact) { position:relative; }
.desktop-nav>a:not(.nav-contact)::after { content:""; position:absolute; bottom:5px; left:0; right:0; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .3s var(--motion-ease); }
.desktop-nav>a:hover::after, .desktop-nav>a[aria-current="location"]::after { transform:scaleX(1); }
.portfolio-toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:-12px 0 24px; }
.work-filters { display:flex; gap:8px; flex-wrap:wrap; }
.work-filters button { display:flex; align-items:center; justify-content:center; gap:14px; min-height:44px; padding:11px 18px; border:1px solid #d6deef; border-radius:30px; background:transparent; color:var(--muted); font-size:11px; font-weight:700; transition:background .25s, color .25s, border-color .25s, transform .25s var(--motion-ease); }
.work-filters button span { font-size:8px; opacity:.7; }
.work-filters button[aria-pressed="true"] { color:white; background:var(--blue); border-color:var(--blue); }
.work-filters button:hover { border-color:var(--blue); }
.work-filters button:active { transform:scale(.95); }
.filter-count { font-size:10px; color:var(--muted); }
.work-image { transition:box-shadow .45s var(--motion-ease); }
.work-image:active .play-button { transform:translate(-50%,-50%) scale(.88); }
.service-card { transition:translate .45s var(--motion-ease), box-shadow .45s var(--motion-ease), border-color .35s; }
.service-top>svg { transition:transform .45s var(--motion-ease); }
.service-card:focus-within { border-color:var(--blue); }
.process-steps li { isolation:isolate; }
.process-steps li::before { content:""; position:absolute; inset:0; background:#ffffff08; z-index:-1; opacity:0; transition:opacity .4s; }
.process-steps li.step-active::before { opacity:1; }
.process-steps .step-number { transition:color .4s; }
.process-steps li.step-active .step-number { color:white; }
.process-steps li.step-active .step-number svg { transform:translateX(3px); }
.step-number svg { transition:transform .4s var(--motion-ease); }
.faq-list details { overflow:hidden; }
.faq-list summary { transition:color .25s; }
.faq-list summary:hover { color:var(--blue); }
.form-step>input, .form-step>select { transition:border-color .25s, box-shadow .25s; }
.form-step>input:focus, .form-step>select:focus { border-color:var(--blue); box-shadow:0 0 0 4px #064bff0c; }
.choice-row label { transition:background .25s,border-color .25s,transform .25s; }
.choice-row label:active { transform:scale(.98); }
.video-modal[open]::backdrop { animation:backdrop-in .3s ease both; }
@keyframes backdrop-in { from { background:#05112600; backdrop-filter:blur(0); } to { background:#051126dc; backdrop-filter:blur(8px); } }
@media (hover:hover) and (pointer:fine) {
  html[data-motion="on"] .service-card:hover { translate:0 -6px; box-shadow:0 18px 44px #163f9d10; border-color:#849fe6; }
  html[data-motion="on"] .service-card:hover .service-top>svg { transform:rotate(-12deg) scale(1.15); }
  html[data-motion="on"] .work-image:hover { box-shadow:0 12px 25px #09204420; }
  .hero-art { pointer-events:none; }
}
@media(max-width:700px) {
  /* Keep intrinsic image sizing and the full float cycle inside the art's reserved space. */
  .hero-art, .connection-art {
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:minmax(0,1fr);
    padding-block:18px;
    flex-shrink:0;
    overflow:clip;
    transform:none;
  }
  .hero-art img, .connection-art img {
    width:100%;
    height:100%;
    min-width:0;
    min-height:0;
  }
  .motion-toggle { font-size:9px; gap:6px; padding:8px 9px; min-height:44px; }
  .motion-symbol { height:8px; width:8px; }
  .hero-bottom { gap:7px; }
  .hero-bottom>p { max-width:135px; font-size:7px; }
  .portfolio-toolbar { display:block; margin:-2px 0 18px; }
  .work-filters { gap:6px; flex-wrap:nowrap; }
  .work-filters button { flex:1; gap:8px; padding:10px 9px; font-size:10px; min-height:44px; }
  .filter-count { display:block; margin-top:13px; font-size:9px; }
  html[data-motion="on"] .hero-art img { animation-duration:9s; }
}
html[data-motion="off"], html[data-motion="off"] .work-gallery { scroll-behavior:auto; }
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after { animation:none!important; transition:none!important; }
html[data-motion="off"] .hero-art, html[data-motion="off"] .connection-art { transform:none; }
@media(prefers-reduced-motion:reduce) {
  html, .work-gallery { scroll-behavior:auto!important; }
  *, *::before, *::after { animation:none!important; transition:none!important; }
  .hero-art, .connection-art { transform:none!important; }
}