/* Editorial motion: existing brand colors, real sample screens, and quiet transitions. */
:root{--motion-ease:cubic-bezier(.2,.7,.2,1);--motion-fast:220ms;--motion-enter:620ms}
html{scroll-behavior:smooth}
.site-header nav a:not(.nav-cta){position:relative}
.site-header nav a:not(.nav-cta)::after{content:'';position:absolute;left:0;right:0;bottom:-7px;height:1px;background:var(--emerald);transform:scaleX(0);transform-origin:left;transition:transform var(--motion-fast) var(--motion-ease)}
.site-header nav a:hover::after,.site-header nav a:focus-visible::after{transform:scaleX(1)}
.button,.team-socials a,.text-link svg,.nav-cta svg,.hero-preview,.showcase-tabs button,.showcase-image img{transition:transform var(--motion-fast) var(--motion-ease),background var(--motion-fast),box-shadow var(--motion-fast),border-color var(--motion-fast)}
.button svg{transition:transform var(--motion-fast) var(--motion-ease)}
.button:hover svg,.text-link:hover svg,.nav-cta:hover svg{transform:translateX(4px)}
.hero-b .hero-preview{border-radius:14px;padding:22px 24px 18px;box-shadow:0 20px 55px #16365016,5px 5px 0 var(--navy)}
.hero-b .browser-frame{border-radius:8px;background:var(--white)}
.hero-b .fictional-label{display:flex;align-items:center;gap:6px}
.fictional-label i{width:5px;height:5px;background:var(--emerald);border-radius:50%;display:block}
.hero-screen-stage{position:relative;aspect-ratio:1080/695;overflow:hidden}
.hero-screen{position:absolute;inset:0;display:block;text-decoration:none;overflow:hidden}
.hero-screen img{width:100%;height:100%;object-fit:contain;background:var(--white)}
.screen-invitation{position:absolute;bottom:24px;right:24px;display:flex;align-items:center;gap:15px;background:var(--navy);color:var(--white);border:1px solid #ffffff70;border-radius:40px;padding:13px 17px;font:700 11px/1.3 var(--ui);box-shadow:0 5px 20px #16365024;transition:background var(--motion-fast),transform var(--motion-fast)}
.screen-invitation svg{width:15px;height:15px}
.hero-screen:hover .screen-invitation{background:var(--emerald);transform:translateY(-3px)}
.hero-preview-tools{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:16px}
.hero-screen-choices{display:flex;gap:8px;flex:1;min-width:0}
.hero-screen-choices button{position:relative;display:flex;align-items:center;justify-content:center;gap:9px;padding:12px 16px;min-height:44px;font:600 11px/1.3 var(--ui);border:1px solid transparent;color:var(--navy);background:transparent;border-radius:6px;overflow:hidden;transition:background var(--motion-fast)}
.hero-screen-choices button>span{font:9px var(--ui);opacity:.6}
.hero-screen-choices button[aria-pressed=true]{background:var(--paper);border-color:#16365025}
.hero-screen-choices button:hover{background:#fbf8f180}
.screen-progress{position:absolute;bottom:0;left:0;right:0;height:2px;transform:scaleX(0);transform-origin:left;background:var(--emerald)}
.motion-toggle{display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;flex-shrink:0;padding:8px 0 8px 10px;border:0;background:transparent;color:var(--navy);font:10px/1.4 var(--ui)}
.motion-toggle>span:first-child{font:700 13px/1 var(--ui);width:15px}
.motion-toggle:disabled{cursor:default;opacity:.7}
.hero-b .hero-preview figcaption{padding-top:13px;border-top:1px solid #16365025}
.scope-strip a{display:inline-block;transition:color var(--motion-fast),transform var(--motion-fast)}
.scope-strip a:hover{transform:translateX(3px)}
.showcase-panel{border-radius:0 0 12px 12px;box-shadow:0 16px 40px #16365009}
.showcase-image{border-radius:6px}
.showcase-image:hover img{transform:scale(1.012)}
.showcase-tabs button{border-radius:7px 7px 0 0}
.marketing-grid{gap:28px}
.marketing-grid article{border-top:0;padding-top:0}
.service-art{height:235px;width:100%;border:1px solid #16365025;border-radius:12px;position:relative;overflow:hidden;margin-bottom:26px;padding:19px 22px;background:var(--mist)}
.art-caption{position:relative;z-index:1;font:700 8px/1.5 var(--ui);letter-spacing:1.3px;color:var(--navy);margin-bottom:18px}
.search-art{background:var(--sky)}
.search-window{background:var(--paper);border:1px solid #16365033;border-radius:8px;padding:15px;box-shadow:4px 5px 0 #16365015;transition:transform 400ms var(--motion-ease)}
.search-query{display:flex;align-items:center;gap:9px;padding-bottom:12px;border-bottom:1px solid var(--rule);font:11px/1.4 var(--ui);color:var(--navy)}
.search-query svg{width:15px;height:15px;stroke-width:1.7}
.search-result{padding-top:13px}.search-result small{display:block;font:700 7px/1.5 var(--ui);letter-spacing:.6px;color:var(--emerald)}
.search-result strong{display:block;font:700 15px/1.4 var(--ui);margin-top:7px;color:var(--navy)}
.search-result span{display:block;font:9px/1.5 var(--ui);margin-top:5px;color:var(--muted)}
.search-result i,.sheet-lines i{display:block;height:3px;background:#16365016;width:91%;margin-top:9px;border-radius:3px}
.search-result i:last-child{width:63%;margin-top:5px}
.content-art{background:#eeeae0}
.editorial-sheet{width:83%;position:relative;transform:rotate(-5deg);transform-origin:bottom left;background:var(--paper);padding:14px 19px;border:1px solid #16365040;box-shadow:5px 6px 0 #16365015;transition:transform 400ms var(--motion-ease)}
.sheet-masthead{display:flex;align-items:center;justify-content:space-between;gap:8px;font:700 8px/1.4 var(--ui);border-bottom:1px solid var(--navy);padding-bottom:9px;color:var(--navy)}
.sheet-masthead span{font-size:6px;white-space:nowrap}
.editorial-sheet>strong{font:italic 29px/1 var(--body);display:block;letter-spacing:-1px;margin-top:12px;color:var(--navy)}
.sheet-lines{margin:13px 0 10px}.sheet-lines i{margin-top:5px}.sheet-lines i:last-child{width:56%}
.sheet-tag{font:7px/1.5 var(--ui);color:var(--emerald)}
.editorial-mark{position:absolute;bottom:18px;right:15px;transform:rotate(7deg);display:grid;place-items:center;width:66px;height:66px;background:var(--emerald);color:var(--paper);font:italic 30px var(--body);border:1px solid var(--paper);border-radius:9px;box-shadow:3px 4px 0 #16365020;transition:transform 400ms var(--motion-ease)}
.email-art{background:var(--navy);color:var(--paper)}
.email-art .art-caption{color:var(--sky)}
.mail-step{display:flex;align-items:center;gap:12px;border:1px solid #ffffff30;border-radius:7px;padding:14px;background:#ffffff09;max-width:93%;transition:transform 400ms var(--motion-ease)}
.mail-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:5px;background:#b9dff620;flex-shrink:0;color:var(--sky)}
.mail-icon svg{width:17px;height:17px}
.mail-step small{display:block;font:7px/1.5 var(--ui);letter-spacing:.8px;color:var(--sky)}
.mail-step strong{display:block;font:700 12px/1.5 var(--ui);margin-top:3px}
.mail-connector{display:flex;align-items:center;gap:10px;margin-left:29px;height:28px}
.mail-connector i{height:28px;width:1px;background:var(--sky)}
.mail-connector span{font:6px/1.5 var(--ui);letter-spacing:.7px;color:var(--sky)}
.mail-reply{margin-left:24px;background:var(--paper);color:var(--navy);border-color:var(--paper)}
.mail-reply small,.mail-reply .mail-icon{color:var(--emerald)}
.mail-reply .mail-icon{background:#04785712}
.marketing-grid h3{font-size:19px}
.marketing-grid p{max-width:370px}
.team-socials a{border-radius:4px}
.team-socials a:hover{transform:translateY(-2px);box-shadow:0 4px 0 #1636500f}
.proof-note{border-radius:3px 20px 3px 3px}
.final-panel{border-radius:14px;box-shadow:6px 6px 0 var(--navy)}
.faq-toggle::after{transition:transform var(--motion-fast) var(--motion-ease)}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 .marketing-grid article:hover .search-window{transform:translateY(-5px)}
 .marketing-grid article:hover .editorial-sheet{transform:rotate(-2deg) translateY(-4px)}
 .marketing-grid article:hover .editorial-mark{transform:rotate(-3deg) translateY(-5px)}
 .marketing-grid article:hover .mail-reply{transform:translateX(5px)}
}
@media(max-width:1100px){.service-art{padding:17px 15px;height:226px}.art-caption{font-size:7px;letter-spacing:.8px}.search-query{font-size:9px}.search-result strong{font-size:12px}.search-result span{font-size:8px}.editorial-sheet{padding:12px}.editorial-sheet>strong{font-size:25px}.mail-step{padding:12px 9px;gap:8px}.mail-step strong{font-size:10px}.mail-step small{font-size:6px}.mail-reply{margin-left:14px}.marketing-grid h3{font-size:17px}}
@media(max-width:760px){
 .hero-b .hero-preview{padding:19px 18px 16px;border-radius:11px}
 .hero-preview-tools{flex-wrap:wrap;gap:5px;margin-top:12px}
 .hero-screen-choices{flex-basis:100%;gap:5px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
 .hero-screen-choices button{font-size:10px;padding:10px 5px;gap:6px;min-height:44px}
 .motion-toggle{margin-left:auto;min-height:36px;font-size:9px}
 .hero-b .hero-preview figcaption{margin-top:5px;padding-top:12px}
 .screen-invitation{bottom:12px;right:12px;font-size:9px;padding:9px 12px;gap:8px}
 .screen-invitation svg{width:13px;height:13px}
 .marketing-grid{gap:37px}.marketing-grid article{display:grid;grid-template-columns:1fr;gap:0}
 .service-art{height:236px;padding:19px 25px;margin-bottom:23px}
 .art-caption{font-size:8px;letter-spacing:1px}.search-query{font-size:11px}.search-result strong{font-size:15px}.search-result span{font-size:9px}
 .editorial-sheet{width:79%;max-width:290px;padding:14px 19px}.editorial-sheet>strong{font-size:29px}.editorial-mark{right:28px;bottom:20px}
 .mail-step{padding:14px;gap:12px}.mail-step strong{font-size:12px}.mail-step small{font-size:7px}.mail-reply{margin-left:24px}
 .marketing-grid h3{font-size:20px}.marketing-grid p{max-width:none}.marketing-grid .text-link{justify-self:start}
 .final-panel{box-shadow:4px 4px 0 var(--navy)}
}
@media(max-width:430px){.hero-b .hero-preview{padding:15px 12px 12px}.hero-screen-choices button{font-size:9px;gap:4px}.hero-screen-choices button>span{display:none}.screen-invitation{font-size:8px;padding:7px 9px;bottom:8px;right:8px}.screen-invitation svg{height:11px;width:11px}.service-art{padding:18px;height:227px}.art-caption{font-size:7px}.search-query{font-size:10px}.search-result strong{font-size:14px}.editorial-mark{right:15px}.mail-step strong{font-size:11px}.mail-step{padding:12px;gap:9px}.mail-reply{margin-left:18px}}
.motion-paused *,.motion-paused *::before,.motion-paused *::after{animation:none!important;transition:none!important}
.motion-paused{scroll-behavior:auto}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}