/* G&D — Figma: escritorio 1440 px y móvil 402 px. */
@layer reset, base, layout, mobile, motion;
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, p, ul, ol { margin: 0; padding: 0; }
  img { max-width: 100%; display: block; }
  a { color: inherit; text-decoration: none; }
  ul, ol { list-style: none; }
}
@layer base {
  :root { color-scheme: dark; --bg: #050608; --panel: #10131b; --text: #f6f6f8; --muted: #a8b0c0; --cyan: #00ddf0; --yellow: #ffeb17; --pink: #ff3974; }
  html { scroll-behavior: smooth; scroll-padding-top: 24px; }
  body { background: var(--bg); color: var(--text); font-family: 'Inter', Arial, sans-serif; -webkit-font-smoothing: antialiased; }
  .page { max-width: 1440px; margin-inline: auto; container-type: inline-size; }
  h1, h2, h3, .wordmark { font-family: 'Bubblegum Sans', cursive; font-weight: 400; }
  h2 { font-size: 2.986cqw; line-height: 1.05; }
  p { color: var(--muted); }
  .eyebrow { font-family: 'Inter', Arial, sans-serif; font-size: .764cqw; font-weight: 700; line-height: 1.3; }
  .cyan { color: var(--cyan); } .lemon { color: var(--yellow); } .pink { color: var(--pink); }
  .panel { background: var(--panel); border: 1px solid #252936; border-radius: 1.25cqw; }
  .button { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 3.333cqw; padding: .694cqw 1.389cqw; border-radius: .764cqw; color: #080b10; font-size: .972cqw; font-weight: 700; line-height: 1.2; transition: transform .2s ease, filter .2s ease, box-shadow .2s ease; }
  .yellow { background: var(--yellow); } .turquoise { background: #00d9ec; } .magenta { background: var(--pink); }
  .arrow { font-size: 2.083cqw; line-height: 1; font-weight: 400; }
  a:focus-visible { outline: 3px solid white; outline-offset: 5px; }
  .button:hover { transform: translateY(-3px); filter: brightness(1.07); box-shadow: 0 8px 22px #0004; }
  .button:active { transform: translateY(0) scale(.98); }
  .mobile-only { display: none; }
  .sr-only, .skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .skip-link:focus { position: fixed; inset: 12px auto auto 12px; z-index: 100; padding: 14px; color: black; background: var(--yellow); }
}
@layer layout {
  .hero { position: relative; aspect-ratio: 1440 / 665; }
  .hero-art { position: absolute; inset: 0; pointer-events: none; }
  .hero-art img { width: 100%; height: 100%; }
  .navigation { position: absolute; top: 4.36%; left: 8.333%; right: 8.333%; display: flex; align-items: center; justify-content: space-between; height: 3.333cqw; z-index: 2; }
  .wordmark { font-size: 2.361cqw; }
  .nav-links { display: flex; gap: 3.125cqw; margin-left: 11.8cqw; color: #c0c5cf; font-size: .972cqw; }
  .nav-links a:hover, .team-link:hover { color: var(--yellow); }
  .nav-cta { width: 15.972cqw; }
  .hero-eyebrow { position: absolute; left: 8.333%; top: 20.1%; }
  .hero-logo { position: absolute; overflow: hidden; left: 8.333%; top: 24.06%; width: 37.222%; height: 41.203%; }
  .hero-logo img { position: absolute; width: 113.089%; max-width: none; height: 133.607%; left: -7.0157%; top: -26.4344%; }
  .hero-services { position: absolute; left: 8.333%; top: 67.6%; font-size: 1.458cqw; color: #f6f6f7; }
  .hero-description { position: absolute; left: 8.333%; top: 74%; font-size: 1.181cqw; line-height: 1.65; }
  .hero-actions { position: absolute; left: 8.333%; top: 85.414%; display: flex; align-items: center; gap: 2.014cqw; }
  .hero-actions .button { width: 17.5cqw; }
  .team-link { font-size: .972cqw; color: #d3d8e2; }
  .portraits { position: absolute; left: 56.528%; top: 30.827%; width: 33.472%; height: 58.196%; }
  .portrait { position: absolute; object-fit: contain; transform-origin: center bottom; }
  .developer { width: 39.834%; height: 72.351%; left: 0; top: 24.031%; }
  .commercial { width: 56.224%; height: 100%; left: 43.776%; top: 0; }
  .portrait-labels { position: absolute; top: 93.23%; left: 57.361%; display: flex; align-items: center; gap: 3.333cqw; font-size: .694cqw; font-weight: 700; }
  .portrait-labels span { background: #11151e; padding: .556cqw 1.111cqw; border-radius: .556cqw; }
  .content, .footer { width: 83.333%; margin-inline: auto; }
  .team { display: grid; grid-template-columns: 44.5% 26.8% 28.7%; min-height: 16.389cqw; margin-top: 2.847cqw; padding: 2.083cqw; }
  .team-intro h2 { font-size: 2.222cqw; margin: .625cqw 0 1.181cqw; }
  .team-description { font-size: .833cqw; line-height: 1.8; }
  .team-tagline { font-size: .833cqw; margin-top: 1.111cqw; color: #e0e3e9; }
  .person { padding: .347cqw 0 0 2.153cqw; border-left: 1px solid #2b303b; }
  .person h3 { font-size: 1.806cqw; margin-top: 1.111cqw; margin-bottom: 1.25cqw; }
  .person ul { color: #aeb6c4; font-size: .868cqw; line-height: 2.08; }
  .person .eyebrow { font-size: .694cqw; }
  .skills { display: grid; grid-template-columns: 700fr 476fr; gap: 1.667cqw; margin-top: 3.333cqw; }
  .technical, .business { padding: 2.222cqw; min-height: 29.167cqw; }
  .technical h2 { font-size: 2.708cqw; margin-top: 1.042cqw; }
  .business h2 { font-size: 2.569cqw; margin-top: 1.042cqw; }
  .section-intro { font-size: .972cqw; margin-top: 1.181cqw; line-height: 1.5; }
  .tech-categories { border-top: 1px solid #2c303b; margin-top: 1.667cqw; padding-top: 1.111cqw; }
  .chips { display: flex; flex-wrap: wrap; gap: .486cqw; }
  .chips li { background: #222833; border: 1px solid #262c37; border-radius: .486cqw; padding: .486cqw .903cqw; color: #d0d5df; font-size: .903cqw; line-height: 1.15; white-space: nowrap; }
  .category .eyebrow { margin-bottom: .694cqw; }
  .web-stack .chips li:last-child { margin-right: 20cqw; }
  .apps-stack, .design-stack { display: flex; align-items: center; gap: 2.5cqw; margin-top: .625cqw; }
  .apps-stack .eyebrow, .design-stack .eyebrow { margin: 0; }
  .design-stack { gap: 2.222cqw; }
  .workflow-stack { margin-top: 1.042cqw; }
  .business .category { margin-top: 2.5cqw; }
  .business .category + .category { margin-top: 3.125cqw; }
  .business .chips li { color: #e7e3b2; font-size: .833cqw; }
  .skills-note { font-size: .833cqw; margin-top: 2.778cqw; }
  .pricing { margin-top: 3.333cqw; }
  .section-heading { display: flex; align-items: center; justify-content: space-between; margin-top: 1.042cqw; }
  .section-heading p { font-size: .833cqw; }
  .price-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.667cqw; margin-top: 2.083cqw; }
  .price-card { display: flex; flex-direction: column; padding: 1.667cqw; min-height: 21.25cqw; }
  .price-card.featured { border-color: #524c26; }
  .price-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1cqw; }
  .price-top h3 { font-size: 2.361cqw; margin-top: .417cqw; }
  .price-top .eyebrow { font-size: .694cqw; }
  .price-values { display: flex; flex-direction: column; align-items: flex-end; gap: .347cqw; padding-top: .694cqw; }
  .price-values div { text-align: right; }
  .price-values small { display: block; font-size: .556cqw; color: #aab1be; }
  .price-values strong { display: block; font-size: 2.083cqw; line-height: 1.1; }
  .price-values b { display: block; font-size: 1.111cqw; line-height: 1.15; }
  .price-description { font-size: .833cqw; padding-bottom: 1.111cqw; margin-top: 1.111cqw; border-bottom: 1px solid #2b303b; }
  .features { font-size: .764cqw; line-height: 1.9; color: #c0c6d0; margin-top: .903cqw; }
  .features li::before { content: '+ '; }
  .delivery { font-size: .764cqw; margin-top: 1.111cqw; margin-bottom: 1.25cqw; }
  .price-card .button { margin-top: auto; }
  .pricing-note { margin-top: 1.944cqw; font-size: .833cqw; }
  .results { display: grid; grid-template-columns: 35% 65%; align-items: center; padding: 2.222cqw; margin-top: 2.5cqw; min-height: 11.806cqw; background: #141a22; }
  .results h2 { font-size: 2.083cqw; margin-top: .833cqw; }
  .results-details { border-left: 1px solid #2c3442; padding-left: 2.5cqw; }
  .results-details p { font-size: 1.111cqw; color: #d2d7df; line-height: 1.5; }
  .results-details ul { display: grid; grid-template-columns: 1fr 1fr; gap: 1.111cqw; margin-top: 1.25cqw; font-size: .972cqw; color: #c1c8d4; }
  .results-details li:last-child { grid-column: 1/-1; }
  .projects { margin-top: 3.333cqw; }
  .project-gallery { position: relative; margin-top: 1.944cqw; }
  .project-previews { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1.667cqw; opacity: .22; user-select: none; }
  .project-window { height: 12.986cqw; border: 1px solid #697381; border-radius: .833cqw; background: #e0d6cd; color: #352f34; overflow: hidden; }
  .window-bar { background: #465061; padding: .278cqw .694cqw; font-size: .556cqw; color: #9ca1ab; }
  .project-window b, .project-window small { display: block; margin-left: 1.389cqw; }
  .project-window b { font-size: 1.111cqw; margin-top: 1.389cqw; }
  .project-window small { font-size: .556cqw; margin-top: .347cqw; }
  .nova { background: #17273d; color: #b8e5f9; } .verde { background: #dfeddb; color: #254829; } .pulso { background: #301729; color: #f278ad; }
  .mock-body { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.389cqw; margin: .694cqw 1.389cqw; }
  .mock-body i { display: block; background: currentColor; opacity: .6; height: .347cqw; margin: .486cqw 0; border-radius: 2px; }
  .mock-body i:nth-child(2) { width: 75%; } .mock-body i:nth-child(3) { width: 90%; }
  .mock-body span { height: 5.556cqw; background: currentColor; opacity: .7; border-radius: .694cqw; }
  .mock-body em { display: block; width: 55%; height: 1.528cqw; background: currentColor; margin-top: .833cqw; border-radius: .347cqw; }
  .maintenance { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 39.444cqw; padding: 1.667cqw; background: #171c27; border: 1px solid #586174; border-radius: 1.25cqw; box-shadow: 0 15px 35px #0005; }
  .maintenance-title { display: flex; align-items: center; gap: 1.111cqw; }
  .maintenance-title span { display: grid; place-items: center; width: 2.5cqw; height: 2.5cqw; border-radius: .694cqw; background: #333422; color: var(--yellow); font-size: 1.667cqw; }
  .maintenance h3 { font: 700 1.25cqw/1.2 'Inter', sans-serif; }
  .maintenance p { font-size: .833cqw; margin-top: .833cqw; line-height: 1.4; }
  .process { margin-top: 4.306cqw; }
  .process h2 { font-size: 2.222cqw; }
  .process ol { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.667cqw; margin-top: 2.083cqw; }
  .process li > span { display: block; border-bottom: 1px solid #2a303c; padding-bottom: .764cqw; }
  .process h3 { font: 700 1.111cqw/1.3 'Inter', sans-serif; margin-top: 1.111cqw; }
  .process p { font-size: .903cqw; margin-top: .694cqw; line-height: 1.5; }
  .contact { display: grid; grid-template-columns: 1fr 25%; gap: 2.222cqw; align-items: center; padding: 2.222cqw; min-height: 15.139cqw; margin-top: 4.306cqw; background: #141925; }
  .contact h2 { font-size: 2.986cqw; margin: 1.181cqw 0 1.389cqw; }
  .contact p:not(.eyebrow) { font-size: .972cqw; line-height: 1.5; }
  .contact-action p { text-align: center; font-size: .694cqw !important; margin-top: 1.389cqw; }
  .footer { display: flex; align-items: center; gap: 2.361cqw; border-top: 1px solid #2a303a; padding: 1.667cqw 0 2.083cqw; margin-top: 2.917cqw; }
  .footer p { font-size: .833cqw; } .footer p:last-child { margin-left: auto; }
  .whatsapp-float { position: fixed; z-index: 50; left: max(20px, env(safe-area-inset-left)); bottom: max(20px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 10px; padding: 14px 18px; min-width: 56px; min-height: 56px; border-radius: 99px; background: #25d366; color: #072817; border: 1px solid #7aeaa3; box-shadow: 0 6px 24px #0008; font: 700 14px 'Inter', sans-serif; transition: transform .2s ease; }
  .whatsapp-float:hover { transform: translateY(-4px); }
}
@layer mobile {
  @media (max-width: 767px) {
    .desktop-only { display: none !important; } .mobile-only { display: block; }
    .page { max-width: 520px; }
    .hero { aspect-ratio: 402 / 382; z-index: 1; }
    .hero-art { height: 110.73%; }
    .navigation { left: 8.955%; right: 6.965%; top: 3.926%; height: auto; }
    .nav-links { width: 100%; margin: 0; gap: 0; justify-content: space-between; font-family: 'Bubblegum Sans', cursive; font-size: 3.98cqw; color: white; }
    .nav-links a:first-child { color: #f80e41; } .nav-links a:nth-child(4) { color: #00d9ff; }
    .hero-logo { left: 11.692%; top: 12.565%; width: 64.677%; height: 34.817%; }
    .hero-services { left: 11.692%; top: 49.738%; font-family: 'Bubblegum Sans', cursive; font-size: 3.731cqw; }
    .portraits { left: 18.657%; top: 39.267%; width: 78.109%; height: 69.372%; }
    .developer { width: 36.306%; height: 62.839%; top: 25.283%; }
    .commercial { width: 58.917%; left: 41.083%; }
    .content, .footer { width: 92.537%; }
    .panel { border-radius: 4.975cqw; }
    h2 { font-size: 7.463cqw; }
    .eyebrow { font-size: 2.239cqw; }
    .button { min-height: 9.95cqw; font-size: 2.736cqw; border-radius: 2.488cqw; padding: 2.239cqw 3.98cqw; }
    .arrow { font-size: 5.473cqw; }
    .about-mobile { min-height: 51.99cqw; position: relative; padding: 2.239cqw 1.741cqw 5.224cqw; background: #0f121b; }
    .about-mobile h2 { font-size: 4.975cqw; margin: 0 0 3.731cqw 4.229cqw; }
    .about-mobile-grid { display: grid; grid-template-columns: 52% 44%; gap: 2%; align-items: stretch; }
    .about-mobile-grid p { font-family: 'Bubblegum Sans', cursive; color: white; font-size: 3.483cqw; line-height: 1.13; }
    .about-mobile .button { font-size: 2.239cqw; padding: 1.741cqw 2.488cqw; min-height: 6.219cqw; margin-top: 2.239cqw; border-radius: 3.11cqw; }
    .code-business { display: flex; flex-direction: column; justify-content: space-between; padding: 2.985cqw; background: #d9d9d9; color: #101522; border-radius: 4.975cqw; min-height: 35.075cqw; }
    .code-business b { font-size: 1.99cqw; }.code-business strong { font-family: 'Bubblegum Sans'; font-size: 4.478cqw; line-height: 1.05; }
    .mini-panels { display: flex; align-items: center; justify-content: center; gap: 1.493cqw; }
    .mini-panels span { display: grid; place-items: center; width: 12.935cqw; height: 13.93cqw; background: #101722; color: var(--cyan); font-size: 7.463cqw; border-radius: 1.493cqw; box-shadow: inset 0 2cqw #252d3a; }
    .mini-panels span:last-child { color: var(--yellow); }.mini-panels i { font-style: normal; }
    .team { margin-top: 1.493cqw; display: grid; grid-template-columns: 1fr 1fr; padding: 4.478cqw; min-height: 76.368cqw; gap: 3.483cqw 2.985cqw; }
    .team-intro { grid-column: 1/-1; }.team-intro h2 { font-size: 5.97cqw; margin: 2.239cqw 0; }.team-tagline { font-size: 2.488cqw; margin-top: 0; }
    .person { padding: 3.483cqw 2.985cqw; border: 1px solid #343b49; border-radius: 2.985cqw; display: flex; flex-direction: column; }
    .person .eyebrow { font-size: 1.741cqw; }.person h3 { font-size: 5.97cqw; margin: 2.985cqw 0 2.488cqw; }
    .person ul { font-size: 2.239cqw; line-height: 1.8; }.person-tagline { font-size: 2.239cqw; margin-bottom: 2.488cqw; }.person-commercial h3 { max-width: 28cqw; }
    .role-chip { margin-top: auto; padding-top: 3.483cqw; font-size: 1.99cqw; font-weight: 700; }
    .skills { display: flex; flex-direction: column; gap: 4.478cqw; margin-top: 4.478cqw; }
    .technical, .business { padding: 4.975cqw; }
    .technical { min-height: 113.93cqw; }.technical h2 { font-size: 8.458cqw; margin-top: 2.985cqw; }.business h2 { font-size: 6.965cqw; margin-top: 2.985cqw; }
    .section-intro { font-size: 2.488cqw; margin-top: 2.985cqw; }
    .tech-categories { margin-top: 4.478cqw; padding-top: 3.98cqw; }
    .chips { gap: 1.741cqw; }.chips li { font-size: 2.488cqw; padding: 1.741cqw 2.736cqw; border-radius: 1.493cqw; }
    .category .eyebrow { margin-bottom: 2.488cqw; }.web-stack .chips li:last-child { margin-right: 0; }
    .apps-stack, .design-stack { display: block; margin-top: 4.478cqw; }.apps-stack .eyebrow, .design-stack .eyebrow { margin-bottom: 2.488cqw; }
    .workflow-stack { margin-top: 4.478cqw; }.skills-note { font-size: 2.239cqw; margin-top: 4.478cqw; }
    .business { min-height: 66.17cqw; }.business .eyebrow { font-size: 1.99cqw; }.business .category { margin-top: 4.975cqw; }.business .category + .category { margin-top: 4.975cqw; }.business .chips li { font-size: 2.488cqw; }
    .pricing { margin-top: 5.97cqw; }.pricing .eyebrow { font-size: 2.239cqw; }.section-heading { margin-top: 2.488cqw; }.pricing h2 { font-size: 8.458cqw; }
    .price-grid { grid-template-columns: 1fr; gap: 3.483cqw; margin-top: 4.975cqw; }.price-card { padding: 4.478cqw; min-height: 48.756cqw; border-radius: 3.483cqw; }
    .price-top { gap: 2.488cqw; }.price-top h3 { font-size: 7.463cqw; margin-top: 1.741cqw; }.price-top .eyebrow { font-size: 1.99cqw; }
    .price-values { padding-top: 1.493cqw; gap: .995cqw; }.price-values small { font-size: 1.741cqw; }.price-values strong { font-size: 5.97cqw; }.price-values b { font-size: 3.234cqw; }
    .price-description { font-size: 2.488cqw; margin-top: 2.985cqw; padding-bottom: 2.488cqw; }.features { font-size: 2.239cqw; margin-top: 2.488cqw; line-height: 1.8; }.delivery { font-size: 2.239cqw; margin: 2.736cqw 0 2.985cqw; }
    .price-card .button { min-height: 8.955cqw; }.pricing-note { font-size: 2.239cqw; margin-top: 3.98cqw; }
    .results { display: block; padding: 4.478cqw; margin-top: 4.478cqw; min-height: 34.826cqw; }.results .eyebrow { font-size: 1.99cqw; }.results h2 { font-size: 5.473cqw; margin-top: 2.488cqw; }
    .results-details { border: 0; padding: 0; margin-top: 2.985cqw; }.results-details p { font-size: 2.488cqw; line-height: 1.4; }.results-details ul { font-size: 2.239cqw; gap: 1.741cqw; margin-top: 2.488cqw; }
    .projects { margin-top: 4.975cqw; }.projects h2 { font-size: 6.965cqw; }.projects .eyebrow { font-size: 1.99cqw; }.project-gallery { margin-top: 3.98cqw; }.project-previews { grid-template-columns: 1fr 1fr; gap: 2.488cqw; }.project-window { height: 25.871cqw; border-radius: 2.488cqw; }.window-bar { font-size: 1.493cqw; padding: .746cqw 1.741cqw; }.project-window b, .project-window small { margin-left: 2.985cqw; }.project-window b { font-size: 3.483cqw; margin-top: 2.488cqw; }.project-window small { font-size: 1.493cqw; }.mock-body { gap: 2.488cqw; margin: 1.741cqw 2.985cqw; }.mock-body i { height: .995cqw; margin: 1.244cqw 0; }.mock-body span { height: 10.945cqw; border-radius: 1.741cqw; }.mock-body em { height: 2.985cqw; margin-top: 1.741cqw; }
    .maintenance { width: 84.08cqw; padding: 3.98cqw; border-radius: 3.483cqw; }.maintenance-title { gap: 2.488cqw; }.maintenance-title span { width: 6.965cqw; height: 6.965cqw; font-size: 4.975cqw; border-radius: 1.741cqw; flex-shrink: 0; }.maintenance h3 { font-size: 2.736cqw; }.maintenance p { font-size: 2.239cqw; margin-top: 2.488cqw; }.maintenance p .mobile-only { display: inline; }.gallery-note { font-size: 1.99cqw; margin-top: 2.985cqw; text-align: center; }
    .process { margin-top: 5.97cqw; }.process h2 { font-size: 5.97cqw; }.process ol { gap: 2.985cqw; margin-top: 3.98cqw; }.process li > span { padding-bottom: 1.741cqw; }.process h3 { font-size: 2.488cqw; margin-top: 2.488cqw; }.process p { font-size: 2.239cqw; margin-top: 1.741cqw; }
    .contact { display: block; padding: 4.975cqw; margin-top: 5.97cqw; min-height: 46.269cqw; }.contact h2 { font-size: 7.463cqw; margin: 2.985cqw 0; }.contact p:not(.eyebrow) { font-size: 2.488cqw; }.contact-action { margin-top: 4.478cqw; }.contact-action .button { width: 100%; }
    .footer { padding: 3.98cqw 0 20cqw; margin-top: 3.98cqw; gap: 3.98cqw; }.footer .wordmark { font-size: 5.97cqw; }.footer p { font-size: 2.239cqw; }.footer p:last-child { margin-left: 0; }
    .whatsapp-float { left: max(14px, env(safe-area-inset-left)); bottom: max(14px, env(safe-area-inset-bottom)); padding: 13px; }.whatsapp-float span { display: none; }
  }
}
/* Ajustes de lectura y espaciado respecto al marco móvil de Figma. */
@layer mobile {
  @media (max-width: 767px) {
    .person h3 { font-size: 4.975cqw; }
    .technical h2 { font-size: 7.463cqw; }
    .technical .chips li { font-size: 2.313cqw; padding: 1.493cqw 2.239cqw; }
    .technical .category .eyebrow { font-size: 1.99cqw; margin-bottom: 1.99cqw; }
    .apps-stack, .design-stack, .workflow-stack { margin-top: 3.234cqw; }
    .pricing h2 { font-size: 7.711cqw; }
    .price-top { position: relative; min-height: 10.945cqw; }
    .price-values { position: absolute; right: 0; top: 0; padding: 0; }
    .price-description { max-width: 67%; border: 0; padding-bottom: 0; }
    .features .mobile-only { display: inline; }
    .features { line-height: 1.65; }
    .delivery { margin: 1.99cqw 0 2.239cqw; }
    .price-card .button { padding-block: 1.493cqw; }
  }
}
@layer motion {
  .enter { animation: fade-in .5s ease-out .1s both; }
  .js-motion .reveal { opacity: 0; }
  .js-motion .reveal.rise { transform: translateY(20px); }
  .js-motion .reveal.visible { opacity: 1; transform: none; transition: opacity .5s ease-out, transform .55s cubic-bezier(.05,.4,.5,1); }
  .developer { animation: developer-swap 4.6s ease-in-out infinite; }
  .commercial { animation: commercial-swap 4.6s ease-in-out infinite; }
  @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes developer-swap { 0%,17.39%,100% { transform: translate(0,0) scale(1); } 50%,67.39% { transform: translate(129.95%,-11.02%) scale(1.4115,1.3821); } }
  @keyframes commercial-swap { 0%,17.39%,100% { transform: translate(0,0) scale(1); } 50%,67.39% { transform: translate(-92.07%,-3.62%) scale(.7085,.7235); } }
  .motion-paused .portrait { animation-play-state: paused; }
  @media(max-width:767px) {
    @keyframes developer-swap { 0%,17.39%,100% { transform: translate(0,0) scale(1); } 50%,67.39% { transform: translate(144.3%,18.9%) scale(1.623,1.591); } }
    @keyframes commercial-swap { 0%,17.39%,100% { transform: translate(0,0) scale(1); } 50%,67.39% { transform: translate(-88.9%,-11.88%) scale(.6162,.6284); } }
  }
  @media(prefers-reduced-motion:reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .js-motion .reveal { opacity: 1; transform: none; }
  }
}